/* ─────────────────────────────────────────────────────────────
   Historias Clínicas — hoja de estilos única (sin CDN ni frameworks)
   ───────────────────────────────────────────────────────────── */

/* Identidad de la Dra. Irina Cawen.
   El teal sale del archivo del logo (assets/icono.png es un plano #00A098);
   los neutros, del tema de su sitio (socram1669.wixsite.com/irinacawen). */
:root {
  --brand:        #00a098;  /* teal exacto del mandala del logo */
  --brand-dark:   #007068;  /* misma familia, oscurecido para texto encima */
  --brand-deep:   #00504c;  /* hover de botones */
  --brand-soft:   #e0f4f2;  /* tinte claro del teal, fondos suaves */
  --brand-border: #b3e0dc;  /* teal claro, bordes destacados */
  /* Marrón cálido del subtítulo del logo ("Dermatología y Medicina Estética") */
  --acento-calido: #8a6f4b;
  --ok:           #3a725d;  /* verde secundario del sitio */
  --ok-soft:      #e6f3ec;
  --warn:         #b45309;
  --warn-soft:    #fdf4e3;
  --danger:       #c0392b;
  --danger-soft:  #fdecea;
  --bg:           #eff1f2;  /* fondo de página del sitio */
  --surface:      #fcfcfb;  /* blanco hueso de las tarjetas */
  --border:       #e2e7e7;
  --text:         #515151;  /* gris de texto del sitio */
  /* El sitio usa #878787 para el gris secundario. Acá va un punto más oscuro
     porque en la app son etiquetas de 12px que se leen todo el día
     (#878787 queda en 3.5:1 de contraste, por debajo del mínimo accesible). */
  --muted:        #696969;
  --fuente:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: var(--fuente);
  --shadow:       0 1px 3px rgba(81,81,81,.10), 0 1px 2px rgba(81,81,81,.06);
  --shadow-lg:    0 12px 32px rgba(29,53,53,.18);
  --radius:       12px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden lo pone el navegador como display:none, pero cualquier
   regla propia que fije display (grid, flex, block) le gana. Sin esto quedan
   visibles el recuadro de respaldo del logo, las opciones de admin en el menú
   de un profesional y la cabecera de resultados vacía. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fuente);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Los títulos del sitio son Oswald. Acá van con la tipografía del sistema
   (la app no carga fuentes externas para funcionar sin internet), pero con
   el mismo peso y espaciado abierto para que la lectura sea parecida.
   Para usar Oswald real, basta redefinir --fuente-titulos. */
h1, h2, h3, .marca-txt strong, .login-marca h1, .sesion-tratamiento, .fila-nombre {
  font-family: var(--fuente-titulos);
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: .005em; }
a { color: var(--brand-dark); }

/* ── Botones ─────────────────────────────────────────────── */
.btn-principal, .btn-secundario, .btn-volver {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 9px; font: inherit; font-weight: 600; font-size: 13.5px;
  padding: 9px 16px; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
/* El teal medio del sitio (#56a0a0) no da contraste suficiente con texto blanco
   encima (3:1), así que los rellenos con texto usan el teal oscuro y el teal
   medio queda para bordes, focos y acentos decorativos. */
.btn-principal { background: var(--brand-dark); color: #fff; }
.btn-principal:hover { background: var(--brand-deep); }
.btn-secundario { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secundario:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-principal:disabled, .btn-secundario:disabled { opacity: .55; cursor: default; }
.btn-full { width: 100%; padding: 12px; font-size: 15px; }
.btn-volver {
  background: none; border: none; color: var(--muted); padding: 6px 0; margin-bottom: 14px;
}
.btn-volver:hover { color: var(--brand-dark); }
.btn-mini {
  background: none; border: 1px solid var(--border); border-radius: 7px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 4px 9px; cursor: pointer;
}
.btn-mini:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-mini.peligro:hover { border-color: var(--danger); color: var(--danger); }

/* ── Campos de formulario ────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.campo.requerido > span::after { content: " *"; color: var(--brand); }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  width: 100%; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.campo textarea { resize: vertical; min-height: 62px; }
.campo input[type="file"] { padding: 8px; background: var(--bg); }

.form-grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px;
}
.form-grilla .ancho-total { grid-column: 1 / -1; }

.alerta-error {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid #f5c9c3; border-radius: 9px;
  padding: 9px 12px; font-size: 13px; font-weight: 500;
}
.nota {
  background: var(--warn-soft); color: var(--warn); border: 1px solid #f3e0bd;
  border-radius: 9px; padding: 9px 12px; font-size: 13px; margin: 0 0 14px;
}

/* ── Login ───────────────────────────────────────────────── */
.pantalla-login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, var(--brand-soft) 0%, var(--surface) 55%, var(--bg) 100%);
}
.login-card {
  width: 100%; max-width: 390px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 34px 30px 26px;
}
.login-marca { text-align: center; margin-bottom: 26px; }
/* Lockup completo (mandala + nombre + especialidad) */
.login-logo-img {
  display: block; width: 100%; max-width: 268px; height: auto;
  margin: 0 auto 6px;
}
/* Mandala del logo en la pantalla de acceso */
.login-icono {
  display: block; width: 76px; height: 76px;
  margin: 0 auto 14px; object-fit: contain;
}
.login-marca h1 { font-size: 21px; }
.login-especialidad {
  margin: 3px 0 0; font-size: 12.5px; font-weight: 600;
  color: var(--acento-calido);
}
.login-sub { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }
#form-login { display: flex; flex-direction: column; gap: 15px; }
.campo-password { position: relative; display: flex; }
.campo-password input { padding-right: 54px; }
.ver-password {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--brand-dark); font: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 8px;
}
.login-pie {
  margin: 22px 0 0; text-align: center; font-size: 11.5px;
  color: var(--muted); line-height: 1.6;
}
.credito {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.7;
}
.credito strong { color: var(--text); font-weight: 700; }
.credito a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }

/* Pie de la app */
.pie-app {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-top: 40px; padding-top: 16px;
  border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted);
}
.pie-app strong { color: var(--text); font-weight: 700; }
.pie-app a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }

/* Solo visible al imprimir */
.solo-impresion { display: none; }
.encabezado-impresion {
  justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--text); padding-bottom: 8px; margin-bottom: 16px;
}
.encabezado-impresion strong { font-size: 15px; }
.encabezado-impresion span { font-size: 11.5px; color: var(--muted); }
.marca-impresion { display: flex; align-items: center; gap: 12px; }
.marca-impresion img { height: 40px; width: auto; }
/* Con el logo presente el nombre ya está en la imagen: no lo repetimos */
.marca-impresion img + strong { display: none; }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px; min-height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--brand-dark); font-weight: 800; font-size: 16px;
}
/* Mandala del logo en la barra superior */
.marca-icono {
  width: 40px; height: 40px; flex: 0 0 40px;
  object-fit: contain; display: block;
}
.marca-txt { display: flex; flex-direction: column; line-height: 1.2; }
.marca-txt strong { font-size: 15px; font-weight: 700; letter-spacing: .005em; }
.marca-txt small { font-size: 10.5px; font-weight: 600; color: var(--acento-calido); }

.usuario-menu { position: relative; }
.usuario-btn {
  display: flex; align-items: center; gap: 9px; background: none;
  border: 1px solid transparent; border-radius: 10px; padding: 5px 8px;
  cursor: pointer; font: inherit; color: var(--text);
}
.usuario-btn:hover { border-color: var(--border); background: var(--bg); }
.usuario-datos { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.usuario-datos strong { font-size: 13px; }
.usuario-datos small { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.avatar {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  text-transform: uppercase;
}
.avatar-grande { width: 54px; height: 54px; flex-basis: 54px; font-size: 18px; }

.menu-desplegable {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 216px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow-lg); padding: 6px; overflow: hidden;
}
.menu-desplegable button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; font-size: 13.5px; color: var(--text); padding: 9px 11px;
  border-radius: 8px; cursor: pointer;
}
.menu-desplegable button:hover { background: var(--bg); }
.menu-desplegable button.peligro { color: var(--danger); }
.menu-desplegable hr { border: none; border-top: 1px solid var(--border); margin: 5px 2px; }

/* ── Layout ──────────────────────────────────────────────── */
.contenedor { max-width: 1180px; margin: 0 auto; padding: 22px 20px 70px; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.panel-titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }

/* ── Buscador ────────────────────────────────────────────── */
.buscador {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 20px;
}
.buscador-fila { display: flex; gap: 10px; align-items: stretch; }
.input-busqueda { position: relative; flex: 1; display: flex; }
.icono-lupa {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
#q {
  font: inherit; font-size: 16px; width: 100%;
  padding: 12px 40px 12px 42px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text);
}
#q:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
#q::-webkit-search-cancel-button { display: none; }
.limpiar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 2px 7px;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip.activo { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-dark); }

/* ── Resumen de inicio ───────────────────────────────────── */
.tarjetas-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.tarjeta-num {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 17px;
}
.tarjeta-num b { display: block; font-size: 26px; line-height: 1.15; color: var(--brand-dark); }
.tarjeta-num span { font-size: 12px; color: var(--muted); }

.grilla-inicio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lista-simple { display: flex; flex-direction: column; }
.item-simple {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: none; border: none; border-top: 1px solid var(--border);
  padding: 10px 2px; font: inherit; cursor: pointer; width: 100%;
}
.lista-simple .item-simple:first-child { border-top: none; }
.item-simple:hover { background: var(--bg); }
.item-simple .txt { flex: 1; min-width: 0; }
.item-simple .txt strong { display: block; font-size: 13.5px; }
.item-simple .txt small { color: var(--muted); font-size: 12px; }
.item-simple .fecha { font-size: 12px; font-weight: 700; color: var(--brand-dark); white-space: nowrap; }

/* ── Listado de pacientes ────────────────────────────────── */
.resultados-cabecera {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; font-size: 13px; color: var(--muted);
}
.lista-pacientes { display: flex; flex-direction: column; gap: 9px; }
.fila-paciente {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 15px; font: inherit; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.fila-paciente:hover { border-color: var(--brand-border); transform: translateY(-1px); }
.fila-datos { flex: 1; min-width: 0; }
.fila-nombre { font-weight: 700; font-size: 15px; }
.fila-sub {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
}
.fila-sub span { display: inline-flex; align-items: center; gap: 4px; }
.fila-derecha { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }
.fila-derecha b { display: block; color: var(--text); font-size: 13px; }

.etiqueta {
  display: inline-block; border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.etiqueta.alergia { background: var(--danger-soft); color: var(--danger); }
.etiqueta.antes { background: var(--brand-soft); color: var(--brand-dark); }
.etiqueta.despues { background: var(--ok-soft); color: var(--ok); }
.etiqueta.otro { background: var(--bg); color: var(--muted); }

.vacio {
  text-align: center; color: var(--muted); padding: 44px 20px;
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
}
.vacio strong { display: block; color: var(--text); margin-bottom: 5px; font-size: 15px; }

/* ── Ficha del paciente ──────────────────────────────────── */
.ficha-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px;
}
.ficha-identidad { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ficha-identidad h1 { font-size: 21px; }
.ficha-meta {
  display: flex; flex-wrap: wrap; gap: 3px 15px;
  font-size: 12.5px; color: var(--muted); margin-top: 4px;
}
.ficha-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.alerta-alergias {
  background: var(--danger-soft); border: 1px solid #f5c9c3; color: var(--danger);
  border-radius: var(--radius); padding: 11px 15px; margin-bottom: 14px;
  font-size: 13.5px; font-weight: 600;
}

.pestanias {
  display: flex; gap: 3px; border-bottom: 1px solid var(--border);
  margin-bottom: 18px; overflow-x: auto;
}
.pestania {
  background: none; border: none; border-bottom: 2px solid transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted);
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.pestania:hover { color: var(--text); }
.pestania.activo { color: var(--brand-dark); border-bottom-color: var(--brand); }
.cont {
  display: inline-block; background: var(--bg); border-radius: 999px;
  padding: 1px 7px; font-size: 11px; margin-left: 4px;
}

/* ── Timeline de sesiones ────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 12px; }
.sesion {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 17px;
}
.sesion-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.sesion-fecha { font-size: 12px; font-weight: 700; color: var(--brand-dark); text-transform: capitalize; }
.sesion-tratamiento { font-weight: 700; font-size: 15.5px; margin: 3px 0 8px; }
.sesion-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 18px; font-size: 13px;
}
.sesion-datos div span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.sesion-texto { margin-top: 10px; font-size: 13.5px; white-space: pre-wrap; }
.sesion-texto b { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; font-weight: 700; }
.sesion-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.sesion-acciones { display: flex; gap: 6px; }

/* ── Galería ─────────────────────────────────────────────── */
.fotos-barra {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.fotos-barra .chips { margin-top: 0; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.foto {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.foto img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  cursor: zoom-in; background: var(--bg);
}
.foto-pie { padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.foto-pie small { color: var(--muted); font-size: 11.5px; }
.foto-pie .linea { display: flex; justify-content: space-between; align-items: center; gap: 6px; }

/* ── Datos personales (lista clave/valor) ───────────────── */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; }
.kv div span { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kv div strong { font-weight: 600; font-size: 14px; }

/* ── Modales ─────────────────────────────────────────────── */
.modal {
  border: none; border-radius: 16px; padding: 0; width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 48px); box-shadow: var(--shadow-lg);
  color: var(--text); background: var(--surface);
}
.modal-angosto { width: min(430px, calc(100vw - 28px)); }
.modal::backdrop { background: rgba(29,26,28,.45); backdrop-filter: blur(2px); }
.modal[open] { display: flex; flex-direction: column; overflow: hidden; }
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 17px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); border-radius: 16px 16px 0 0;
}
.modal-head h2 { font-size: 17px; }
.cerrar {
  background: none; border: none; font-size: 26px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.cerrar:hover { color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-foot {
  padding: 15px 20px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border-radius: 0 0 16px 16px;
}
.modal-botones { display: flex; justify-content: flex-end; gap: 9px; }

.alta-usuario {
  margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px;
}
.alta-usuario summary {
  cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--brand-dark); margin-bottom: 14px;
}
.tabla-usuarios, .tabla-actividad { display: flex; flex-direction: column; }
.fila-usuario {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--border); padding: 11px 2px;
}
.tabla-usuarios .fila-usuario:first-child { border-top: none; }
.fila-usuario .txt { flex: 1; min-width: 0; }
.fila-usuario .txt strong { display: block; font-size: 14px; }
.fila-usuario .txt small { color: var(--muted); font-size: 12px; }
.fila-usuario.inactivo { opacity: .55; }
.tabla-actividad .fila-log {
  display: grid; grid-template-columns: 130px 110px 1fr;
  gap: 10px; border-top: 1px solid var(--border);
  padding: 8px 2px; font-size: 12.5px;
}
.tabla-actividad .fila-log:first-child { border-top: none; }
.tabla-actividad .fila-log time { color: var(--muted); }
.tabla-actividad .fila-log b { font-weight: 700; }

/* ── Visor de imagen ─────────────────────────────────────── */
.visor {
  border: none; padding: 0; background: transparent;
  width: min(94vw, 1000px); max-height: 94vh; overflow: visible;
}
.visor::backdrop { background: rgba(0,0,0,.82); }
.visor img {
  display: block; max-width: 100%; max-height: 82vh; margin: 0 auto;
  border-radius: 10px; background: #000;
}
.visor p { color: #fff; text-align: center; font-size: 13px; margin: 12px 0 0; }
.visor-cerrar {
  position: absolute; top: -40px; right: 0; color: #fff; font-size: 32px; z-index: 2;
}

/* ── Avisos flotantes ────────────────────────────────────── */
.avisos {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: calc(100% - 32px); max-width: 420px;
}
.aviso {
  background: var(--text); color: #fff; border-radius: 10px;
  padding: 11px 17px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg); animation: sube .2s ease-out;
}
.aviso.error { background: var(--danger); }
.aviso.ok { background: var(--ok); }
@keyframes sube { from { opacity: 0; transform: translateY(10px); } }

.cargando { text-align: center; color: var(--muted); padding: 34px; font-size: 13.5px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 780px) {
  .grilla-inicio { grid-template-columns: 1fr; }
  .ficha-cabecera { flex-direction: column; }
  .ficha-acciones { width: 100%; }
  .ficha-acciones button { flex: 1; }
}
@media (max-width: 560px) {
  .contenedor { padding: 16px 14px 60px; }
  .buscador-fila { flex-direction: column; }
  .btn-principal, .btn-secundario { padding: 11px 16px; }
  .marca-txt small { display: none; }
  .marca-txt strong { font-size: 14px; }
  .usuario-datos { display: none; }
  .pie-app { justify-content: center; text-align: center; }
  .fila-derecha { display: none; }
  .tarjetas-resumen { grid-template-columns: 1fr 1fr; }
  .modal, .modal-angosto { width: 100vw; max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
  .modal-head, .modal-foot { border-radius: 0; }
  .tabla-actividad .fila-log { grid-template-columns: 1fr; gap: 2px; }
}

@media print {
  .topbar, .buscador, .ficha-acciones, .pestanias, .btn-volver,
  .fotos-barra, .sesion-acciones, .avisos,
  #form-antecedentes button, .usuario-menu { display: none !important; }
  body { background: #fff; }
  .contenedor { padding: 0; max-width: none; }
  .tab-panel[hidden] { display: block !important; }
  .sesion, .panel, .ficha-cabecera { box-shadow: none; break-inside: avoid; }
  .solo-impresion { display: flex !important; }
  .pie-app { margin-top: 24px; }
  /* Título de cada sección, que en pantalla lo dan las pestañas */
  #tab-sesiones::before { content: "Sesiones de tratamiento"; }
  #tab-antecedentes::before { content: "Antecedentes médicos"; }
  #tab-fotos::before { content: "Fotos"; }
  #tab-ficha::before { content: "Datos personales"; }
  #tab-sesiones::before, #tab-antecedentes::before,
  #tab-fotos::before, #tab-ficha::before {
    display: block; font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; margin: 22px 0 10px; break-after: avoid;
  }
}