/* SkyHealthWeb · piel del prototipo SH4 v3 "réplica" (Prototipos/SH4/v3-replica).
   Objetivo: 90% igual al SH4 WinForms (mismo layout, mismas imágenes, mismos textos) pero modernizado:
   esquinas suaves, sombras leves, estados de hover/foco claros y movimiento discreto. */
:root {
    --azul: #377AFF;          /* Color.FromArgb(55, 122, 255): btnEntrar / btnAplicar del WinForms */
    --azul-osc: #1F63E8;
    --azul-suave: #EAF1FF;
    --fondo: #F3F3F3;         /* fondo de los Form de WinForms */
    --superficie: #FFFFFF;
    --texto: #111;
    --texto-2: #4A4A4A;
    --texto-3: #8C8C8C;
    --linea: #E3E3E3;
    --borde-campo: #C9C9C9;
    --gris-oscuro: #505050;   /* pnlSeparador / panel2: FromArgb(80, 80, 80) */
    --verde: #1E9E4A;
    --whatsapp: #25D366;
    --est-triaje: #D93025;   --est-triaje-bg: #FDE8E6;
    --est-espera: #9A6700;   --est-espera-bg: #FFF4D6;
    --est-consulta: #1F63E8; --est-consulta-bg: #EAF1FF;
    --est-ok: #1E7F3D;       --est-ok-bg: #E4F5EA;
    --est-anulado: #6B6B6B;  --est-anulado-bg: #EEEEEE;
    --error: #B42318;        --error-bg: #FDECEA;
    --radio: 12px;
    --radio-chico: 8px;
    --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .05);
    --sombra-alta: 0 6px 20px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
    --fuente: "Segoe UI", "Segoe UI Variable Text", "Open Sans", Roboto, system-ui, sans-serif;
    /* Tonos de apoyo (18/10/2026, tema oscuro): en claro son los mismos hex que antes estaban fijos. */
    --gris-suave: #F4F4F4;    /* fondos de cabecera de tabla, chips, deshabilitados */
    --linea-suave: #EFEFEF;   /* separadores de fila */
    --azul-borde: #C8DAFF;
    --azul-hover: #F6F9FF;
    --aviso-bg: #FFFBEA;     --aviso-borde: #F3E3A6;  --aviso-linea: #EAD58E;
    --aviso-texto: #7A5200;  --aviso-titulo: #5E3F00;
    --est-ok-borde: #BFE3CB; --est-triaje-borde: #F5C2BD;
    --lab-pendiente: #FFC7CE;
    --velo: rgba(0, 0, 0, .35);
    color-scheme: light;
}

/* Tema oscuro: mismos colores de marca, cambian fondos, textos y bordes.
   "Automático" sigue al sistema; data-tema="claro|oscuro" lo fija el usuario (skyhealth.js, localStorage). */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --azul: #4C8DFF; --azul-osc: #7AA9FF; --azul-suave: #1A2638;
        --fondo: #0F1218; --superficie: #171B23;
        --texto: #E8EAED; --texto-2: #B5BAC3; --texto-3: #7D8590;
        --linea: #2A303A; --borde-campo: #3A414D; --gris-oscuro: #2A303B;
        --est-triaje: #FF7B72;   --est-triaje-bg: #3A1D1C;
        --est-espera: #E3B341;   --est-espera-bg: #352A12;
        --est-consulta: #7AA9FF; --est-consulta-bg: #1A2638;
        --est-ok: #56D364;       --est-ok-bg: #12301D;
        --est-anulado: #9AA0A6;  --est-anulado-bg: #23272E;
        --error: #FF7B72;        --error-bg: #3A1D1C;
        --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
        --sombra-alta: 0 6px 20px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
        --gris-suave: #1E232C; --linea-suave: #22272F; --azul-borde: #2B4A7A; --azul-hover: #1B2433;
        --aviso-bg: #221E12; --aviso-borde: #3D3519; --aviso-linea: #4A3F1D; --aviso-texto: #E3C887; --aviso-titulo: #F0D9A0;
        --est-ok-borde: #24563A; --est-triaje-borde: #5C2B28; --lab-pendiente: #5C2B30;
        --velo: rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}
:root[data-tema="oscuro"] {
    --azul: #4C8DFF; --azul-osc: #7AA9FF; --azul-suave: #1A2638;
    --fondo: #0F1218; --superficie: #171B23;
    --texto: #E8EAED; --texto-2: #B5BAC3; --texto-3: #7D8590;
    --linea: #2A303A; --borde-campo: #3A414D; --gris-oscuro: #2A303B;
    --est-triaje: #FF7B72;   --est-triaje-bg: #3A1D1C;
    --est-espera: #E3B341;   --est-espera-bg: #352A12;
    --est-consulta: #7AA9FF; --est-consulta-bg: #1A2638;
    --est-ok: #56D364;       --est-ok-bg: #12301D;
    --est-anulado: #9AA0A6;  --est-anulado-bg: #23272E;
    --error: #FF7B72;        --error-bg: #3A1D1C;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --sombra-alta: 0 6px 20px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
    --gris-suave: #1E232C; --linea-suave: #22272F; --azul-borde: #2B4A7A; --azul-hover: #1B2433;
    --aviso-bg: #221E12; --aviso-borde: #3D3519; --aviso-linea: #4A3F1D; --aviso-texto: #E3C887; --aviso-titulo: #F0D9A0;
    --est-ok-borde: #24563A; --est-triaje-borde: #5C2B28; --lab-pendiente: #5C2B30;
    --velo: rgba(0, 0, 0, .6);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--fuente); font-size: 14px; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
h1, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; }
.glifo { flex-shrink: 0; display: block; }
.crece { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fuerte { font-weight: 700; }
.apagado { color: var(--texto-3); font-size: 12.5px; }
.mono { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 12.5px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vacio { padding: 32px 12px; text-align: center; color: var(--texto-3); }
.caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.separador { height: 2px; background: var(--gris-oscuro); border-radius: 2px; opacity: .85; }
.titulo-bloque { font-size: 14px; font-weight: 700; margin-bottom: 6px; }

/* Botones */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 14px;
    background: var(--superficie); border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); color: var(--texto);
    font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.btn:active { transform: scale(.98); }
.btn:disabled { color: var(--texto-3); background: var(--gris-suave); border-color: var(--linea); box-shadow: none; cursor: default; transform: none; }
.btn:disabled img { opacity: .45; filter: grayscale(1); }
.btn img { width: 24px; height: 24px; }
.btn-azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-osc); border-color: var(--azul-osc); }
.btn-verde, .btn-verde:disabled { background: var(--est-ok-bg); border-color: transparent; color: var(--est-ok); }
.btn-peligro { color: var(--error); }
.btn-peligro:hover { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-bg); }
.btn-bloque { width: 100%; }
.btn-grande { min-height: 44px; font-size: 15px; }
.btn-chico { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
.btn-lateral { width: 100%; min-height: 44px; font-size: 14px; position: relative; }
.btn-lateral img { position: absolute; left: 14px; }
.btn-ico { background: transparent; border: 0; padding: 4px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.btn-ico:hover { background: var(--gris-suave); }
.btn-ico img { width: 18px; height: 18px; }
.btn-ico-claro:hover { background: rgba(255, 255, 255, .15); }
.enlace { background: none; border: 0; color: var(--texto-2); text-decoration: underline; cursor: pointer; margin-top: 12px; font-size: 13px; }
.enlace:hover { color: var(--azul-osc); }

/* Campos */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.campo-etq { font-size: 12.5px; font-weight: 700; }
.campo-etq-fila { display: flex; justify-content: space-between; align-items: center; }
.campo-etq-suave { font-size: 12.5px; color: var(--texto-2); }
.campo input, .campo select, .campo textarea, .siteds input {
    width: 100%; border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); background: var(--superficie);
    padding: 7px 10px; min-height: 36px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus, .siteds input:focus, .buscador:focus-within {
    border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave);
}
.campo-compacto { margin-bottom: 8px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--azul); }

.aviso { padding: 9px 12px; border-radius: var(--radio-chico); font-size: 13px; margin-bottom: 12px; }
.aviso-error { background: var(--error-bg); color: var(--error); }
.aviso-ok { background: var(--est-ok-bg); color: var(--est-ok); }
.aviso-info { background: var(--azul-suave); color: var(--azul-osc); }
.aviso-vence { background: var(--est-espera-bg); color: var(--est-espera); font-weight: 600; }
.vence-pronto { color: var(--est-espera); }
/* Vigencia del acceso (24/10/2026): chip en la tarjeta de usuario y franja en todas las pantallas desde 7 días antes. */
.vigencia-chip { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--est-ok-bg); color: var(--est-ok); }
.vigencia-chip.vigencia-pronto { background: var(--est-espera-bg); color: var(--est-espera); }
.vigencia-chip.vigencia-hoy, .vigencia-chip.vigencia-vencido { background: var(--error-bg); color: var(--error); }
.aviso-vigencia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: var(--est-espera-bg); color: var(--est-espera); font-size: 13px; font-weight: 600; }
.aviso-vigencia-hoy { background: var(--error-bg); color: var(--error); }
.aviso-vigencia-enlace { color: inherit; text-decoration: underline; font-weight: 700; }
.aviso-vigencia-cerrar { margin-left: auto; border: 0; background: none; color: inherit; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; }
.aviso-vigencia-cerrar:focus-visible { outline: 2px solid currentColor; }

/* Login: la ventana vertical de IniciarSesionPage, centrada */
.login-fondo {
    min-height: var(--vh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px;
    background: radial-gradient(900px 500px at 50% 0%, var(--azul-suave) 0%, var(--fondo) 70%);
}
.login-ventana {
    width: min(320px, 100%); background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-alta);
    padding: 34px 28px 26px; display: flex; flex-direction: column; animation: aparece .4s ease-out both;
}
.login-logo { width: 150px; height: 150px; align-self: center; }
.login-nombre { text-align: center; font-size: 24px; font-weight: 700; margin-top: 10px; }
.login-version { align-self: flex-end; margin: -2px 34px 0 0; font-size: 10px; font-weight: 300; color: var(--texto-2); }
.login-titulo { text-align: center; font-size: 18px; font-weight: 900; margin: 22px 0 14px; letter-spacing: .02em; }
.login-nota { font-size: 12px; color: var(--texto-3); }
/* Elección de sede (SubMenuSeleccionServicio): una tarjeta por establecimiento + servicio */
.login-nota-sede { text-align: center; color: var(--texto-2); font-size: 13px; margin: 0 0 12px; }
.login-sede { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; margin-bottom: 8px; text-align: left; }
.login-sede:hover { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.login-sede-nombre { font-weight: 700; }
.login-sede-servicio { font-size: 12px; color: var(--texto-3); }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Menú principal: la grilla de MenuPrincipalPage */
.mp {
    display: grid; min-height: var(--vh); padding: 18px 22px 20px; gap: 14px 22px;
    grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "izq nov der" "izq mod mod";
}
.mp-izq { grid-area: izq; display: flex; flex-direction: column; gap: 10px; }
.mp-novedades { grid-area: nov; display: flex; flex-direction: column; min-height: 0; }
.mp-der { grid-area: der; display: flex; flex-direction: column; min-height: 0; }
.mp-modulos { grid-area: mod; }

.mp-marca { display: flex; flex-direction: column; align-items: center; }
.mp-marca img { width: 150px; height: 150px; }
.mp-marca-nombre { font-size: 22px; font-weight: 700; margin-top: 6px; }

.siteds { position: relative; margin: 8px 0 0; padding: 10px 10px 8px; min-width: 0; }
.siteds-etq { position: absolute; top: -9px; left: 10px; padding: 1px 8px; background: var(--gris-oscuro); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; border-radius: 4px; }
.siteds-iconos { position: absolute; top: 4px; right: 6px; display: flex; gap: 2px; }
.siteds .aviso { margin: 14px 0 6px; font-size: 12px; }
.siteds-cuerpo { display: grid; grid-template-columns: 112px 1fr; gap: 6px 8px; margin-top: 14px; }
.captcha { position: relative; height: 76px; background: var(--gris-suave); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
.captcha svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.captcha-txt { position: relative; font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-style: italic; letter-spacing: .1em; color: #3C2F8F; transform: skewX(-12deg) rotate(-4deg); }
.captcha-ok { color: var(--verde); }
.siteds-campos { display: flex; flex-direction: column; gap: 4px; }
.siteds-campos label, .siteds-datos label { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.siteds-campos label span, .siteds-datos label span { text-align: right; }
.siteds input { min-height: 24px; padding: 2px 6px; border-radius: 5px; font-size: 12.5px; }
.siteds input:disabled, .siteds input[readonly] { background: var(--gris-suave); }
.siteds-datos { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.siteds-datos label { grid-template-columns: 52px 1fr; }

.mp-usuario { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.mp-usuario img { width: 60px; height: 60px; border-radius: 50%; }
.mp-usuario > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.novedades {
    flex: 1; min-height: 200px; overflow-y: auto; background: var(--aviso-bg); border: 1px solid var(--aviso-borde); border-radius: var(--radio);
    padding: 16px 20px; color: var(--aviso-texto);
}
.novedad { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--aviso-linea); }
.novedad-titulo { font-weight: 700; font-size: 15px; color: var(--aviso-titulo); margin-bottom: 4px; }
.novedad p, .novedad-contacto { line-height: 1.55; }

.reloj-sh4 { text-align: center; padding-top: 6px; }
.reloj-sh4 .reloj-hora { font-size: clamp(64px, 7.6vw, 108px); font-weight: 700; line-height: 1; color: var(--texto); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.reloj-sh4 .reloj-fecha { font-size: clamp(18px, 1.9vw, 26px); font-weight: 700; color: var(--texto); margin-top: 12px; }
.reloj-chico { text-align: right; margin-left: auto; }
.reloj-chico .reloj-hora { font-size: 26px; font-weight: 700; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.reloj-chico .reloj-fecha { font-size: 12px; color: var(--texto-2); }

.mp-sede-bloque { margin-top: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mp-sede { display: flex; gap: 10px; padding: 10px; width: 100%; }
.mp-sede-campos { flex: 1; min-width: 0; }
.mp-sede-campos .campo-compacto:last-child { margin-bottom: 0; }
.mp-sede select { min-height: 32px; padding: 4px 8px; font-size: 13px; }
.btn-aplicar {
    width: 92px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--azul); color: #fff; font-weight: 700; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: background .15s, transform .1s, opacity .15s;
}
.btn-aplicar img { width: 34px; height: 34px; }
.btn-aplicar:hover { background: var(--azul-osc); }
.btn-aplicar:active { transform: scale(.97); }
.btn-aplicar:disabled { opacity: .45; cursor: default; transform: none; background: var(--azul); }
.btn-soporte { min-width: 130px; min-height: 42px; text-decoration: none; }
.btn-soporte:hover { border-color: var(--whatsapp); box-shadow: 0 0 0 3px var(--est-ok-bg); }

/* Botones de módulo: imagen 128 del WinForms + nombre abajo, en tarjeta suave */
.modulos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.modulo, .sub {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra);
    text-decoration: none; font-weight: 700; text-align: center; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation: aparece .45s ease-out both; animation-delay: var(--retraso, 0ms);
}
.modulo { padding: 14px 8px 12px; aspect-ratio: 1 / 1.05; }
.modulo img { width: 72%; max-width: 116px; height: auto; aspect-ratio: 1; flex: 1; object-fit: contain; min-height: 0; }
.modulo:hover, .sub:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--azul-borde); }
.modulo:active, .sub:active { transform: translateY(-1px) scale(.98); }
.modulo:focus-visible, .sub:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Menú secundario: pnlBarraLateralMenu + 3 filas (panel5/6/7) + barra de conteo en Atención */
.ms { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: var(--vh); gap: 20px; padding: 18px 22px 18px 0; }
.ms-con-barra { grid-template-columns: 300px minmax(0, 1fr) 300px; }
.ms-lateral {
    background: var(--superficie); border-right: 1px solid var(--linea); padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 10px;
    margin: -18px 0 -18px 0; position: sticky; top: 0; height: var(--vh); animation: aparece .35s ease-out both;
}
.ms-titulo { font-size: 30px; font-weight: 700; text-align: center; }
.ms-imagen { width: 132px; height: 132px; align-self: center; }
.ms-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; margin: auto 0 4px; color: var(--texto-2); }
.ms-logo img { width: 30px; height: 30px; }
.ms-filas { display: grid; grid-template-rows: repeat(3, minmax(170px, 1fr)); gap: 14px; min-width: 0; }
.ms-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 170px)); gap: 12px; }
.sub { padding: 14px 10px 14px; }
.sub img { width: 96px; height: 96px; flex: 1; object-fit: contain; max-height: 96px; }
.sub > span:last-child { font-size: 13.5px; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; }

/* Módulos y pantallas que todavía no están en la versión web: se ven (el usuario reconoce su WinForms), pero en gris.
   Toda la tarjeta se apaga, sin franja lateral de color. */
.modulo.inactivo, .sub.inactivo { cursor: default; background: var(--gris-suave); border-color: var(--linea); box-shadow: none; color: var(--texto-3); }
.modulo.inactivo img, .sub.inactivo img { filter: grayscale(1); opacity: .45; }
.modulo.inactivo:hover, .sub.inactivo:hover, .modulo.inactivo:active, .sub.inactivo:active { transform: none; box-shadow: none; border-color: var(--linea); }
.proximamente { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); background: var(--gris-suave); padding: 1px 7px; border-radius: 999px; }
.proximamente.en-trabajo { color: var(--est-espera); background: var(--est-espera-bg); }
.proximamente.en-prueba { color: var(--azul-osc); background: var(--azul-suave); }
.siteds-inactivo { opacity: .6; }
.siteds-inactivo .siteds-proximamente { top: 4px; }
.siteds-inactivo input, .siteds-inactivo button { cursor: not-allowed; }

.ms-conteo { overflow: hidden; display: flex; flex-direction: column; align-self: start; animation: aparece .45s ease-out .1s both; }
.ms-conteo-cab { display: flex; justify-content: space-between; align-items: center; background: var(--gris-oscuro); color: #fff; padding: 8px 10px 8px 14px; font-weight: 700; }
.ms-conteo-pie { font-size: 11.5px; color: var(--texto-3); padding: 8px 12px; }

/* Tablas */
.tabla, .m-tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th, .m-tabla th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--texto-2); padding: 9px 12px; background: var(--gris-suave); border-bottom: 1px solid var(--linea); }
.tabla td, .m-tabla td { padding: 8px 12px; border-bottom: 1px solid var(--linea-suave); }
.tabla-compacta td, .tabla-compacta th { padding: 7px 10px; font-size: 12.5px; }
.m-tabla-envoltura { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.m-tabla-clic { min-width: 760px; }
.m-tabla-clic tbody tr { cursor: pointer; transition: background .12s; }
.m-tabla-clic tbody tr:hover { background: var(--azul-hover); }
.m-tabla-clic tbody tr.sel { background: var(--azul-suave); }
.m-tabla-clic tbody tr:last-child td { border-bottom: 0; }

.estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.estado-triaje { background: var(--est-triaje-bg); color: var(--est-triaje); }
.estado-espera { background: var(--est-espera-bg); color: var(--est-espera); }
.estado-consulta { background: var(--est-consulta-bg); color: var(--est-consulta); }
.estado-ok { background: var(--est-ok-bg); color: var(--est-ok); }
.estado-anulado { background: var(--est-anulado-bg); color: var(--est-anulado); }

/* Pantallas de sub-módulo (reusan la lógica de la v2) */
/* backwards y no both: con "both" la animación deja un transform puesto y los modales (position: fixed) se ubican
   respecto a la pantalla y no a la ventana: salían cortados arriba. */
.pantalla { padding: 18px 26px 32px; max-width: 1400px; animation: aparece .35s ease-out backwards; }
.pantalla-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.pantalla-img { width: 52px; height: 52px; }
.pantalla-modulo { font-size: 12px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.pantalla-titulos h1 { font-size: 26px; font-weight: 700; }
.btn-volver { padding-left: 10px; }
.maqueta { display: flex; align-items: center; gap: 22px; padding: 28px; max-width: 760px; }
.maqueta img { width: 110px; height: 110px; }
.maqueta-titulo { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.maqueta p { color: var(--texto-2); line-height: 1.55; }

.m-seccion { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.m-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.m-campo > span { font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.m-campo input, .m-campo select, .m-campo textarea {
    width: 100%; border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); background: var(--superficie);
    padding: 7px 10px; min-height: 36px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.m-campo input:focus, .m-campo select:focus, .m-campo textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.m-fila { display: flex; gap: 12px; align-items: flex-end; }
.m-fila > * { flex: 1; }
.m-fila > .m-btn { flex: 0 0 auto; margin-bottom: 12px; }
.m-campo-dni { max-width: 200px; }
.m-solo-lectura { min-height: 36px; padding: 7px 0; font-weight: 700; }
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 14px;
    background: var(--superficie); border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
.m-btn:hover { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.m-btn:active { transform: scale(.98); }
.m-btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.m-btn-primario:hover { background: var(--azul-osc); }
.m-btn-peligro { color: var(--error); }
.m-btn-peligro:hover { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-bg); }
.m-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.m-opcion { border: 1px solid var(--borde-campo); background: var(--superficie); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-weight: 600; font-size: 13px; transition: all .15s; }
.m-opcion:hover { border-color: var(--azul); }
.m-opcion.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.m-aviso { padding: 9px 12px; border-radius: var(--radio-chico); font-size: 13px; margin-bottom: 12px; }
.m-aviso-error { background: var(--error-bg); color: var(--error); }
.m-aviso-ok { background: var(--est-ok-bg); color: var(--est-ok); }
.m-aviso-info { background: var(--azul-suave); color: var(--azul-osc); }
.m-vacio { padding: 32px 12px; text-align: center; color: var(--texto-3); }
.m-filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.m-buscador {
    display: flex; align-items: center; gap: 8px; color: var(--texto-3); max-width: 360px; flex: 1; background: var(--superficie);
    border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); padding: 0 10px; min-height: 36px;
}
.m-buscador:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.m-buscador input { border: 0; outline: 0; padding: 0; width: 100%; background: transparent; color: var(--texto); }
.m-barra-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; max-width: 980px; flex-wrap: wrap; }

.form-metro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 24px 8px; max-width: 980px; }
.lista-y-ficha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.ficha-metro { width: 340px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; animation: aparece .3s ease-out both; }
.ficha-metro-cab { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 12px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.ficha-metro-nombre { font-size: 19px; font-weight: 700; line-height: 1.25; }
.ficha-metro dl { display: grid; grid-template-columns: 100px 1fr; gap: 8px 10px; margin: 6px 0 0; width: 100%; }
.ficha-metro dt { color: var(--texto-3); font-size: 12.5px; }
.ficha-metro dd { margin: 0; font-weight: 600; }
.ficha-metro-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ficha-metro .m-aviso { margin: 0; width: 100%; }
.btn-cerrar { background: none; border: 0; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--texto-2); }
.btn-cerrar:hover { background: var(--gris-suave); }

.dos-paneles { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr); gap: 20px; align-items: start; }
.dos-paneles > section { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; }
.m-lista { display: flex; flex-direction: column; gap: 4px; }
.m-lista-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 10px; cursor: pointer; transition: background .12s; }
.m-lista-item:hover { background: var(--azul-hover); }
.m-lista-item.activo { background: var(--azul-suave); border-color: var(--azul-borde); }
.m-lista-item.estatico { cursor: default; border-color: var(--linea); }
.m-lista-item.estatico:hover { background: transparent; }
.m-lista-hora { font-size: 16px; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; width: 50px; }
.turno { width: 36px; height: 36px; border-radius: 50%; background: var(--est-espera-bg); color: var(--est-espera); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }

.vitales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.vital { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--gris-suave); border: 1px solid var(--linea); border-radius: 10px; min-height: 92px; transition: background .15s, border-color .15s; }
.vital-nombre { font-size: 12px; font-weight: 700; color: var(--texto-2); }
.vital-valor { display: flex; align-items: baseline; gap: 6px; color: var(--texto-3); }
.vital-valor input { width: 100%; border: 0; background: transparent; font-size: 26px; font-weight: 700; outline: none; padding: 0; color: var(--texto); font-variant-numeric: tabular-nums; }
.vital-valor input::-webkit-inner-spin-button { display: none; }
.vital-eval { font-size: 12px; font-weight: 600; margin-top: auto; color: var(--texto-3); }
.vital-normal { background: var(--est-ok-bg); border-color: var(--est-ok-borde); } .vital-normal .vital-eval { color: var(--est-ok); }
.vital-alerta { background: var(--est-triaje-bg); border-color: var(--est-triaje-borde); } .vital-alerta .vital-eval { color: var(--est-triaje); }

/* Tablet */


/* Teléfono */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Consultar Persona (ConsultarPersonaPage, 281x425) */
.consultar { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.consultar-ventana { width: min(320px, 100%); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; animation: aparece .35s ease-out both; }
.consultar-registro { width: min(440px, 100%); }
.consultar-titulo { font-weight: 700; font-size: 15px; text-align: center; }
.consultar-doc { width: 100%; max-width: 230px; height: 170px; object-fit: contain; align-self: center; }
.consultar-tipo, .consultar-numero input {
    width: 100%; border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); padding: 7px 10px; background: var(--superficie); outline: none;
}
.consultar-tipo:focus, .consultar-numero input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.consultar-numero { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.consultar-numero > span:first-child { grid-column: 1 / -1; font-size: 13px; font-weight: 600; text-align: center; }
.consultar-numero input { font-size: 22px; font-weight: 700; letter-spacing: .06em; text-align: center; min-height: 46px; }
.consultar-contador { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.consultar-contador.completo { color: var(--est-ok); font-weight: 700; }
.btn-buscar { min-height: 60px; font-size: 15px; }
.btn-buscar img { width: 28px; height: 28px; }
.consultar-ayuda { font-size: 12.5px; color: var(--texto-3); text-align: center; max-width: 520px; }
.consultar-ayuda .enlace { margin: 0; font-size: 12.5px; }
.consultar-fila { display: flex; gap: 10px; }
.consultar-fila > * { flex: 1; }
.solo-lectura { padding: 7px 10px; background: var(--gris-suave); border-radius: var(--radio-chico); font-weight: 600; }

/* Atención Directa (solo HIS) — AtencionRapidaHISPage */
.pantalla-ancha { max-width: none; padding-bottom: 16px; }
.pantalla-ancha .pantalla-cab { margin-bottom: 12px; }
.his { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; height: calc(var(--vh) - 100px); min-height: 560px; }
.his-cab { background: var(--gris-oscuro); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 6px 12px; border-radius: var(--radio) var(--radio) 0 0; }
.his-paciente { display: flex; flex-direction: column; min-height: 0; }
.his-paciente-cuerpo { padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.his-paciente-cuerpo .btn img { width: 20px; height: 20px; }
.his-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.his-dato > span { font-size: 11px; font-weight: 700; color: var(--texto-2); }
.his-dato output, .his-dato input, .his-dato select {
    display: block; width: 100%; min-height: 28px; padding: 4px 8px; font-size: 12.5px; border-radius: 6px; border: 1px solid var(--linea);
    background: var(--gris-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.his-dato input, .his-dato select { background: var(--superficie); border-color: var(--borde-campo); outline: none; }
.his-dato input:focus, .his-dato select:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.his-dato select.invalido { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-bg); }
.his-doc { display: grid; grid-template-columns: 40px 1fr; gap: 6px; }
.his-par { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6px; }
.his-dato input[type=date] { padding: 4px 4px; font-size: 12px; }
.his-linea { height: 1px; background: var(--linea); margin: 4px 0; }
.etario-nino { background: #FFFFFF !important; }
.etario-adolescente { background: #FFF59D !important; }
.etario-joven { background: #FFC8B0 !important; }
.etario-adulto { background: #C8EFC8 !important; }
.etario-mayor { background: #A9C6E3 !important; }

.his-atencion { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.his-grilla-caja { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.his-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px; padding: 10px; min-height: 0; }
.his-grilla-lado { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.his-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.his-barra .btn img { width: 22px; height: 22px; }
.his-barra-nota { font-size: 12px; color: var(--texto-3); margin-left: auto; }
.his-tabla-envoltura { flex: 1; overflow: auto; border: 1px solid var(--linea); border-radius: 10px; min-height: 0; }
.his-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 680px; }
.his-tabla th { position: sticky; top: 0; z-index: 1; background: var(--gris-suave); font-size: 11px; font-weight: 800; color: var(--texto-2); text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linea); }
.his-tabla td { padding: 4px 6px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
/* Celdas con recuadro visible (como la grilla del SH4): se entiende a primera vista dónde se escribe. */
.his-tabla input, .his-tabla select { width: 100%; min-height: 30px; border: 1px solid var(--borde-campo); border-radius: 6px; padding: 3px 6px; background: var(--superficie); outline: none; font-size: 12.5px; }
.his-tabla input:hover, .his-tabla select:hover { border-color: var(--texto-3); }
.his-tabla input:focus, .his-tabla select:focus { border-color: var(--azul); background: var(--superficie); box-shadow: 0 0 0 3px var(--azul-suave); }
.his-tabla .col-n { width: 36px; text-align: center; font-weight: 800; color: var(--texto-2); cursor: grab; user-select: none; }
.his-tabla .col-dx { width: 96px; }
.his-tabla .col-lab { width: 70px; }
.his-tabla .col-lab input { text-align: center; }
.his-tabla .col-cod { width: 76px; }
.his-tabla .col-x { width: 36px; text-align: center; }
.his-tabla .col-desc { position: relative; }
.his-tabla tr.arrastrando { opacity: .45; }
.his-tabla tr.destino td { box-shadow: inset 0 2px 0 var(--azul); }
.lab-pendiente { background: var(--lab-pendiente) !important; }
.btn-quitar { border: 0; background: transparent; color: var(--error); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; }
.btn-quitar:hover { background: var(--error-bg); color: var(--error); }
.sugerencias {
    position: absolute; left: 6px; min-width: min(520px, 90vw); top: calc(100% - 2px); z-index: 5; margin: 0; padding: 4px; list-style: none;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra-alta); max-height: 260px; overflow-y: auto;
}
.sugerencias li { padding: 7px 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.sugerencias li b { display: inline-block; min-width: 50px; font-family: "Cascadia Mono", Consolas, monospace; }
.sugerencias li:hover, .sugerencias li.activa { background: var(--azul-suave); }

.his-paquetes { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.his-paquetes-etq { font-size: 11px; font-weight: 700; color: var(--texto-2); }
.his-paquetes-filtros { display: flex; flex-direction: column; gap: 6px; }
.his-ind { display: inline-flex; color: var(--azul-osc); cursor: help; margin-left: 4px; vertical-align: middle; }
.his-paquetes-filtros select { width: 100%; min-height: 30px; border: 1px solid var(--borde-campo); border-radius: 6px; padding: 3px 6px; font-size: 12px; background: var(--superficie); }
.his-paquetes-lista { flex: 1; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.his-paquetes-lista .vacio { padding: 20px 8px; font-size: 12.5px; }
.paquete { text-align: left; border: 1px solid var(--linea); background: var(--superficie); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, box-shadow .15s; }
.paquete:hover { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.paquete-nombre { font-weight: 700; font-size: 12.5px; }
.paquete-codigos { font-size: 11px; color: var(--texto-3); font-family: "Cascadia Mono", Consolas, monospace; }
.paquete-fuera { opacity: .6; }

.his-pie { display: flex; gap: 10px; align-items: stretch; }
.his-medidas { display: flex; gap: 8px; padding: 8px 10px; }
.his-medidas label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; color: var(--texto-2); }
.his-medidas input { width: 100px; min-height: 30px; border: 1px solid var(--borde-campo); border-radius: 6px; padding: 3px 8px; font-size: 13px; outline: none; transition: background .15s, border-color .15s; }
.his-medidas input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.his-medidas input.falta { background: var(--est-triaje-bg); border-color: var(--est-triaje-borde); }
.his-medidas input.listo { background: var(--est-ok-bg); border-color: var(--est-ok-borde); }
.his-medidas input[inputmode="decimal"] { width: 76px; }
.his-pie-aviso { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.his-pie-aviso .aviso { margin: 0; padding: 6px 10px; font-size: 12px; }
.btn-guardar { min-width: 200px; font-size: 16px; }
.btn-guardar img { width: 28px; height: 28px; }

/* Modales */
.velo { position: fixed; inset: 0; background: var(--velo); z-index: 20; animation: aparece .2s ease-out both; }
.modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(640px, calc(var(--vw) - 32px)); max-height: calc(var(--vh) - 48px);
    z-index: 21; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sombra-alta);
}
.modal-cab { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 16px; }
.modal-lista { overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; min-height: 0; }
.fila-clic { cursor: pointer; }
.fila-clic:hover { background: var(--azul-suave); }
.modal-chico { width: min(420px, calc(var(--vw) - 32px)); align-items: center; text-align: center; padding: 26px; }
.modal-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--est-ok-bg); color: var(--est-ok); display: grid; place-items: center; }
.modal-titulo { font-size: 17px; font-weight: 700; }
.modal-acciones { display: flex; gap: 8px; margin-top: 6px; }



/* Plantilla */
#blazor-error-ui { background: var(--aviso-bg); bottom: 0; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .reload { margin-left: 8px; }
.blazor-error-boundary { background: var(--error); padding: 1rem; color: #fff; }
.blazor-error-boundary::after { content: "Ocurrió un error."; }

/* Reporte H.I.S. (ListadoReporteHISPage): filtros, acciones y grilla del cuerpo HIS */
.rhis { display: flex; flex-direction: column; gap: 12px; }
.rhis-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1.4fr)) repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 14px 16px 6px; }
.rhis-filtros select, .rhis-filtros input { min-height: 34px; }
.rhis-buscar { margin-bottom: 8px; min-height: 40px; }
.rhis-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rhis-cuenta { margin-left: auto; color: var(--texto-3); font-size: 13px; }
.rhis-tabla-caja { overflow: auto; }
.rhis-tabla td { vertical-align: top; }
.rhis-tabla .num { width: 40px; text-align: right; color: var(--texto-3); }
.rhis-sel, .rhis-sel:hover { background: var(--azul-suave); }
.rhis-medidas { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.rhis-dx { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; padding: 1px 0; }
.rhis-dx-tipo { min-width: 18px; text-align: center; font-weight: 800; font-size: 11px; border-radius: 4px; padding: 0 4px; background: var(--gris-suave); }
.rhis-dx-d { background: var(--est-ok-bg); color: var(--est-ok); }
.rhis-dx-p { background: var(--est-espera-bg); color: var(--est-espera); }
.rhis-dx-r { background: var(--azul-suave); color: var(--azul-osc); }
.rhis-lab { font-size: 11px; color: var(--texto-2); background: var(--gris-suave); border-radius: 999px; padding: 0 6px; white-space: nowrap; }

/* Paquete de Códigos (CodigosRapidosConsultorioPage): tres paneles 1 → 2 → 3 */
.pq { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr) minmax(0, 2.4fr); gap: 12px; align-items: start; }
.pq-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 520px; }
.pq-cab { background: var(--gris-oscuro); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .04em; padding: 8px 12px; }
.pq-cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.pq-apagado .pq-cuerpo { opacity: .75; }
.pq-titulo { font-weight: 700; }
.pq-lista { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; padding: 4px; }
.pq-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.pq-item:hover { background: var(--gris-suave); }
.pq-item-nombre { font-weight: 700; font-size: 13px; }
.pq-item-sub { font-size: 11.5px; color: var(--texto-3); }
/* (.pq-personal se reemplazó por el color de alcance cr-fondo-P) */
.pq-sel, .pq-sel:hover { background: var(--azul-suave); border-color: var(--azul-borde); }
.pq-nuevo { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linea); }
.pq-pie { display: flex; justify-content: flex-end; margin-top: 8px; }
.pq .his-tabla { min-width: 560px; }


/* Códigos rápidos (SkyHealth): un color por alcance, como orbe + etiqueta + tinte suave de toda la superficie.
   Nunca franja lateral. Violeta = Personal, aqua = Establecimiento, naranja = Microred, verde = General MINSA. */
:root {
    --alc-P: #7A3FD1; --alc-P-bg: #F3ECFD;
    --alc-E: #0B7C86; --alc-E-bg: #E3F6F7;
    --alc-M: #B45309; --alc-M-bg: #FDF0E3;
    --alc-G: #1E7F3D; --alc-G-bg: #E4F5EA;
}
.cr-P { --alc: var(--alc-P); --alc-bg: var(--alc-P-bg); }
.cr-E { --alc: var(--alc-E); --alc-bg: var(--alc-E-bg); }
.cr-M { --alc: var(--alc-M); --alc-bg: var(--alc-M-bg); }
.cr-G { --alc: var(--alc-G); --alc-bg: var(--alc-G-bg); }
.cr-fondo-P { background: var(--alc-P-bg); } .cr-fondo-E { background: var(--alc-E-bg); }
.cr-fondo-M { background: var(--alc-M-bg); } .cr-fondo-G { background: var(--alc-G-bg); }
.cr-item.cr-fondo-P:hover, .cr-item.cr-fondo-E:hover, .cr-item.cr-fondo-M:hover, .cr-item.cr-fondo-G:hover { filter: brightness(.97); }
.cr-orbe { width: 9px; height: 9px; border-radius: 50%; background: var(--alc); box-shadow: 0 0 0 2px var(--alc-bg); display: inline-block; flex-shrink: 0; }
.cr-etq { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: 1px 7px; background: var(--alc-bg); color: var(--alc); white-space: nowrap; }
.cr-cat { background: var(--gris-suave); color: var(--texto-2); }
.cr-completar { background: var(--est-espera-bg); color: var(--est-espera); margin-left: 6px; }
.cr-sinverificar { background: var(--error-bg); color: var(--error); margin-left: 4px; font-family: var(--fuente); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea); background: var(--superficie); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.cr-chip:hover { background: var(--gris-suave); }
.cr-chip-on, .cr-chip-on:hover { background: var(--azul-suave); border-color: var(--azul-borde); color: var(--azul-osc); font-weight: 600; }
.cr-switch { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-2); cursor: pointer; }
.cr-candado { display: inline-flex; align-items: center; gap: 3px; color: var(--texto-3); font-size: 11px; vertical-align: middle; }
.pq-item-sub .cr-etq { margin-right: 4px; }
.cr-cabecera { border-radius: var(--radio-chico); padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.cr-desc { font-size: 12.5px; color: var(--texto-2); }
.cr-norma { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--azul-osc); font-weight: 600; text-decoration: none; }
.cr-norma:hover { text-decoration: underline; }
.btn-texto { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; text-align: left; }
.cr-peligro { color: var(--error); }
.cr-peligro:hover { text-decoration: underline; }
.cr-edad { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cr-fila-botones { display: flex; gap: 6px; margin-top: 6px; }
.crece-btn { flex: 1; justify-content: center; }
.pq .his-tabla .col-dx { width: 64px; }
.pq .his-tabla .col-lab { width: 54px; }
.pq .his-tabla .col-cod { width: 90px; }
.pq .his-tabla .col-desc { min-width: 240px; }
.cr-col-ind { width: 160px; }
.cr-col-ind input[type=text], .cr-col-ind input:not([type]) { width: 100%; }
.cr-check { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--texto-3); margin-top: 3px; }
.cr-ind { font-size: 12px; color: var(--texto-2); }
.cr-fila-completar td { background: var(--aviso-bg); }
.his-tabla input:disabled { background: transparent; border-color: transparent; color: var(--texto); }

/* Código escrito a mano fuera del maestro: aviso, no bloqueo. */
.his-tabla input.cod-fuera { background: var(--est-espera-bg); border-color: var(--est-espera); }
.his-tabla .col-cod input { text-transform: uppercase; }
.his-filtro-nota { font-size: 11.5px; color: var(--texto-3); line-height: 1.3; }
/* Actividades APP: lo que el manual MINSA manda dejar en blanco se ve tachado, para que nadie lo busque. */
.app-nota { font-size: 12px; margin-bottom: 4px; }
.app-tachado { text-decoration: line-through; color: var(--texto-3); font-size: 12px; line-height: 1.5; }

/* Diálogo Registrar / Editar paciente */
.dlg-paciente { width: min(680px, calc(var(--vw) - 32px)); max-height: calc(var(--vh) - 32px); overflow-y: auto; }
.dlg-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0; }
.dlg-rejilla .dlg-ancho { grid-column: 1 / -1; }


/* X de cierre en la esquina de todo diálogo, y MessageBox "Advertencia" */
.modal-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer; display: grid; place-items: center; }
.modal-x:hover { background: var(--error-bg); color: var(--error); }
.modal .modal-titulo { padding-right: 34px; }
.mensaje-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--est-espera-bg); color: var(--est-espera); display: grid; place-items: center; }
.mensaje-texto { font-size: 14px; color: var(--texto); line-height: 1.45; }

/* Pantallas HD y Full HD (la mayoría de los usuarios): todo un poco más grande, como se lee el SH4 en su monitor.
   zoom también agranda los vh/vw: por eso los altos usan --vh (= 100vh ÷ zoom). Medido: con 100vh directo, el HIS
   se salía 140 px de una pantalla de 1080. */
:root { --z: 1; --vh: calc(100vh / var(--z)); --vw: calc(100vw / var(--z)); }
@media (min-width: 1600px) { :root { --z: 1.08; } body { zoom: var(--z); } }
@media (min-width: 1880px) { :root { --z: 1.15; } }

/* Menú principal y secundario: tarjetas compactas con el ícono al centro (como el SH4), no columnas altas vacías. */
.modulos { grid-template-columns: repeat(auto-fill, minmax(150px, 170px)); }
.modulo { aspect-ratio: auto; height: 170px; justify-content: center; }
.modulo img { width: 96px; max-width: 96px; flex: none; }
.ms-fila { align-items: start; }
.sub { height: 150px; justify-content: center; }
.sub img { flex: none; width: 84px; height: 84px; }

/* Grilla HIS a proporción: DX, LAB y CÓDIGO cómodos; la descripción toma el resto. */
.his-tabla .col-dx { width: 88px; }
.his-tabla .col-lab { width: 78px; }
.his-tabla .col-cod { width: 108px; }

/* Lo que exige el HIS: etiqueta azul y campo teñido, para que se vea antes de chocar con un error. */
.his-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; background: var(--azul-suave); color: var(--azul-osc); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.his-dato .campo-his { background: var(--azul-hover); border-color: var(--azul-borde); }
.his-tabla th .req { color: var(--error); margin-left: 2px; }
.his-resumen { font-size: 12.5px; line-height: 1.35; padding: 8px 10px; border-radius: var(--radio-chico); }
.his-resumen.listo { background: var(--est-ok-bg); color: var(--est-ok); }
.his-resumen.falta { background: var(--est-espera-bg); color: var(--aviso-texto); }

/* Barra lateral de los dos menús, como el SH4: marca arriba y el bloque de usuario + botones anclado abajo,
   en un panel blanco de alto completo (antes eran cajas sueltas flotando sobre el gris). */
.mp { grid-template-columns: 270px minmax(0, 1fr) minmax(0, 1fr); padding-left: 0; }
.mp-izq {
    background: var(--superficie); border-right: 1px solid var(--linea); gap: 8px;
    margin: -18px 0 -20px 0; padding: 22px 16px 16px; min-height: var(--vh); position: sticky; top: 0;
}
.mp-marca img { width: 120px; height: 120px; }
.mp-izq > .siteds { margin-top: auto; }
.sit-ayuda-navegador { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radio-chico); background: var(--azul-suave); color: var(--azul-osc); font-size: 11.5px; line-height: 1.4; }
.sit-ayuda-navegador a { color: inherit; font-weight: 700; }
.mp-pie { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
/* Menú principal: todos los módulos (con Gestión y Configuración) en una sola fila; las tarjetas se encogen antes de saltar de línea. */
.mp-modulos .modulos { display: flex; flex-wrap: nowrap; gap: 10px; }
.mp-modulos .modulo { flex: 0 1 170px; min-width: 0; }
.ms { grid-template-columns: 270px minmax(0, 1fr); }
.ms-con-barra { grid-template-columns: 270px minmax(0, 1fr) 300px; }
.ms-lateral { padding: 22px 16px 16px; gap: 8px; }
.ms-imagen { width: 112px; height: 112px; }
.ms-titulo { font-size: 26px; }
.mp-izq .mp-usuario, .ms-lateral .mp-usuario { box-shadow: none; border: 1px solid var(--linea); background: var(--gris-suave); padding: 8px 10px; }
.mp-izq .mp-usuario img, .ms-lateral .mp-usuario img { width: 46px; height: 46px; }
.mp-izq .separador, .ms-lateral .separador { height: 1px; opacity: .25; margin: 2px 0; }
.mp-izq .btn-lateral, .ms-lateral .btn-lateral { min-height: 40px; }

/* Consultar Persona: al centro de la pantalla, no pegado arriba. */
.consultar { min-height: calc(var(--vh) - 150px); justify-content: center; padding-top: 0; }
.mp-izq .siteds-cuerpo { grid-template-columns: 92px 1fr; }
.mp-izq .siteds-campos label { grid-template-columns: 66px 1fr; font-size: 11.5px; }

/* Nombres de sede largos ("CENTRO DE SALUD SAN MARTIN DE SOCABAYA") se salían del botón. */
.login-sede { white-space: normal; height: auto; width: 100%; }
.login-sede-nombre, .login-sede-servicio { overflow-wrap: anywhere; }

/* Android: el "arrastrar hacia abajo para recargar" recargaba la página en plena atención. Se apaga. */
html, body { overscroll-behavior-y: contain; }

/* Gestión de usuarios SH4 / SkyHealth web / SHL (solo cuentas SkyMars): tarjeta en el menú y pantalla /gestion.
   Mismos colores de estado del SH4, tinte de toda la etiqueta (nunca franja lateral). */
.gs-sistemas { display: inline-flex; gap: 4px; padding: 4px; background: var(--gris-suave); border-radius: 12px; margin-bottom: 12px; }
.gs-sistemas button { border: 0; background: transparent; padding: 7px 16px; border-radius: 9px; font-weight: 700; cursor: pointer; color: var(--texto-2); }
.gs-sistemas button span { font-weight: 400; font-size: 11.5px; color: var(--texto-3); margin-left: 4px; }
.gs-sistemas .gs-sistema-on { background: var(--superficie); color: var(--azul-osc); box-shadow: var(--sombra); }
.gs-fallo td { background: var(--error-bg); }
.gs-fallo td:nth-child(3) > div:first-child { color: var(--error); font-weight: 700; }
.modulo-gestion { color: var(--azul-osc); }
.modulo-gestion-ico { width: 96px; height: 96px; border-radius: 22px; background: var(--azul-suave); display: grid; place-items: center; }
/* Submenú de Gestión: el ícono SVG ocupa el lugar de la imagen del módulo en la barra lateral. */
.ms-imagen-glifo { color: var(--azul-osc); border-radius: 28px; }
.gs-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--azul-suave); color: var(--azul-osc); display: grid; place-items: center; flex-shrink: 0; }
.gs-cifras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.gs-cifra { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s; }
.gs-cifra span { font-size: 12px; color: var(--texto-2); }
.gs-cifra b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gs-cifra:hover { border-color: var(--azul-borde); }
.gs-cifra-on { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.gs-cifra-espera b { color: var(--est-espera); }
.gs-cifra-error b { color: var(--error); }
.gs-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.gs-lista { overflow: hidden; }
.gs-buscar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linea); color: var(--texto-3); }
.gs-buscar input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); padding: 0 10px; color: var(--texto); }
.gs-tabla-caja { max-height: calc(var(--vh) - 290px); overflow-y: auto; }
.gs-tabla th { position: sticky; top: 0; z-index: 1; }
.gs-sel td { background: var(--azul-suave); }
.gs-estado { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.gs-vigente { background: var(--est-ok-bg); color: var(--est-ok); }
.gs-porvencer { background: var(--est-espera-bg); color: var(--est-espera); }
.gs-vencido, .gs-bloqueado { background: var(--error-bg); color: var(--error); }
.gs-inactivo { background: var(--est-anulado-bg); color: var(--est-anulado); }
.gs-ficha { padding: 16px 18px; position: sticky; top: 12px; max-height: calc(var(--vh) - 24px); overflow-y: auto; }
.gs-ficha-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.gs-nombre { font-size: 18px; font-weight: 700; }
.gs-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; background: var(--gris-suave); border-radius: var(--radio-chico); padding: 10px 12px; margin-bottom: 14px; }
.gs-datos span { display: block; font-size: 11.5px; color: var(--texto-3); }
.gs-datos b { font-size: 13.5px; }
.gs-bloque-titulo { font-weight: 700; margin: 14px 0 6px; }
.gs-vigencia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gs-vigencia input { height: 34px; border: 1px solid var(--borde-campo); border-radius: var(--radio-chico); padding: 0 8px; }
.gs-nota { margin-top: 6px; line-height: 1.4; }
.gs-link { border: 0; background: none; padding: 0; color: var(--azul-osc); text-decoration: underline; cursor: pointer; font: inherit; }
.gs-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gs-mini-tabla { border: 1px solid var(--linea); border-radius: var(--radio-chico); max-height: 280px; overflow-y: auto; }
.gs-mini-tabla th { position: sticky; top: 0; }
.gs-origen { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--gris-suave); color: var(--texto-2); }
.gs-origen-web { background: var(--azul-suave); color: var(--azul-osc); }
.gs-nuevo { width: min(720px, calc(var(--vw) - 32px)); padding: 18px 20px; }
.gs-nuevo-cuerpo { overflow-y: auto; min-height: 0; padding-right: 4px; }
.gs-nuevo-cuerpo .gs-bloque-titulo:first-child { margin-top: 0; }
.gs-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.gs-sedes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 10px 12px; }
.gs-sede { align-items: flex-start; font-size: 13px; }
.gs-sede input { margin-top: 1px; flex-shrink: 0; }
.gs-sede-principal { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--azul-suave); color: var(--azul-osc); white-space: nowrap; }
.gs-vigencia-nuevo { margin: 8px 0 4px; }
.gs-copiar { margin-top: 12px; }
.gs-nuevo-acciones { justify-content: flex-end; }



/* SITEDS comparte el patrón de superficies y controles del menú. */
.sit-estado { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.sit-activo { background: var(--est-ok-bg); color: var(--est-ok); }
.sit-pendiente { background: var(--est-espera-bg); color: var(--est-espera); }
.sit-ayuda { font-size: 12px; line-height: 1.4; }
.siteds .captcha img { width: 100%; max-height: 75px; object-fit: contain; }
.siteds .captcha span { font-size: 11px; text-align: center; padding: 6px; }
.sit-selector { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 12px; }
.sit-selector select { max-width: 100%; min-height: 30px; }
.sit-resultado { padding: 12px; border-radius: 8px; margin: 12px 0; }
/* El autocompletado solo dispara el foco local; nunca se persisten las credenciales. */
@keyframes siteds-autocompletado { from { opacity: .99; } to { opacity: 1; } }
#siteds-login input:-webkit-autofill { animation: siteds-autocompletado .01s; }
.siteds .sit-proceso { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.siteds .sit-proceso input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0; }
.sit-cambiar { border: 0; background: transparent; color: var(--azul, #1769aa); padding: .25rem 0; font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }

/* Encargo 13: las adaptaciones se aplican después de TODAS las reglas base.
   La cabecera compacta reutiliza la sesión y las acciones existentes. */
.mp-compacta, .ms-volver-compacto, .cierre-compacto { display: none; }

/* Tablet y controles táctiles. Escritorio conserva su presentación. */
@media (max-width: 1099px) {
    /* La prioridad es deliberada: supera también los tamaños del CSS aislado de Registro.
       Las casillas mantienen su dibujo nativo; su etiqueta ofrece el objetivo de 44 px. */
    button, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .btn, .m-btn, .check, .ar-check, .cr-check, .cr-switch, .sugerencias li {
        min-height: 44px !important;
    }
    .btn-ico, .btn-cerrar, .modal-x, .btn-quitar { min-width: 44px; }
    input[type="checkbox"], input[type="radio"] { flex-shrink: 0; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
    .siteds input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 0; }
    .fila-clic { height: 44px; }
    input, select, textarea { min-width: 0; max-width: 100%; }
    :is(.mp, .ms, .pantalla, .modal) > *, .m-fila > *, .his-par > *, .his-doc > *,
    .siteds-cuerpo > *, .siteds-campos label > *, .siteds-datos label > * { min-width: 0; }
    .pantalla, .modal { overflow-wrap: anywhere; }
    .pantalla-cab { flex-wrap: wrap; }
    .pantalla-titulos { min-width: 0; }
    .mp {
        grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
        grid-template-areas: "barra" "der" "mod" "nov" "izq";
        padding: 16px; gap: 16px; align-content: start;
    }
    .mp-compacta {
        grid-area: barra; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
        padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
    }
    .mp-compacta-marca { display: flex; align-items: center; gap: 8px; font-size: 18px; }
    .mp-compacta-marca img { width: 36px; height: 36px; }
    .mp-compacta-usuario { flex: 1; font-size: 12px; overflow-wrap: anywhere; }
    .mp-izq { position: static; min-height: 0; margin: 0; padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); }
    .mp-izq .mp-marca, .mp-izq .mp-cerrar-escritorio { display: none; }
    .mp-pie { margin-top: 0; }
    .mp-modulos .modulos { display: grid; }
    .mp-usuario > div { white-space: normal; overflow-wrap: anywhere; }
    .mp-der { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: center; }
    .reloj-sh4 .reloj-hora { font-size: 64px; }
    .reloj-sh4 .reloj-fecha { font-size: 18px; margin-top: 8px; }
    .mp-sede-bloque { margin-top: 0; align-items: stretch; }
    .mp-sede, .btn-soporte { width: 100%; }
    .modulos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .modulo, .sub { height: auto; aspect-ratio: 1; min-width: 0; gap: 8px; padding: 28px 8px 10px; }
    .modulo img, .sub img { width: 64px; height: 64px; max-width: 64px; max-height: 64px; flex: none; }
    .modulo-gestion-ico { width: 64px; height: 64px; border-radius: 16px; }
    .modulo-gestion-ico .glifo { width: 48px; height: 48px; }
    .modulo > span:last-child, .sub > span:last-child { font-size: 13px; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
    .proximamente { top: 6px; left: 4px; right: 4px; width: fit-content; max-width: calc(100% - 8px); margin-inline: auto; font-size: 9px; padding: 2px 6px; }
    .novedades { min-height: 0; max-height: none; }
    .ms, .ms-con-barra { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; align-content: start; }
    .ms-lateral { position: static; height: auto; margin: 0 -16px; padding: 12px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--linea); }
    .ms-imagen { width: 48px; height: 48px; }
    .ms-titulo { flex: 1; text-align: left; font-size: 24px; min-width: 0; }
    .ms-logo, .ms-lateral .mp-usuario, .ms-lateral .separador, .ms-cambiar-escritorio { display: none; }
    .ms-volver-compacto { display: inline; }
    .ms-lateral .btn-lateral { width: auto; }
    .ms-lateral .btn-lateral img { position: static; }
    .ms-filas { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; align-content: start; }
    .ms-fila { display: contents; }
    .ms-conteo { grid-column: 1; width: 100%; }
    .lista-y-ficha, .dos-paneles, .form-metro { grid-template-columns: minmax(0, 1fr); }
    .ficha-metro { width: 100%; }
    .his { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .his-paciente-cuerpo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .his-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .his-tabla-envoltura { max-height: 420px; min-width: 0; }
    .his-pie, .his-medidas { flex-wrap: wrap; }
    .his-medidas { min-width: 0; }
    .his-paquetes-lista { max-height: 320px; }
    .rhis-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rhis-tabla { min-width: 900px; }
    .pq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pq-panel-ancho { grid-column: 1 / -1; }
    .gs-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .gs-ficha { position: static; max-height: none; }
    .gs-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gs-tabla-caja, .gs-mini-tabla { overflow: auto; }
    .gs-buscar { flex-wrap: wrap; }
    .gs-buscar input { flex-basis: 200px; }
    .gs-sistemas { display: flex; flex-wrap: wrap; }
    .gs-sistemas button { white-space: normal; }
    .gs-sede { flex-wrap: wrap; }
    .modal { overflow: auto; }
    .modal > * { flex-shrink: 0; }
    .modal-lista, .gs-nuevo-cuerpo { flex-shrink: 1; }
    .modal-x { width: 44px; height: 44px; top: 6px; right: 6px; }
    .cierre-compacto { display: contents; }
    .al-cerrar-texto { display: none; }
    .al-dialogo-cab > button { min-width: 44px; }
    .modal .modal-titulo, .modal-cab { padding-right: 48px; }
    .modal-acciones { flex-wrap: wrap; }
}

/* Teléfono: una columna de trabajo, dos columnas de módulos. */
@media (max-width: 640px) {
    input, select, textarea { font-size: 16px !important; }
    .mp { padding: 10px; gap: 14px; }
    .mp-compacta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .mp-compacta-marca { font-size: 17px; }
    .mp-compacta-marca img { width: 30px; height: 30px; }
    .mp-compacta-usuario { grid-column: 1; font-size: 11px; }
    .mp-compacta > .btn { grid-column: 2; grid-row: 1 / 3; padding: 6px 8px; font-size: 12px; gap: 4px; }
    .mp-der { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .reloj-sh4 { padding-top: 0; }
    .reloj-sh4 .reloj-hora { font-size: 48px; }
    .reloj-sh4 .reloj-fecha { font-size: 16px; margin-top: 6px; }
    .mp-sede { flex-direction: column; }
    .mp-izq .siteds-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .siteds .captcha { width: 160px; max-width: 100%; justify-self: center; }
    .btn-aplicar { width: 100%; min-height: 44px; flex-direction: row; }
    .btn-aplicar img { width: 24px; height: 24px; }
    .modulos, .ms-filas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ms-lateral { gap: 8px; }
    .ms-imagen { width: 40px; height: 40px; }
    .ms-titulo { font-size: 22px; }
    .ms-lateral .btn-lateral { flex: 1 1 auto; }
    .ms-lateral .btn-lateral:first-of-type { margin-left: auto; }
    .pantalla { padding: 14px; }
    .pantalla-cab { gap: 10px; margin-bottom: 14px; }
    .pantalla-titulos { flex: 1 1 180px; }
    .pantalla-titulos h1, .pantalla-cab > h1 { font-size: 23px; }
    .pantalla-cab .reloj-chico { display: none; }
    .pantalla-cab .btn-volver { flex-basis: 100%; justify-content: flex-start; }
    .vitales, .m-fila, .consultar-fila { display: grid; grid-template-columns: minmax(0, 1fr); }
    .m-fila > .m-btn { margin-bottom: 12px; }
    .m-campo-dni, .m-buscador { max-width: none; width: 100%; }
    .m-filtros { align-items: stretch; flex-direction: column; }
    .form-metro { padding: 16px; }
    .ficha-metro dl { grid-template-columns: minmax(0, 1fr); }
    .ficha-metro dd { margin-bottom: 8px; }
    .maqueta { flex-direction: column; padding: 18px; }
    .login-fondo { justify-content: flex-start; padding: 16px 12px; }
    .login-ventana { padding: 22px 18px; }
    .login-logo { width: 96px; height: 96px; }
    .login-titulo { margin-top: 16px; }
    .login-nota { text-align: center; }
    .campo-etq-fila { flex-wrap: wrap; }
    .consultar-ventana { padding: 16px; }
    .his-paciente-cuerpo, .his-par, .rhis-filtros, .pq, .gs-form, .gs-sedes, .gs-datos, .dlg-rejilla, .cr-edad {
        grid-template-columns: minmax(0, 1fr);
    }
    .his-pie { flex-direction: column; }
    .his-medidas { display: grid; grid-template-columns: minmax(0, 1fr); }
    .his-medidas input, .his-medidas input[inputmode="decimal"] { width: 100%; }
    .his-barra > .btn, .rhis-acciones > .btn, .cr-fila-botones > .btn { width: 100%; white-space: normal; }
    .his-barra-nota { margin-left: 0; }
    .sugerencias { min-width: 0; width: min(300px, calc(100vw - 60px)); }
    .rhis-cuenta { margin-left: 0; width: 100%; }
    .pq-panel { min-height: 0; }
    .pq-lista { max-height: 260px; }
    .cr-fila-botones { flex-wrap: wrap; }
    .gs-cifras { grid-template-columns: minmax(0, 1fr); }
    .gs-sistemas { flex-direction: column; }
    .gs-ficha-cab { flex-wrap: wrap; }
    .gs-ficha { padding: 14px; }
    .gs-buscar > button { flex: 1; white-space: normal; }
    .gs-buscar input { flex-basis: calc(100% - 32px); }
    .gs-buscar > button { flex-basis: 100%; }
    /* La lista de usuarios tiene pocas columnas: tarjetas con todos los datos. */
    .gs-tabla, .gs-tabla tbody { display: block; }
    .gs-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .gs-tabla tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px; border-bottom: 1px solid var(--linea); }
    .gs-tabla .fila-clic { height: auto; min-height: 44px; }
    .gs-tabla td { display: block; border: 0; padding: 4px 0; overflow-wrap: anywhere; }
    .gs-tabla td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--texto-2); font-weight: 600; }
    .gs-tabla td .fuerte { display: inline; }
    .gs-tabla-caja { max-height: 65dvh; }
    .modal, .modal-chico, .gs-nuevo, .dlg-paciente {
        width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 14px; gap: 12px;
    }
    .modal-x { position: sticky; top: 0; right: auto; align-self: flex-end; flex-shrink: 0; margin: -6px -6px -44px 0; z-index: 3; background: var(--superficie); }
    .modal-cab .modal-x { position: absolute; top: 6px; right: 6px; margin: 0; }
    .modal-acciones { position: sticky; bottom: -14px; background: var(--superficie); padding-block: 10px; margin-top: auto; z-index: 2; width: 100%; }
    .modal-acciones > button { flex: 1 1 100%; white-space: normal; }
    .modal-lista { overflow: auto; }
}

/* Tema oscuro: ajustes que no salen solo de los tokens (18/10/2026). */
/* Los colores de grupo etario son los del SH4 y se conservan; su texto va siempre oscuro para leerse. */
:root[data-tema="oscuro"] [class*="etario-"] { color: #111 !important; }
:root[data-tema="oscuro"] {
    --alc-P: #B794F6; --alc-P-bg: #2A2140;
    --alc-E: #4FC3CF; --alc-E-bg: #142E31;
    --alc-M: #F0A35E; --alc-M-bg: #36240F;
    --alc-G: #56D364; --alc-G-bg: #12301D;
}
:root[data-tema="oscuro"] img.ms-imagen, :root[data-tema="oscuro"] .modulo img, :root[data-tema="oscuro"] .sub img { filter: brightness(.92); }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) [class*="etario-"] { color: #111 !important; }
    :root:not([data-tema="claro"]) {
        --alc-P: #B794F6; --alc-P-bg: #2A2140;
        --alc-E: #4FC3CF; --alc-E-bg: #142E31;
        --alc-M: #F0A35E; --alc-M-bg: #36240F;
        --alc-G: #56D364; --alc-G-bg: #12301D;
    }
    :root:not([data-tema="claro"]) .modulo img, :root:not([data-tema="claro"]) .sub img { filter: brightness(.92); }
}

/* Selector de tema (barra lateral del menú). */
/* Configuración: superficies y controles adaptados a los tokens de ambos temas. */
.config-pagina { max-width: 960px; margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
/* El editor de FUA necesita la hoja entera a la vista: la página se ensancha solo cuando está abierto. */
.config-pagina:has(.fua-editor) { max-width: 1440px; }
.config-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.config-cabecera h1 { display: flex; align-items: center; gap: 10px; font-size: 26px; }
.config-bloque { padding: 24px; display: grid; gap: 16px; min-width: 0; }
.config-bloque h2 { margin: 0; font-size: 20px; }
.config-ayuda { color: var(--texto-2); line-height: 1.6; }
.config-interruptor { display: flex; align-items: center; gap: 12px; font-weight: 600; min-height: 44px; cursor: pointer; }
.config-interruptor input { appearance: none; width: 44px; height: 26px; flex-shrink: 0; margin: 0; border: 1px solid var(--borde-campo); border-radius: 20px; background: var(--gris-suave); position: relative; cursor: pointer; }
.config-interruptor input::before { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: var(--texto-2); }
.config-interruptor input:checked { background: var(--azul-suave); border-color: var(--azul); }
.config-interruptor input:checked::before { transform: translateX(18px); background: var(--azul); }
.config-interruptor input:disabled { opacity: .6; cursor: wait; }
.config-estado { padding: 16px; border-radius: var(--radio-chico); background: var(--aviso-bg); color: var(--aviso-texto); display: grid; gap: 12px; justify-items: start; }
.config-estado p { display: flex; align-items: center; gap: 8px; }
.siteds-preferencia { padding: 16px; background: var(--gris-suave); color: var(--texto-2); line-height: 1.5; }
.tema-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tema-selector button { border: 1px solid var(--linea); background: var(--superficie); border-radius: var(--radio); padding: 20px 12px; color: var(--texto-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; }
.tema-selector button strong { font-size: 16px; }
.tema-selector button span { font-size: 13px; line-height: 1.4; }
.tema-selector button:hover { color: var(--texto); border-color: var(--azul-borde); }
.tema-selector button[aria-pressed="true"] { background: var(--azul-suave); color: var(--azul-osc); border-color: var(--azul-borde); box-shadow: inset 0 0 0 1px var(--azul-borde); }
.tema-selector button:focus-visible, .config-interruptor input:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
@media (max-width: 540px) {
    .config-pagina { padding: 20px 14px; gap: 16px; }
    .config-bloque { padding: 18px; }
    .config-cabecera h1 { font-size: 22px; gap: 6px; }
    .tema-selector { grid-template-columns: 1fr; gap: 10px; }
    .tema-selector button { min-height: 108px; padding: 14px; gap: 6px; }
}


/* Anular atención HIS: motivos de un toque (18/10/2026). */
.anular-motivos { display: grid; gap: 6px; margin: 12px 0 8px; }
.anular-motivos button { text-align: left; min-height: 40px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto); font-weight: 600; cursor: pointer; }
.anular-motivos button:hover { border-color: var(--azul-borde); background: var(--azul-hover); }
.anular-motivos button[aria-checked="true"] { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-osc); box-shadow: inset 0 0 0 1px var(--azul); }

/* Configuración → por dónde sale SITEDS en esta computadora */
.config-vias { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; min-width: 0; }
.config-vias legend { font-weight: 600; margin-bottom: 8px; color: var(--texto); }
.config-via { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie); cursor: pointer; min-height: 44px; }
.config-via input { margin: 3px 0 0; accent-color: var(--azul); flex-shrink: 0; width: 18px; height: 18px; }
.config-via span { display: grid; gap: 2px; min-width: 0; }
.config-via strong { color: var(--texto); }
.config-via small { color: var(--texto-2); font-size: .85rem; line-height: 1.35; }
.config-via-activa { background: var(--azul-suave); border-color: var(--azul-borde); }
.config-via-activa strong { color: var(--azul-osc); }
.config-vias:disabled .config-via { cursor: wait; opacity: .7; }

/* Encargo 28: accesibilidad y lectura de las grillas clásicas. */
.enc28-ayuda { font-size: 12px; color: var(--texto-2); margin: 8px 12px; }
.enc28-elegir { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 4px; min-height: 40px; }
.enc28-elegir:hover { text-decoration: underline; }
.enc28-elegir:focus-visible, .enc28-orden button:focus-visible, .enc28-ind summary:focus-visible, [role="region"][tabindex="0"]:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.rhis-tabla .enc28-identidad { position: sticky; left: 0; z-index: 2; width: 180px; min-width: 150px; max-width: 210px; white-space: normal; background: var(--superficie); }
.rhis-tabla th.enc28-identidad { z-index: 3; }
.rhis-tabla .rhis-sel .enc28-identidad { background: var(--azul-suave); }
.his-tabla tr:focus-within > td { background: var(--azul-suave); }
.his-tabla td.col-n { position: sticky; left: 0; z-index: 2; background: var(--superficie); }
.his-tabla th.col-n { position: sticky; left: 0; z-index: 3; background: var(--superficie); }
.his-tabla.enc28-reordenable .col-n { width: 70px; min-width: 70px; }
.enc28-orden { display: flex; flex-direction: column; gap: 4px; }
.enc28-orden button { border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 4px; min-height: 36px; min-width: 58px; white-space: nowrap; color: var(--texto); background: var(--superficie); font-size: 11px; cursor: pointer; }
.enc28-orden button:disabled { opacity: .5; cursor: default; }
.enc28-ind { color: var(--texto-2); font-size: 12px; white-space: normal; }
.enc28-ind summary { cursor: pointer; padding: 6px 0; min-height: 32px; }
.enc28-ind p { margin: 4px 0; }
.enc28-alcance { display: block; color: var(--texto-2); font-size: 11px; }
dialog.enc28-dialogo { margin: 0; border: 1px solid var(--linea); color: var(--texto); overflow: auto; }
dialog.enc28-dialogo:not([open]) { display: none; }
dialog.enc28-dialogo::backdrop { background: var(--velo); }
.enc28-dialogo > form { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.rastro-tabla th:first-child, .rastro-tabla td:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
@media (max-width: 640px) { .enc28-orden button { min-height: 44px; } }
/* Fin Encargo 28 */
/* Encargo 29: modos de presentación por pantalla; reglas y controles compartidos. */
.enc29-selector { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; min-width: 0; }
.enc29-selector > div:first-child { display: grid; gap: 3px; }
.enc29-selector strong { font-size: 13px; }
.enc29-selector span { font-size: 12px; color: var(--texto-2); }
.enc29-opciones { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie); }
.enc29-opciones button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.enc29-opciones button[aria-pressed=true] { background: var(--azul-suave); color: var(--azul-osc); font-weight: 700; }
.enc29-opciones button:disabled { cursor: default; opacity: .65; }
.enc29-opciones button:focus-visible, .enc29-identidad:focus-visible, .enc29-paciente summary:focus-visible, .enc29-atencion summary:focus-visible { outline: 2px solid var(--azul-osc); outline-offset: 2px; }
.pantalla-cab > .enc29-selector { margin: 0; max-width: 360px; }
.config-bloque .enc29-selector { padding: 16px 0; margin: 0; border-bottom: 1px solid var(--linea); }
.config-bloque .enc29-selector:last-child { border: 0; padding-bottom: 0; }
.enc29-vista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 0 12px 12px; font-size: 12px; color: var(--texto-2); }
.enc29-pacientes { padding: 0 12px 12px; }
.enc29-paciente { padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio-chico); margin-bottom: 8px; }
.enc29-identidad { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(170px, 1.4fr) minmax(85px, .6fr) minmax(140px, 1fr); align-items: center; gap: 8px 16px; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.enc29-identidad span { font-size: 12px; color: var(--texto-2); }
.enc29-seleccion { background: var(--azul-suave); }
.enc29-paciente summary, .enc29-atencion summary { cursor: pointer; padding: 12px 0 4px; font-size: 13px; color: var(--azul-osc); }
.enc29-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px 20px; margin: 14px 0 0; }
.enc29-datos div { min-width: 0; }
.enc29-datos dt { color: var(--texto-2); font-size: 12px; }
.enc29-datos dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.enc29-lineas { white-space: pre-line; }
.enc29-atenciones { display: grid; gap: 12px; }
.enc29-atencion { padding: 16px; min-width: 0; }
.enc29-atencion .enc29-identidad { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 12px; }
.enc29-atencion .rhis-dx { padding: 8px 0; flex-wrap: wrap; border-bottom: 1px solid var(--linea); }
.enc29-atencion .rhis-dx > span { overflow-wrap: anywhere; min-width: 0; }
.enc29-contexto { position: sticky; top: 8px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--sombra); }
.enc29-contexto > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.enc29-contexto span { font-size: 12px; color: var(--texto-2); }
.enc29-his { height: auto; min-height: 0; align-items: start; }
.enc29-his .his-paciente-cuerpo { gap: 10px; overflow: visible; }
.enc29-his .his-dato input, .enc29-his .his-dato select, .enc29-his .his-dato output { min-height: 36px; font-size: 13px; }
.enc29-his .his-tabla td { padding: 8px 6px; }
.enc29-his .his-tabla input, .enc29-his .his-tabla select { min-height: 40px; font-size: 14px; }
.enc29-his .his-tabla-envoltura { min-height: 160px; }
.enc29-his .his-paquetes-lista { max-height: 480px; }
@media (max-width: 1100px) { .enc29-identidad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .enc29-selector { align-items: flex-start; }
    .enc29-opciones button { min-height: 44px; }
    .pantalla-cab > .enc29-selector { flex-basis: 100%; max-width: none; }
    .enc29-identidad { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .enc29-contexto { top: 0; padding: 10px; }
    .enc29-contexto strong { font-size: 14px; }
    .enc29-his .his-tabla { display: block; min-width: 0; table-layout: auto; }
    .enc29-his .his-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .enc29-his .his-tabla tbody { display: block; }
    .enc29-his .his-tabla tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; border-bottom: 1px solid var(--linea); }
    .enc29-his .his-tabla td { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
    .enc29-his .his-tabla td::before { content: attr(data-etiqueta); display: block; margin-bottom: 5px; color: var(--texto-2); font-size: 12px; font-weight: 600; }
    .enc29-his .his-tabla .col-desc, .enc29-his .his-tabla .col-dx, .enc29-his .his-tabla .col-cod, .enc29-his .his-tabla .col-n, .enc29-his .his-tabla .col-x, .enc29-his .his-tabla .vacio { grid-column: 1 / -1; }
    .enc29-his .his-tabla.enc28-reordenable .col-n { display: flex; width: auto; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
    .enc29-his .his-tabla .col-n::before { content: "Fila"; margin: 0; }
    .enc29-his .enc28-orden { display: flex; flex-direction: row; }
    .enc29-his .his-tabla-envoltura { max-height: none; overflow: visible; }
    .enc29-his .his-tabla .col-x { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
    .enc29-his .his-tabla .col-x::before { margin: 0; }
    .enc29-his .his-tabla .btn-quitar { min-width: 44px; min-height: 44px; }
    .enc29-his .sugerencias { left: 0; min-width: 0; width: 100%; }
}

/* Encargo 30: confirmaciones dentro de la app; colores del tema. */
dialog.enc30-confirmacion { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; transform: none; overflow: auto; }
.enc30-confirmacion h2 { margin: 14px 0 8px; font-size: 21px; }
.enc30-confirmacion p { color: var(--texto-2); line-height: 1.55; margin-bottom: 22px; }
.enc30-confirmacion-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--aviso-bg); color: var(--aviso-titulo); }
.enc30-confirmacion-icono.peligro { background: var(--error-bg); color: var(--error); }
.enc30-confirmacion-icono.informacion { background: var(--azul-suave); color: var(--azul); }
.enc30-confirmacion-acciones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.enc30-confirmacion-acciones .btn { min-height: 44px; white-space: normal; }
@media (max-width: 520px) { .enc30-confirmacion-acciones { flex-direction: column; } }