/* El visor externo: lo usa el personal de una clinica en convenio, en un
   computador. Sobrio, una tabla clara y botones evidentes. */
:root{color-scheme:light;--tinta:#152233;--suave:#5b6b7c;--linea:#d9e1ea;--fondo:#f3f6f9;--tarjeta:#fff;
  --azul:#0b4f9c;--azul-oscuro:#083b74;--verde:#177245;--verde-fondo:#e6f4ec;--ambar:#9a6700;--ambar-fondo:#fdf3dc;--rojo:#b42318}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--fondo);color:var(--tinta);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--linea)}
.marca{font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.punto{width:10px;height:10px;border-radius:50%;background:var(--azul);display:inline-block}
.cabecera-derecha{display:flex;align-items:center;gap:12px;min-width:0}
.clinica{font-weight:600;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contenido{max-width:1180px;margin:0 auto;padding:22px 16px 48px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;padding:22px 20px;box-shadow:0 2px 10px #0000000d}
.tarjeta.ingreso{max-width:440px;margin:40px auto}
.tarjeta.sin-relleno{padding:0;overflow:hidden}
h1{font-size:1.35rem;margin:0 0 6px}
.ayuda{color:var(--suave);margin:0 0 8px}
label{display:block;font-size:.85rem;font-weight:600;margin:14px 0 6px;color:var(--suave)}
input{width:100%;font:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta)}
input:focus{outline:3px solid #0b4f9c33;border-color:var(--azul)}
button,.boton{font:inherit;cursor:pointer;border-radius:9px;text-decoration:none;display:inline-block;text-align:center}
.principal{width:100%;padding:13px;border:0;background:var(--azul);color:#fff;font-weight:700;font-size:1rem;margin-top:16px}
.principal:hover{background:var(--azul-oscuro)}
.principal:disabled{opacity:.6;cursor:wait}
.principal.chico{width:auto;margin:0;padding:10px 18px}
.boton{padding:6px 12px;border:1px solid var(--azul);color:var(--azul);background:#fff;font-weight:600;font-size:.88rem;white-space:nowrap}
.boton:hover{background:#eef4fb}
.boton.lleno{background:var(--azul);color:#fff}
.boton.lleno:hover{background:var(--azul-oscuro)}
.enlace{background:none;border:0;color:var(--azul);font-weight:600;padding:6px 4px}
.error{margin:14px 0;padding:12px 14px;border-radius:10px;background:#fdecec;color:var(--rojo);font-weight:600}
.nota{font-size:.82rem;color:var(--suave);margin:16px 0 0}
.barra{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.barra h1{margin:0}
.buscar{display:flex;gap:8px;flex:1;max-width:560px;min-width:240px}
.tabla-scroll{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{text-align:left;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--suave);background:#f7f9fb;padding:10px 12px;border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid #edf2f6;vertical-align:top}
tr:last-child td{border-bottom:0}
.sub{color:var(--suave);font-size:.82rem}
.chip{display:inline-block;padding:2px 9px;border-radius:12px;font-size:.78rem;font-weight:600;white-space:nowrap;background:#eef2f5;color:var(--suave)}
.chip.verde{background:var(--verde-fondo);color:var(--verde)}
.chip.ambar{background:var(--ambar-fondo);color:var(--ambar)}
.acciones{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.vacio{padding:26px;text-align:center;color:var(--suave)}
@media (max-width:640px){
  th:nth-child(4),td:nth-child(4){display:none}
  .acciones{justify-content:flex-start}
}