/* Estilos de la app. Valores tomados de los dibujos aprobados (diseno/R10-encabezado); colores de noche de APARIENCIA.md. */
@font-face{font-family:'Satoshi';src:url('/fuentes/Satoshi-Variable.woff2') format('woff2');font-weight:300 900;font-display:swap}

:root{
  --bg:#f2f4f7; --sup:#fff; --tx:#101a2b; --tx2:#4d5a6d; --tono:#e8ecf2; --alt:#f6f8fb;
  --pri:#334e68; --pri-tx:#fff; --linea:#74808f; --rojo:#b91c1c; --insignia:#be123c; --error:#be123c;
  --ret-bg:#fef3c7; --ret-tx:#854d0e; --alerta-bg:#f8dbe2; --alerta-tx:#7f0f2a; --sombra:rgba(16,26,43,.18);
  --toast-bg:#101a2b; --toast-tx:#fff; --toast-a:rgba(255,255,255,.14); --rol-bg:#101a2b; --rol-tx:#fff;
  --chip-p:16%; --chip-t:55%; --chip-base:#000;
  --est-consulta:#0f766e; --est-dilatacion:#6d28d9; --est-estudios:#0369a1;
  --est-consulta-bg:#d8eeea; --est-consulta-tx:#0b5d56; --est-dilatacion-bg:#ede9fe; --est-dilatacion-tx:#4c1d95; --est-estudios-bg:#e0f2fe; --est-estudios-tx:#0c4a6e;
  --fin-tx:#4d5a6d; --sep:#e8ecf2;
  color-scheme:light;
}
:root[data-tema="noche"]{
  --bg:#0d1420; --sup:#172131; --tx:#eef2f7; --tx2:#a7b2c2; --tono:#243045; --alt:#1b2638;
  --pri:#8fb3d9; --pri-tx:#0d1420; --linea:#6c7a8e; --rojo:#fb7185; --insignia:#e11d48; --error:#fb7185;
  --ret-bg:#3a2f10; --ret-tx:#fcd34d; --alerta-bg:#3b1520; --alerta-tx:#fda4af; --sombra:rgba(0,0,0,.5);
  --toast-bg:#eef2f7; --toast-tx:#0d1420; --toast-a:rgba(13,20,32,.12); --rol-bg:#eef2f7; --rol-tx:#0d1420;
  --chip-p:24%; --chip-t:45%; --chip-base:#fff;
  --est-consulta-bg:color-mix(in srgb,var(--est-consulta) 24%,var(--sup)); --est-consulta-tx:color-mix(in srgb,var(--est-consulta) 45%,#eef2f7);
  --est-dilatacion-bg:color-mix(in srgb,var(--est-dilatacion) 24%,var(--sup)); --est-dilatacion-tx:color-mix(in srgb,var(--est-dilatacion) 45%,#eef2f7);
  --est-estudios-bg:color-mix(in srgb,var(--est-estudios) 24%,var(--sup)); --est-estudios-tx:color-mix(in srgb,var(--est-estudios) 45%,#eef2f7);
  --fin-tx:#a7b2c2; --sep:#243045;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);font-family:'Satoshi',-apple-system,'SF Pro Text',system-ui,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;font-size:15px}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--pri)}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pg{max-width:1440px;margin:0 auto;padding:32px;display:flex;flex-direction:column;gap:20px;min-height:100vh}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.hd-izq{display:flex;align-items:center}
.logo{height:28px;width:auto;display:block}
.nav{display:flex;gap:4px;margin-left:40px}
.nv{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-size:15px;color:var(--tx);font-weight:500;white-space:nowrap;text-decoration:none}
.nv[aria-current="page"]{background:var(--pri);color:var(--pri-tx);font-weight:600}
.hd-der{display:flex;align-items:center;gap:12px}
.pos{position:relative;display:inline-flex;flex:none}
.ib{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--tono);color:var(--tx);flex:none}
.ib.t{background:transparent;width:36px;height:36px}
.ib[disabled]{opacity:.4;cursor:default}
.badge[hidden]{display:none}
.badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--insignia);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--pri);color:var(--pri-tx);font-size:14px;font-weight:600}
.av.g{width:44px;height:44px;font-size:15px}
.h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0}
.sub{font-size:15px;color:var(--tx2);margin-top:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;font-size:15px;font-weight:600;white-space:nowrap;flex:none;background:var(--pri);color:var(--pri-tx)}
.btn.sec{background:var(--tono);color:var(--tx)}
.btn.s{height:36px;padding:0 16px}
.btn.peligro{background:var(--rojo);color:#fff}
.btn[disabled]{opacity:.5;cursor:default}
.card{background:var(--sup);border-radius:20px}
.pop{position:absolute;z-index:20;background:var(--sup);border-radius:16px;box-shadow:0 12px 40px var(--sombra);padding:8px}
.pop.der{right:0;top:calc(100% + 8px)}

/* Acceso */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.acceso-card{width:420px;max-width:100%;background:var(--sup);border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:20px}
.acceso-marca{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.acceso-marca .logo{height:44px;margin-bottom:2px}
.acceso-marca .t{font-size:24px;font-weight:700;letter-spacing:-.02em}
.acceso-marca .s{font-size:15px;color:var(--tx2)}
.lbl{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.fi{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:10px;background:var(--tono);box-shadow:inset 0 0 0 1px var(--linea);font-size:15px}
.fi:focus-within{box-shadow:inset 0 0 0 1px var(--linea),0 0 0 2px var(--sup),0 0 0 4px var(--pri)}
.fi.er{box-shadow:inset 0 0 0 1.5px var(--error)}
.fi input{flex:1;min-width:0;border:0;background:transparent;outline:none;height:100%;padding:0}
.fi .ib{width:32px;height:32px;background:transparent;color:var(--tx2)}
.al{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--alerta-bg);color:var(--alerta-tx);font-size:14px}
.al svg{flex:none;margin-top:1px}
.erm{font-size:13px;font-weight:600;color:var(--error);margin-top:6px}
.nota{font-size:13px;color:var(--tx2);line-height:1.5}
.centro{text-align:center}
.btn.g{height:48px;width:100%}
.campos{display:flex;flex-direction:column;gap:20px}

/* Menú de usuario */
.menu-usuario{width:300px;padding:12px}
.mu-cab{display:flex;gap:12px;align-items:center;padding:8px 12px 14px}
.mu-nombre{font-size:15px;font-weight:700}
.mu-correo{font-size:13px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis}
.mu-cuerpo{padding:0 12px 10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rolp{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--tono);font-size:13px;font-weight:600}
.mrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:15px;color:var(--tx);width:100%;border:0;background:transparent;text-align:left}
.mrow:hover:not([disabled]){background:var(--alt)}
.mrow[disabled]{opacity:.5;cursor:default}
.mrow.rojo{color:var(--error)}
.mrow.largo{height:auto;align-items:flex-start;font-size:14px;line-height:1.4}
.mrow.largo svg{margin-top:2px}
.sepl{height:1px;background:var(--sep);margin:8px 4px}
.fichas{display:flex;gap:6px;flex-wrap:wrap}

/* Médicos: color propio (--c) puesto por script */
.chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 4px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--c) var(--chip-p),var(--sup));color:color-mix(in srgb,var(--c) var(--chip-t),var(--chip-base))}
.ini{border-radius:50%;color:#fff;background:var(--c);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;font-size:9.5px}
.ini.m{width:28px;height:28px;font-size:11px}
.ini.g{width:32px;height:32px;font-size:12px}

.vacio{padding:56px 24px;text-align:center;color:var(--tx2)}
.mu-datos{min-width:0}

/* Tablero: pestañas, filtro, tabla de visitas, estados */
.barra{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:0;border-radius:999px;font-size:15px;background:var(--tono);color:var(--tx);font-weight:500;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--pri);color:var(--pri-tx);font-weight:600}
.tab.z{color:var(--tx2)}
.tab[aria-selected="true"].z{color:var(--pri-tx)}
.tab .n{margin-left:8px;font-size:13px;opacity:.8}
.flt{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 14px;border:0;border-radius:999px;background:var(--sup);box-shadow:inset 0 0 0 1px var(--linea);font-size:14px;white-space:nowrap}
.flt span{color:var(--tx2)}.flt b{font-weight:600}
.tabla{padding:8px 0;overflow:visible}
.th,.tr{display:grid;gap:16px;align-items:center;padding:0 24px}
.th{padding-top:12px;padding-bottom:12px;font-size:13px;font-weight:600;color:var(--tx2)}
.tr{padding-top:10px;padding-bottom:10px;min-height:64px}
.tr:nth-of-type(even){background:var(--alt)}
.g-rec{grid-template-columns:minmax(0,1fr) 240px 130px 240px 150px 44px}
.g-asi{grid-template-columns:minmax(0,1fr) 200px 110px 210px 120px 100px 170px 44px}
.g-med{grid-template-columns:minmax(0,1fr) 200px 110px 210px 120px 100px}
.g-fin{grid-template-columns:minmax(0,1fr) 200px 110px 210px 120px 100px 170px}
.nm{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.nm{color:inherit;text-decoration:none}a.nm:hover{text-decoration:underline}
.mut{color:var(--tx2)}
.t14{font-size:14px}.t15{font-size:15px}.t13{font-size:13px}
.min{font-size:15px;font-weight:600}
.alder{display:flex;justify-content:flex-end}
.est{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 8px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;background:var(--tono);color:var(--tx)}
.est.consulta{background:var(--est-consulta-bg);color:var(--est-consulta-tx)}
.est.dilatacion{background:var(--est-dilatacion-bg);color:var(--est-dilatacion-tx)}
.est.estudios{background:var(--est-estudios-bg);color:var(--est-estudios-tx)}
.est.fin{color:var(--fin-tx)}
.est.retiro,.est.sin_salida{background:var(--ret-bg);color:var(--ret-tx)}
.late{display:inline-flex;align-items:center;gap:6px;color:var(--rojo);font-weight:700}
.foot{display:flex;gap:32px;padding:14px 24px 8px;font-size:14px;color:var(--tx2);justify-content:space-between;align-items:center;flex-wrap:wrap}
.foot b{color:var(--tx);font-weight:600;margin-left:6px}
.foot .cifras{display:flex;gap:32px;flex-wrap:wrap}
.foot .leyenda{display:inline-flex;align-items:center;gap:6px}
.foot .leyenda svg{color:var(--rojo)}
.emp{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:36px 24px}
.emp .c{display:inline-flex;width:56px;height:56px;border-radius:50%;background:var(--tono);align-items:center;justify-content:center;color:var(--pri);margin-bottom:4px}
.emp .ttl{font-size:17px;font-weight:700}
.emp p{margin:0;font-size:15px;color:var(--tx2)}
.ttl{font-size:17px;font-weight:700}
.btn.s[disabled]{opacity:.45}

/* Formulario de llegada */
.reg{padding:24px 28px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:3}
.reg-fila{display:flex;gap:16px;align-items:flex-start}
.reg-nombre{flex:1;min-width:0;position:relative}
.reg-medico{width:330px;position:relative;flex:none}
.reg-boton{padding-top:25px}
.fi svg{color:var(--tx2)}
.fi.sel{width:100%;justify-content:space-between;text-align:left;border:0;cursor:pointer}
.fi.sel .quien{display:flex;align-items:center;gap:10px}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--sup);color:var(--tx2);font-size:12px;font-weight:600;margin-left:4px}
.btn .kbd{background:rgba(127,127,127,.3);color:inherit}
.lista-sel{left:0;right:0;top:76px}
.pr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 14px;border-radius:10px;min-height:46px;width:100%;border:0;background:transparent;text-align:left;font-size:15px;font-weight:500}
.pr[aria-selected="true"]{background:var(--alt);font-weight:600}
.pr:hover,.pr.act{background:var(--alt)}
.pr .quien{display:flex;align-items:center;gap:10px}
.pr .kbd{background:var(--tono)}
.parecidos{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.parecidos .tit{font-size:13px;color:var(--tx2);margin-bottom:2px}
.parecido{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;border:0;background:var(--tono);font-size:14px;text-align:left}
.parecido:hover{background:var(--alt);box-shadow:inset 0 0 0 1px var(--linea)}
.parecido .u{color:var(--tx2)}
.elegido{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--tx2)}
.elegido button{border:0;background:transparent;color:var(--pri);font-weight:600;font-size:13px;padding:0}

/* Aviso oscuro y avisos de sistema */
#avisos{position:fixed;left:0;right:0;bottom:24px;display:flex;justify-content:center;z-index:50;pointer-events:none}
.toast{pointer-events:auto;display:inline-flex;align-items:center;gap:16px;background:var(--toast-bg);color:var(--toast-tx);border-radius:14px;padding:12px 12px 12px 18px;font-size:15px;box-shadow:0 12px 40px var(--sombra)}
.toast .a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--toast-a);color:inherit;font-weight:600;font-size:14px}
.menu-fila{width:220px;right:0;top:100%}

/* Campanita */
.panel-avisos{width:420px;padding:0;overflow:hidden;border-radius:20px}
.n-cab{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.n-cab b{font-size:17px}
.enlace{border:0;background:transparent;font-size:14px;font-weight:600;color:var(--pri);padding:0}
.enlace[disabled]{opacity:.5;cursor:default}
.n-lista{max-height:420px;overflow:auto}
.nrow{display:flex;gap:10px;padding:14px 20px;width:100%;border:0;background:transparent;text-align:left;align-items:flex-start}
.nrow.u,.nrow:hover{background:var(--alt)}
.punto{width:9px;height:9px;border-radius:50%;background:var(--insignia);flex:none;margin-top:6px}
.punto.off{background:transparent}
.nic{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--tono);align-items:center;justify-content:center;flex:none;color:var(--pri)}
.ntx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nt{font-size:14px;line-height:1.4;font-weight:400}
.nt.b{font-weight:600}
.nd{font-size:13px;color:var(--tx2)}
.nh{font-size:12px;color:var(--tx2);white-space:nowrap}

/* Usuarios */
.enc-u{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.g-usr{grid-template-columns:minmax(0,1.3fr) 150px minmax(0,1.5fr) 150px 170px 44px}
.quien-u{display:flex;align-items:center;gap:12px;min-width:0}
.nom-u{min-width:0}
.nom-u .correo{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av2{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;background:var(--c,var(--pri))}
:root[data-tema="noche"] .av2:not([data-c^="#"]){color:var(--pri-tx)}
.tr.gone>div{opacity:.55}
.tr.gone>div.c-m{opacity:1}
.cst{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 8px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.cst.ok{background:var(--est-consulta-bg);color:var(--est-consulta-tx)}
.cst.wt{background:var(--tono);color:var(--tx2)}
.cst.of{background:transparent;color:var(--tx2);padding:0}
.menu-usr{width:270px}
.rojo{color:var(--error)}

/* Cuadros de diálogo */
.fondo-dlg{position:fixed;inset:0;z-index:60;background:rgba(10,16,26,.55);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;overflow:auto}
.dlg{width:420px;max-width:100%;background:var(--sup);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 12px 40px var(--sombra)}
.dlg h3{margin:0;font-size:20px;letter-spacing:-.01em}
.bt{display:flex;justify-content:flex-end;gap:10px}
.btn.dng{background:var(--insignia);color:#fff}
.rl{display:flex;gap:8px;flex-wrap:wrap}
.rl .tab{height:40px}
.tab[aria-checked="true"]{background:var(--pri);color:var(--pri-tx);font-weight:600}
.sw{display:flex;gap:10px;flex-wrap:wrap}
.pt-color{width:32px;height:32px;border-radius:50%;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--c)}
.pt-color.on{box-shadow:0 0 0 2px var(--sup),0 0 0 4px var(--tx)}
.dp{display:grid;grid-template-columns:1fr;gap:8px}
.op{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 5px;border:0;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;background:var(--tono);color:var(--tx);width:100%;min-width:0;text-align:left}
.op .op-n{flex:1;overflow:hidden;text-overflow:ellipsis}
.op.on{background:color-mix(in srgb,var(--d) 16%,var(--sup));color:color-mix(in srgb,var(--d) 72%,var(--tx));box-shadow:inset 0 0 0 2px var(--d)}
.op.on .ini{background:var(--d)}
.interl{line-height:1.5}
.mt8{margin-top:8px}
.ini-izq{align-self:flex-start}
.btn.sec svg{flex:none}

body.sin-conexion .btn.s{opacity:.45}
.saltar{position:absolute;left:16px;top:-60px;z-index:100;background:var(--pri);color:var(--pri-tx);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.saltar:focus{top:12px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.pg-int{display:flex;flex-direction:column;gap:20px}
.tablero{display:flex;flex-direction:column;gap:16px}
.titulo{display:flex;align-items:center;gap:14px}
.titulo .hora{color:var(--tx2);font-weight:500;margin-left:14px}
.flechas{display:flex;gap:8px}

/* Detalle de la visita */
.migas{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tx2)}
.migas a{color:inherit;text-decoration:none}.migas a:hover{text-decoration:underline}
.migas .actual{color:var(--tx);font-weight:600}
.cab{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.cab-t{display:flex;align-items:center;gap:12px}
.cab-s{display:flex;align-items:center;gap:12px;margin-top:10px}
.cab-a{display:flex;gap:10px;align-items:center}
.ib.g44{width:44px;height:44px}
.est .pt{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.dos{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px}
.pad{padding:22px 24px}
.mb{margin-bottom:6px}
.b{font-weight:600}
.pasos{display:flex;flex-direction:column;gap:10px}
.paso{display:grid;grid-template-columns:110px 28px minmax(0,1fr) 270px;gap:16px;align-items:center;padding:12px 20px;border-radius:14px;background:var(--sup);min-height:60px}
.paso:nth-child(odd){background:var(--alt)}
.paso.anulado{opacity:.6}.paso.anulado .b{text-decoration:line-through}
.pico{width:28px;height:28px;border-radius:50%;background:var(--tono);color:var(--pri);display:flex;align-items:center;justify-content:center;flex:none}
.pico.consulta{background:var(--est-consulta);color:#fff}.pico.dilatacion{background:var(--est-dilatacion);color:#fff}.pico.estudios{background:var(--est-estudios);color:#fff}
.pder{text-align:right;color:var(--tx2)}
.pder.act{font-weight:600;color:var(--tx)}
.pder.consulta{color:var(--est-consulta-tx)}.pder.dilatacion{color:var(--est-dilatacion-tx)}.pder.estudios{color:var(--est-estudios-tx)}
.tfila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0}
.tfila.total{margin-top:6px}
.tval{display:flex;gap:8px;align-items:baseline}
.ant{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0}
.ant .fch{width:70px}
.ant .t14{margin-left:auto}
.vacio0{margin:8px 0 0}