/* =====================================================================
   HEALTH360 · Sistema de diseño
   Tema: azul/púrpura sobre fondo claro, barra lateral azul oscuro.
   ===================================================================== */
:root{
  --azul:#2563eb;        --azul-osc:#1d4ed8;   --azul-claro:#eff4ff;
  --purpura:#7c3aed;     --purpura-osc:#6d28d9; --purpura-claro:#f3efff;
  --verde:#16a34a;       --verde-bg:#e7f7ee;
  --amarillo:#d97706;    --amarillo-bg:#fef4e2;
  --rojo:#dc2626;        --rojo-bg:#fdeaea;
  --tinta:#0f2247;       --gris:#64748b;       --gris-2:#94a3b8;
  --linea:#e6ebf3;       --fondo:#f4f6fb;      --blanco:#fff;
  --side-1:#0b1e40;      --side-2:#0a1730;
  --radio:16px;          --radio-sm:11px;
  --sombra:0 6px 22px rgba(15,34,71,.07);
  --sombra-sm:0 2px 8px rgba(15,34,71,.06);
  --fuente:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--fuente);background:var(--fondo);color:var(--tinta);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.oculto{display:none !important}

/* ---------- Layout general ---------- */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
@media(max-width:900px){.app{grid-template-columns:1fr}}

/* ---------- Barra lateral ---------- */
.side{background:linear-gradient(180deg,var(--side-1),var(--side-2));color:#dbe6fb;
  display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side__logo{display:flex;align-items:center;gap:11px;padding:6px 8px 16px}
.side__logo .mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.side__logo b{font-size:20px;color:#fff;letter-spacing:.3px;display:block;line-height:1.1}
.side__logo small{font-size:10.5px;color:#9fb4dd}
.side-orgwrap{display:flex;justify-content:center;padding:2px 8px 10px}
.side-org{height:46px;max-width:172px;object-fit:contain;border-radius:8px;background:#fff;padding:4px 8px}
/* Foto/avatar del paciente en Historia Clínica: llena su recuadro sin deformarse */
.hc-avatar img,.hc-avatar .ava{width:100%;height:100%;object-fit:cover;border-radius:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6)}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:#c6d5f0;font-size:14.5px;font-weight:500;transition:.15s}
.nav a .ic{width:22px;text-align:center;font-size:17px;opacity:.9}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.activo{background:linear-gradient(90deg,#3b82f6,#6d5cf6);color:#fff;box-shadow:0 6px 16px rgba(59,130,246,.35)}
.side__card{margin-top:auto;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:14px;text-align:center}
.side__card .ic{font-size:20px}
.side__card b{display:block;color:#fff;font-size:14px;margin:6px 0 3px}
.side__card small{color:#9fb4dd;font-size:11px;line-height:1.5}

/* ---------- Encabezado ---------- */
.main{min-width:0}
.topbar{display:flex;align-items:center;gap:16px;padding:20px 28px;background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.topbar .burger{display:none;background:none;border:0;font-size:22px;color:var(--tinta)}
.topbar__t h1{margin:0;font-size:22px}
.topbar__t p{margin:2px 0 0;color:var(--gris);font-size:13px}
.topbar__sp{flex:1}
.bell{position:relative;background:var(--azul-claro);border:0;width:42px;height:42px;border-radius:12px;font-size:18px}
.bell span{position:absolute;top:-4px;right:-4px;background:var(--rojo);color:#fff;font-size:10px;min-width:18px;height:18px;
  border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.usuario{display:flex;align-items:center;gap:10px}
.usuario img,.usuario .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.usuario b{font-size:14px;display:block;line-height:1.15}
.usuario small{font-size:12px;color:var(--gris)}
@media(max-width:900px){.topbar .burger{display:block}.side{position:fixed;left:0;top:0;z-index:60;width:260px;transform:translateX(-100%);transition:.25s}
  .side.abierta{transform:none}.app{grid-template-columns:1fr}}
/* Móvil: aligera la barra superior para que no se amontone ni desborde */
@media(max-width:640px){
  .topbar{gap:8px;padding:12px 14px}
  .topbar__t h1{font-size:18px}
  .topbar__t p{display:none}
  .topbar #topFecha{display:none}
  .bell{width:38px;height:38px;font-size:16px}
  .usuario{gap:6px}
  .usuario>div{display:none}
  .contenido{padding:16px 14px 60px}
}

/* ---------- Contenido ---------- */
.contenido{padding:22px 28px 60px}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:2fr 1fr}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.g-2{grid-template-columns:1fr}.g-5{grid-template-columns:repeat(2,1fr)}.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-5,.g-4,.g-3{grid-template-columns:1fr}}

/* ---------- Tarjetas ---------- */
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-sm);padding:20px}
.card h3{margin:0 0 14px;font-size:16px;display:flex;align-items:center;gap:9px}
.card h3 .lnk{margin-left:auto;font-size:12.5px;color:var(--azul);font-weight:600}
.card__t{font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px}

/* Encabezado de paciente */
.pac{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pac img,.pac .ava{width:62px;height:62px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700}
.pac .dato{display:flex;flex-direction:column}
.pac .dato small{color:var(--gris);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.pac .dato b{font-size:16px}

/* Métricas (signos vitales) */
.metricas{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1100px){.metricas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.metricas{grid-template-columns:1fr}}
.metrica{border:1px solid var(--linea);border-radius:var(--radio-sm);padding:15px;text-align:center;background:#fbfcff}
.metrica .ic{font-size:20px}
.metrica .et{font-size:12px;color:var(--gris);margin:6px 0}
.metrica .val{font-size:26px;font-weight:800;line-height:1}
.metrica .un{font-size:11px;color:var(--gris-2)}

/* Insignias */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px}
.b-ok{background:var(--verde-bg);color:var(--verde)}
.b-warn{background:var(--amarillo-bg);color:var(--amarillo)}
.b-bad{background:var(--rojo-bg);color:var(--rojo)}
.b-info{background:var(--azul-claro);color:var(--azul)}

/* Listas de registros / recomendaciones */
.fila{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--linea);font-size:13.5px}
.fila:last-child{border-bottom:0}
.fila .pt{width:9px;height:9px;border-radius:50%;background:var(--verde);flex:none}
.fila .sp{flex:1}
.fila .cta{color:var(--gris-2)}

/* Tabla de referencia */
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{text-align:left;color:var(--gris);font-weight:600;padding:9px 8px;border-bottom:2px solid var(--linea);font-size:12px}
.tabla td{padding:9px 8px;border-bottom:1px solid var(--linea)}

/* Alertas */
.alerta{display:flex;gap:10px;padding:13px;border-radius:12px;font-size:13px;margin-bottom:10px;line-height:1.45}
.alerta.ok{background:var(--verde-bg);color:#14663a}
.alerta.warn{background:var(--amarillo-bg);color:#7c4a05}

/* ---------- Formularios ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.col-2{grid-column:1 / -1}
label{font-size:12.5px;color:var(--gris);font-weight:600}
input,select,textarea{border:1.5px solid var(--linea);border-radius:10px;padding:11px 12px;font-size:14px;background:#fff;color:var(--tinta);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.hint{font-size:11.5px;color:var(--gris-2)}
.btn{background:linear-gradient(90deg,var(--azul),var(--purpura));color:#fff;border:0;padding:12px 20px;border-radius:11px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn--sec{background:#fff;color:var(--azul);border:1.5px solid var(--azul)}
.btn--full{width:100%}
.btn--ghost{background:var(--azul-claro);color:var(--azul)}

/* ---------- Pantalla de acceso ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:860px){.auth{grid-template-columns:1fr}.auth__hero{display:none}}
.auth__hero{background:linear-gradient(160deg,#0b1e40,#4c2a8f);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px}
.auth__hero .mark{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:22px}
.auth__hero h2{font-size:34px;margin:0 0 12px}
.auth__hero p{color:#c7d6f5;font-size:15px;line-height:1.6;max-width:420px}
.auth__hero ul{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px}
.auth__hero li{display:flex;gap:11px;align-items:center;color:#dbe6fb;font-size:14px}
.auth__form{display:flex;align-items:center;justify-content:center;padding:40px}
.auth__box{width:100%;max-width:400px}
.auth__box h1{font-size:24px;margin:0 0 4px}
.auth__box .sub{color:var(--gris);font-size:14px;margin:0 0 22px}
.auth__box .campo{margin-bottom:14px}
.auth__switch{text-align:center;font-size:13.5px;color:var(--gris);margin-top:18px}
.auth__switch a{color:var(--azul);font-weight:700}
.msg{padding:11px 13px;border-radius:10px;font-size:13px;margin-bottom:14px}
.msg.err{background:var(--rojo-bg);color:var(--rojo)}
.msg.ok{background:var(--verde-bg);color:var(--verde)}

/* Consentimiento */
.consent{max-height:230px;overflow-y:auto;border:1px solid var(--linea);border-radius:12px;padding:14px;font-size:12.5px;color:var(--gris);line-height:1.6;background:#fbfcff;margin-bottom:12px}
.check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--tinta);margin-bottom:10px}
.check input{width:auto;margin-top:2px}

/* Toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:200;opacity:0;transition:.25s;pointer-events:none}
.toast.ver{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast.err{background:var(--rojo)}

/* Cargador */
.cargando{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--gris)}
.spin{width:34px;height:34px;border:3px solid var(--linea);border-top-color:var(--azul);border-radius:50%;animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--azul-claro);color:var(--azul);border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.chip.rojo{background:var(--rojo-bg);color:var(--rojo)}

/* Módulos (inicio) */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.mods{grid-template-columns:1fr}}
.mod{border:1px solid var(--linea);border-radius:12px;padding:14px;display:flex;gap:11px;align-items:center;background:#fff;transition:.15s}
.mod:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.mod .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--azul-claro)}
.mod b{font-size:13.5px;display:block}
.mod small{font-size:11.5px;color:var(--gris)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{border-radius:14px;padding:16px;border:1px solid var(--linea)}
.tile .ic{font-size:20px}
.tile .val{font-size:24px;font-weight:800;margin-top:6px}
.tile .et{font-size:12px;color:var(--gris)}
.tile small{font-size:11px;color:var(--gris)}

/* ---- Panel de administración · Pacientes ---- */
.alerta.bad{background:var(--rojo-bg);color:#8a1c1c}
.pac-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--linea);border-radius:14px;margin-bottom:8px;cursor:pointer;transition:background .15s,border-color .15s}
.pac-row:hover{background:var(--azul-claro);border-color:var(--azul)}
.pac-ava{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6)}

/* ---- Aviso de paciente activo (admin viendo como paciente) ---- */
.pac-activo{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;padding:11px 16px;border-radius:12px;margin:0 0 16px;font-size:14px;flex-wrap:wrap}
.pac-activo b{font-weight:800}
.pac-activo button{margin-left:auto;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:8px;padding:6px 12px;font-weight:600;cursor:pointer;font-size:13px}
.pac-activo button:hover{background:rgba(255,255,255,.32)}

/* ---- Manual de Usuario (integrado) ---- */
.manual-toc{display:flex;flex-direction:column;gap:2px}
.manual-tocitem{text-align:left;background:none;border:0;border-bottom:1px dashed var(--linea);padding:9px 6px;color:var(--tinta);font-size:13.5px;cursor:pointer;font-weight:500}
.manual-tocitem:hover{color:var(--azul);background:var(--azul-claro);border-radius:6px}
.manual h2{color:#7c3aed;font-size:19px;margin:22px 0 10px;padding-top:14px;border-top:3px solid #ede9fe}
.manual h2:first-child{border-top:0;padding-top:0;margin-top:0}
.manual h3{color:var(--azul);font-size:15px;margin:16px 0 6px}
.manual p{margin:8px 0;line-height:1.6}
.manual ul,.manual ol{margin:8px 0 8px 4px;padding-left:22px}
.manual li{margin:5px 0;line-height:1.55}
.manual .callout{border-radius:10px;padding:11px 14px;margin:12px 0;font-size:13px}
.manual .callout.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a5f}
.manual .callout.warn{background:#fff7ed;border:1px solid #fed7aa;color:#7c3a12}

/* ── Formularios de registro como modales ─────────────────────────────
   El motor en app.js oculta la tarjeta de registro y pone un botón que la
   despliega centrada con fondo oscuro. No cambia el HTML de los módulos. */
.modal-trigger{margin:2px 0 4px}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,34,71,.46);backdrop-filter:blur(2px);z-index:900;opacity:0;visibility:hidden;transition:opacity .16s ease}
.modal-backdrop.abierto{opacity:1;visibility:visible}
.card.as-modal{display:none}
.card.as-modal.abierto{
  display:block;position:fixed;z-index:901;top:50%;left:50%;
  transform:translate(-50%,-50%);width:min(680px,94vw);max-height:88vh;
  overflow:auto;padding-top:34px;box-shadow:0 24px 60px rgba(15,34,71,.28);
  animation:modalIn .18s ease}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border:0;
  border-radius:9px;background:var(--azul-claro);color:var(--azul);font-size:16px;
  font-weight:700;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.modal-x:hover{background:#dbe6ff}

/* ── Overlays personalizados (editar meta, vincular dispositivo, etc.) ──
   Antes esta clase solo tenía estilos si el módulo Emergencias estaba cargado,
   por eso el modal caía al pie de la página. Se define aquí para que SIEMPRE
   aparezca centrado como capa de pantalla completa. */
.emerg-modal-back{position:fixed;inset:0;background:rgba(15,34,71,.5);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;
  animation:modalIn .16s ease}
.emerg-modal-back>.card{max-width:520px;width:100%;max-height:90vh;overflow:auto;
  box-shadow:0 24px 60px rgba(15,34,71,.3)}
.emerg-modal{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:90vh;
  overflow:auto;box-shadow:0 24px 60px rgba(15,34,71,.3);position:relative}

/* ── Botón de tema (claro/oscuro) en la barra superior ───────────────── */
.tema-btn{background:var(--azul-claro);border:0;width:42px;height:42px;border-radius:12px;
  font-size:18px;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none}
.tema-btn:hover{filter:brightness(.97)}
@media(max-width:640px){.tema-btn{width:38px;height:38px;font-size:16px}}

/* ── Captura de foto: dos opciones (cámara / archivo) ─────────────────── */
.foto-dual{display:flex;gap:8px;flex-wrap:wrap}
.foto-btn{flex:1;min-width:150px;cursor:pointer}
.foto-btn input[type="file"]{display:none}
.foto-nombre{font-size:11.5px;color:var(--gris-2);margin-top:6px}

/* ═════════════════════════════════════════════════════════════════════
   MODO OSCURO  ·  Cobertura total y garantizada
   Técnica: cuando el usuario activa el tema oscuro (data-tema="dark" en
   <html>), se invierte la luminancia de toda la app con un filtro y se
   rota el tono 180° para conservar los colores de marca (el azul sigue
   azul). Así NINGUNA pantalla queda "a medias", incluso con estilos en
   línea. Luego se "contra-invierten" los elementos que ya son oscuros o
   que deben conservar su color real (barra lateral, portada de acceso,
   Análisis Integral, fotos, logos, avatares, botón principal y avisos).
   El MODO CLARO no se toca en absoluto: sin el atributo, todo queda igual.
   ═════════════════════════════════════════════════════════════════════ */
/* El filtro se aplica al ELEMENTO RAÍZ (html), no al body. Así se cubre toda
   la app igual que antes, pero los modales con position:fixed siguen anclados
   al viewport (si el filtro va en body, el body pasa a ser su bloque contenedor
   y el modal se desplaza hacia abajo en pantallas/tablets con página larga). */
:root[data-tema="dark"]{
  filter:invert(1) hue-rotate(180deg);
}
/* Contra-inversión: vuelven a su apariencia real (se aplican el mismo
   filtro que la raíz, cancelándolo para su subárbol). */
:root[data-tema="dark"] .side,
:root[data-tema="dark"] .auth__hero,
:root[data-tema="dark"] #ai-root,
:root[data-tema="dark"] .toast,
:root[data-tema="dark"] .pac-activo,
:root[data-tema="dark"] .usuario .ava,
:root[data-tema="dark"] .pac .ava,
:root[data-tema="dark"] .pac-ava,
:root[data-tema="dark"] .hc-avatar .ava,
:root[data-tema="dark"] .main img,
:root[data-tema="dark"] .contenido img,
:root[data-tema="dark"] .modal-backdrop img,
:root[data-tema="dark"] .emerg-modal-back img,
:root[data-tema="dark"] .card.as-modal img,
:root[data-tema="dark"] .main .btn:not(.btn--sec):not(.btn--ghost),
:root[data-tema="dark"] .contenido .btn:not(.btn--sec):not(.btn--ghost),
:root[data-tema="dark"] .modal-backdrop .btn:not(.btn--sec):not(.btn--ghost),
:root[data-tema="dark"] .emerg-modal-back .btn:not(.btn--sec):not(.btn--ghost),
:root[data-tema="dark"] .card.as-modal .btn:not(.btn--sec):not(.btn--ghost),
/* QR: debe quedar negro-sobre-blanco real para que se pueda escanear */
:root[data-tema="dark"] #cs_qr,
/* iframes (p. ej. la vista previa del PDF del paciente) se ven como documento normal */
:root[data-tema="dark"] .main iframe,
:root[data-tema="dark"] .contenido iframe,
:root[data-tema="dark"] .modal-backdrop iframe,
:root[data-tema="dark"] .emerg-modal-back iframe,
:root[data-tema="dark"] .card.as-modal iframe{
  filter:invert(1) hue-rotate(180deg);
}
/* La barra lateral ya trae su propio logo/avatar en su subárbol
   contra-invertido, así que no se les aplica un filtro extra. */
:root[data-tema="dark"] .side img,
:root[data-tema="dark"] .side .ava,
:root[data-tema="dark"] .side__logo .mark,
:root[data-tema="dark"] #ai-root img,
:root[data-tema="dark"] .auth__hero img,
:root[data-tema="dark"] .auth__hero .mark{
  filter:none;
}