/* ═══════════════════════════════════════════════════════════════════════
   AIMH — hoja de estilo del EMR
   -----------------------------------------------------------------------
   Hasta ahora cada pantalla del personal traía su propio <style> con su
   propia versión del mismo azul, la misma tarjeta y la misma etiqueta de
   estado. Copiadas a mano, casi iguales, nunca idénticas. Esta hoja es el
   contrato visual único: se escribe una vez y las pantallas la consumen.

   Empieza en el perfil de cliente porque es la primera pantalla partida en
   rutas propias. Las demás se migran aquí en su turno; mientras tanto
   conviven sin estorbarse, porque nada de esto pisa a la hoja del sitio
   público (css/style.css) ni al <style> local de una página que aún no ha
   migrado.

   Regla de color, tomada del lenguaje que ya usa el sistema por dentro:
     verde   = listo / completado          ámbar  = revisar / vence pronto
     rojo    = bloqueado / crítico         gris   = archivado / inactivo
     morado  = supervisión
   El color nunca es el único portador del mensaje: cada estado lleva
   también su palabra. Un daltónico tiene que poder trabajar aquí.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Marca — el mismo marino que el sitio público */
    --emr-marino: #1E4290;
    --emr-marino-osc: #16336E;
    --emr-navy: #0E2140;
    --emr-oro: #C9A227;

    /* Superficies */
    --emr-fondo: #F1F4F9;
    --emr-panel: #FFFFFF;
    --emr-panel-2: #F7F9FC;
    --emr-borde: #E3E9F2;
    --emr-borde-fuerte: #CFD9E8;

    /* Texto */
    --emr-tinta: #1B2733;
    --emr-tinta-2: #46566B;
    --emr-tinta-3: #6B7C92;

    /* Semántica de estado */
    --emr-ok: #1F6B3F;        --emr-ok-bg: #E7F4EC;      --emr-ok-bd: #BFE0CC;
    --emr-aviso: #8A6A1A;     --emr-aviso-bg: #FDF6E9;   --emr-aviso-bd: #E8D3A0;
    --emr-mal: #A02B2B;       --emr-mal-bg: #FBECEC;     --emr-mal-bd: #E4BDBD;
    --emr-off: #5C6B7E;       --emr-off-bg: #EEF1F6;     --emr-off-bd: #D6DEE9;
    --emr-sup: #5B3E9B;       --emr-sup-bg: #F1ECFB;     --emr-sup-bd: #D5C8F0;

    --emr-r: 12px;
    --emr-r-s: 8px;
    --emr-sombra: 0 1px 2px rgba(14,33,64,.05), 0 8px 20px -10px rgba(14,33,64,.14);
    --emr-sombra-alta: 0 2px 5px rgba(14,33,64,.06), 0 20px 40px -16px rgba(14,33,64,.22);
}

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

.emr {
    margin: 0;
    background: var(--emr-fondo);
    color: var(--emr-tinta);
    font-family: 'Manrope', -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.emr h1, .emr h2, .emr h3, .emr h4 { margin: 0; letter-spacing: -.015em; line-height: 1.25; }
.emr a { color: var(--emr-marino); text-decoration: none; }
.emr a:hover { text-decoration: underline; }
/* 029 (DEBT-CLIN-009 bounded fix): unlayered legacy rules beat the layered foundation, so inside migrated regions
   links keep the foundation treatment (underlined, distinguishable without color — 017). Paths/items/buttons keep their own rules. */
.emr .aimh-work a:not(.aimh-btn):not(.aimh-paths a):not(.aimh-item__when a):not(.emr-btn):not(.aimh-tabs a) { text-decoration: underline; text-underline-offset: 2px; }   /* D-026-330 · las pestañas (tabs) son navegación, no enlaces de texto: sin subrayado, como manda el componente */
/* Deploy — Wave 0 (/doc finding): `.emr a` painted foundation buttons navy-on-navy, so an <a class="aimh-btn">
   had invisible text. Same precedent as `.emr a.emr-btn` above: the button keeps its own foreground tokens. */
.emr a.aimh-btn { color: var(--aimh-button-primary-fg, #fff); }
.emr a.aimh-btn:hover { text-decoration: none; }
.emr a.aimh-btn[data-emphasis="secondary"] { color: var(--aimh-button-secondary-fg); }
.emr a.aimh-btn[data-emphasis="quiet"] { color: var(--aimh-button-quiet-fg); }
.emr a.aimh-btn[data-intent="destructive"] { color: var(--aimh-status-critical-fg); }
.emr .aimh-work .aimh-paths a, .emr .aimh-work .aimh-item__when a { text-decoration: none; }
.emr .aimh-work .aimh-paths a:hover, .emr .aimh-work .aimh-item__when a:hover { text-decoration: underline; }
.emr .aimh-work .aimh-launcher a:hover { text-decoration: none; }   /* D-026-330 · el botón entero cambia de borde; el nombre no se subraya */

/* ─────────────────────────────────────────────────────────────────────────
   UN ENLACE QUE ADEMÁS ES UN COMPONENTE NO ES UN ENLACE.

   `.emr a` vale (0,1,1) de especificidad y `.emr-btn` solo (0,1,0), así que
   la regla de arriba le ganaba a la del botón y le ponía el texto MARINO
   SOBRE FONDO MARINO: contraste 1.00 : 1, un rectángulo azul macizo sin una
   sola letra. En `/staff` —la portada por la que entra todo el personal— eran
   cuatro: «Open my work», «Open client records», «Open the front desk board»
   y «Open administration». El texto estaba en el DOM; simplemente no se veía.

   `.emr-btn.suave` se salvó de casualidad, por llevar dos clases (0,2,0).
   Y al carril lateral le pasaba lo mismo: sus rótulos son `<a>` con
   `color: inherit`, que en la barra oscura debía heredar blanco y acababa
   heredando marino — 1.71 : 1, se leía solo el sitio donde ya estabas.

   Se arregla subiendo la especificidad de los componentes, no bajando la del
   enlace: hay cientos de enlaces normales que sí quieren ese color.
   ───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   Los iconos de la casa dentro del EMR.

   Las pantallas nuevas usaban emoji, que es lo que el propio `js/iconos.js`
   explica en su cabecera que no hay que hacer: un emoji no es un dibujo, es
   una letra que cada sistema dibuja a su manera. El mismo 🪪 sale de un color
   en un iPhone, de otro en Windows y como un cuadrado vacío en un navegador
   sin fuente de emoji. La pantalla parece hecha a trozos, y en una tarjeta
   junto a un logotipo dibujado a mano canta.

   Estos heredan el color del texto y son trazos, no imágenes: se ven igual a
   cualquier tamaño y en cualquier pantalla. Si el fichero de iconos no
   cargara, queda el hueco y el título de al lado sigue diciendo lo mismo.
   ───────────────────────────────────────────────────────────────────────── */
.emr .ic { width: 22px; height: 22px; flex: none; vertical-align: -.18em; }
.emr .ic-g { width: 26px; height: 26px; color: var(--emr-marino); }
/* En la tarjeta, el icono va dentro de un cuadro suave: le da peso sin
   competir con el título, que es lo que de verdad se lee. */
.emr .ic-caja {
    width: 42px; height: 42px; border-radius: 12px; display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--emr-panel-2, #F7F9FC); border: 1px solid var(--emr-borde, #DCE3EC);
    color: var(--emr-marino); margin-bottom: .55rem;
}

.emr a.emr-btn { color: #fff; }
.emr a.emr-btn.suave { color: var(--emr-marino); }
.emr a.rail-i { color: rgba(255, 255, 255, .78); }
.emr a.rail-i:hover, .emr a.rail-i.on { color: #fff; }

/* ── Barra del personal ───────────────────────────────────────────────── */
.emr-top {
    background: var(--emr-navy); color: #fff;
    padding: .75rem 1.4rem;
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.emr-top .marca { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.emr-top a { color: rgba(255,255,255,.78); font-size: .82rem; }
.emr-top a:hover { color: #fff; text-decoration: none; }
.emr-top .der { margin-left: auto; display: flex; gap: 1rem; align-items: center; }

/* ── Títulos que contienen datos, no prosa ────────────────────────────
   Un título del EMR casi siempre lleva dentro algo que vino de la base:
   un nombre, un código, y —cuando no hay ficha de empleado— un correo
   entero. Un correo no tiene espacios donde partir, así que sin esto se
   sale de la pantalla y arrastra la página con él.

   Ya lo arreglé una vez solo para la cabecera del expediente y volvió a
   aparecer en el saludo de Home. Va aquí, para todos, porque el sitio
   correcto de la regla es donde no haya que repetirla. */
.emr h1, .emr h2, .emr .sub,
.emr-ficha h1, .emr-ficha .sub { overflow-wrap: anywhere; }

/* ── Lo que se sale de la pantalla, en un solo sitio ───────────────────
   Dos causas explican todos los desbordamientos móviles que han ido
   apareciendo, y ninguna es de diseño:

   1. Texto que viene de la base y no tiene dónde partir — un correo, un
      código, un id. `.meta` es donde más aparece.
   2. Un control de formulario cuyo contenido es más ancho que su hueco:
      un <select> con opciones largas empuja la página entera.

   Van con `body` delante a propósito. Muchas pantallas traen su propio
   <style> DESPUÉS del enlace a esta hoja; con la misma especificidad
   ganarían ellas. Con `body` gana esta regla sin usar !important, que
   sería peor: !important no se puede desactivar cuando haga falta. */
body .meta, body .hint { overflow-wrap: anywhere; }
body input, body select, body textarea { max-width: 100%; }
/* Los hijos de un grid o un flex traen `min-width:auto`, así que no
   encogen por debajo de su contenido. Es el mismo fallo que ya apareció
   en My Work, en el asistente y en Home. */
body select, body input { min-width: 0; }

/* 3. Una tabla de ocho columnas no cabe en un teléfono y no debe intentarlo:
      apretarla la vuelve ilegible. Lo que se hace es dejar que se
      desplace DENTRO de su caja, no que empuje la página entera.

      Va sobre el contenedor con `overflow-x:auto` en vez de sobre la
      tabla porque una tabla no puede tener scroll propio. Y se limita a
      los contenedores conocidos del EMR para no volver desplazable
      cualquier div del sitio público por accidente. */
@media (max-width: 900px) {
    body #panel, body #lista, body #detalle, body .tarjeta, body .emr-card {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    body #panel > table, body #lista > table, body #detalle > table,
    body .tarjeta > table, body .emr-card > table { min-width: 560px; }
    /* Y si la tabla NO es hija directa —hay un div de por medio, que es lo
       normal— la regla de arriba no la alcanza y sus 560px estiraban la
       página entera: se veía la ficha del cliente con scroll lateral. Que
       cada tabla se contenga a sí misma cubre los dos casos. */
    body .emr-card table, body .tarjeta table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
        max-width: 100%; min-width: 0;
    }
}

/* ── Búsqueda global ──────────────────────────────────────────────────
   Centrada y ancha, no un icono escondido en una esquina: es la forma más
   rápida de llegar a cualquier sitio y tiene que verse desde el primer día,
   sin que nadie la descubra por casualidad. */
.emr-busca { position: relative; flex: 1 1 260px; max-width: 460px; margin-left: 1rem; }
.emr-busca-ic { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: rgba(255,255,255,.55); pointer-events: none; }
.emr-busca-ic svg { width: 16px; height: 16px; display: block; }
.emr-busca input {
    width: 100%; box-sizing: border-box; padding: .45rem 2.2rem .45rem 2.1rem;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px; color: #fff; font: inherit; font-size: .84rem;
}
.emr-busca input::placeholder { color: rgba(255,255,255,.5); }
.emr-busca input:focus { outline: none; background: rgba(255,255,255,.16); border-color: var(--emr-oro, #C9A227); }
.emr-busca input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.emr-busca-kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    font-size: .68rem; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px; padding: 0 .3rem; pointer-events: none; }
.emr-busca input:focus ~ .emr-busca-kbd { opacity: 0; }

.emr-busca-res {
    position: absolute; top: calc(100% + .45rem); left: 0; right: 0; z-index: 60;
    background: #fff; color: var(--emr-tinta, #22303C);
    border: 1px solid var(--emr-borde, #E2E9F3); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(14,33,64,.22);
    max-height: 62vh; overflow-y: auto; padding: .35rem;
}
.emr-busca-g { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--emr-tinta-3, #5A6A80); padding: .5rem .7rem .2rem; font-weight: 700; }
.emr-busca-i { display: block; padding: .45rem .7rem; border-radius: 8px; text-decoration: none; color: inherit; }
.emr-busca-i b { display: block; font-size: .86rem; font-weight: 600; }
.emr-busca-i span { display: block; font-size: .74rem; color: var(--emr-tinta-3, #5A6A80); }
/* `.on` para el teclado y `:hover` para el ratón pintan igual: quien va con
   flechas tiene que ver exactamente lo mismo que quien va con el ratón. */
.emr-busca-i:hover, .emr-busca-i.on { background: var(--emr-fondo-2, #F1F4F9); }
.emr-busca-i.on { box-shadow: inset 2px 0 0 var(--emr-oro, #C9A227); }
.emr-busca-nada { padding: .9rem .8rem; font-size: .84rem; color: var(--emr-tinta-3, #5A6A80); }
.emr-busca-nada span { display: block; margin-top: .3rem; font-size: .74rem; }

/* En un móvil la barra ya lleva marca y cuenta; la búsqueda baja a su
   propia línea en vez de aplastar a las otras dos. */
@media (max-width: 720px) {
    .emr-busca { order: 3; flex-basis: 100%; max-width: none; margin: .5rem 0 0; }
    .emr-busca-kbd { display: none; }
}

/* ── Cabecera fija del expediente ─────────────────────────────────────── */
.emr-ficha {
    background: var(--emr-panel);
    border-bottom: 1px solid var(--emr-borde);
}
.emr-ficha-in {
    max-width: 1240px; margin: 0 auto; padding: 1.3rem 1.4rem .9rem;
    display: grid; grid-template-columns: auto 1fr auto; gap: 1.3rem; align-items: start;
}
.emr-avatar {
    width: 62px; height: 62px; border-radius: 16px; flex: none;
    background: linear-gradient(140deg, var(--emr-marino), var(--emr-marino-osc));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em;
}
.emr-ficha h1 { font-size: 1.42rem; font-weight: 800; }
.emr-ficha .sub { color: var(--emr-tinta-3); font-size: .84rem; margin-top: .15rem; }

/* Los datos de identidad van como pares etiqueta/valor: en una ficha
   clínica el rótulo importa tanto como el dato, porque nadie recuerda si el
   segundo número era unidades restantes o unidades usadas. */
.emr-datos { display: flex; flex-wrap: wrap; gap: .1rem 1.6rem; margin-top: .75rem; }
.emr-dato { min-width: 92px; }
.emr-dato dt { font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; color: var(--emr-tinta-3); font-weight: 700; }
.emr-dato dd { margin: 0; font-size: .88rem; font-weight: 600; color: var(--emr-tinta); }

.emr-acciones { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }

/* ── Navegación del expediente ────────────────────────────────────────── */
.emr-nav { background: var(--emr-panel); border-bottom: 1px solid var(--emr-borde); overflow-x: auto; }
.emr-nav-in { max-width: 1240px; margin: 0 auto; padding: 0 1.4rem; display: flex; gap: .2rem; }
.emr-nav a {
    padding: .7rem .85rem; font-size: .84rem; font-weight: 600; color: var(--emr-tinta-2);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.emr-nav a:hover { color: var(--emr-marino); text-decoration: none; background: var(--emr-panel-2); }
.emr-nav a[aria-current="page"] { color: var(--emr-marino); border-bottom-color: var(--emr-marino); }

/* ── Cuerpo ───────────────────────────────────────────────────────────── */
.emr-env { max-width: 1240px; margin: 0 auto; padding: 1.4rem; }
.emr-3col { display: grid; grid-template-columns: 300px 1fr 320px; gap: 1.1rem; align-items: start; }

.emr-card {
    background: var(--emr-panel); border: 1px solid var(--emr-borde);
    border-radius: var(--emr-r); box-shadow: var(--emr-sombra);
    padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.emr-card > h2 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--emr-tinta-3); font-weight: 700; margin-bottom: .7rem;
}
.emr-card .vacio { color: var(--emr-tinta-3); font-size: .84rem; font-style: italic; }

/* ── Etiquetas de estado ──────────────────────────────────────────────── */
.emr-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: .18rem .55rem; border-radius: 999px; border: 1px solid;
    background: var(--emr-off-bg); color: var(--emr-off); border-color: var(--emr-off-bd);
}
.emr-chip.ok    { background: var(--emr-ok-bg);    color: var(--emr-ok);    border-color: var(--emr-ok-bd); }
.emr-chip.aviso { background: var(--emr-aviso-bg); color: var(--emr-aviso); border-color: var(--emr-aviso-bd); }
.emr-chip.mal   { background: var(--emr-mal-bg);   color: var(--emr-mal);   border-color: var(--emr-mal-bd); }
.emr-chip.sup   { background: var(--emr-sup-bg);   color: var(--emr-sup);   border-color: var(--emr-sup-bd); }

/* ── Veredictos: la respuesta a "¿puedo dar servicio?" y "¿puedo cobrar?" ─ */
.emr-veredicto {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .8rem; border-radius: var(--emr-r-s); border: 1px solid;
    font-size: .85rem; font-weight: 700; margin-bottom: .5rem;
}
.emr-veredicto.ok    { background: var(--emr-ok-bg);    color: var(--emr-ok);    border-color: var(--emr-ok-bd); }
.emr-veredicto.aviso { background: var(--emr-aviso-bg); color: var(--emr-aviso); border-color: var(--emr-aviso-bd); }
.emr-veredicto.mal   { background: var(--emr-mal-bg);   color: var(--emr-mal);   border-color: var(--emr-mal-bd); }

/* ── Alertas: severidad a la izquierda, acción a la derecha ───────────── */
.emr-alerta {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .55rem .7rem; border-radius: var(--emr-r-s);
    border: 1px solid var(--emr-borde); border-left: 3px solid var(--emr-off);
    background: var(--emr-panel-2); font-size: .83rem; margin-bottom: .45rem;
}
.emr-alerta.red   { border-left-color: var(--emr-mal);   background: var(--emr-mal-bg);   border-color: var(--emr-mal-bd); }
.emr-alerta.amber { border-left-color: var(--emr-aviso); background: var(--emr-aviso-bg); border-color: var(--emr-aviso-bd); }
.emr-alerta a { font-weight: 700; white-space: nowrap; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.emr-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--emr-marino); background: var(--emr-marino); color: #fff;
    border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.emr-btn:hover { background: var(--emr-marino-osc); border-color: var(--emr-marino-osc); text-decoration: none; }
.emr-btn.suave { background: var(--emr-panel-2); color: var(--emr-marino); border-color: var(--emr-borde-fuerte); }
.emr-btn.suave:hover { background: #E9EFF8; }
.emr-btn.peq { padding: .28rem .7rem; font-size: .74rem; }
.emr-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Listas y tablas ──────────────────────────────────────────────────── */
.emr-fila {
    display: flex; gap: .7rem; align-items: baseline; justify-content: space-between;
    padding: .5rem 0; border-bottom: 1px solid var(--emr-borde);
    font-size: .85rem;
}
.emr-fila:last-child { border-bottom: 0; }
.emr-fila .meta { color: var(--emr-tinta-3); font-size: .76rem; }

.emr-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.emr-tabla th {
    text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--emr-tinta-3); font-weight: 700; padding: .35rem .5rem; border-bottom: 1px solid var(--emr-borde-fuerte);
}
.emr-tabla td { padding: .45rem .5rem; border-bottom: 1px solid var(--emr-borde); vertical-align: top; }
.emr-tabla tr:last-child td { border-bottom: 0; }
.emr-num { font-variant-numeric: tabular-nums; }

/* ── Estados de la página: vacío, cargando, error ─────────────────────── */
.emr-estado {
    text-align: center; padding: 2.6rem 1.4rem; color: var(--emr-tinta-3); font-size: .9rem;
}
.emr-estado h3 { color: var(--emr-tinta); font-size: 1rem; margin-bottom: .35rem; }
.emr-estado.error { color: var(--emr-mal); }

/* ── Franja de seguridad: lo que un RBT tiene que ver antes de nada ───── */
.emr-safety {
    background: var(--emr-mal-bg); border-bottom: 1px solid var(--emr-mal-bd);
    color: var(--emr-mal); font-size: .83rem; font-weight: 700;
}
.emr-safety .in { max-width: 1240px; margin: 0 auto; padding: .5rem 1.4rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* ── La cadena operativa ──────────────────────────────────────────────── */
.emr .sp-resumen {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1.1rem;
}
.emr .sp-kpi {
    background: var(--emr-panel); border: 1px solid var(--emr-borde); border-radius: var(--emr-r);
    padding: .85rem 1rem; box-shadow: var(--emr-sombra); display: flex; flex-direction: column;
}
.emr .sp-kpi b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.emr .sp-kpi span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--emr-tinta-3); font-weight: 700; }
.emr .sp-kpi.mal { border-color: var(--emr-mal-bd); background: var(--emr-mal-bg); }
.emr .sp-kpi.mal b { color: var(--emr-mal); }
.emr .sp-kpi.ok { border-color: var(--emr-ok-bd); background: var(--emr-ok-bg); }
.emr .sp-kpi.ok b { color: var(--emr-ok); }

.emr .sp-ses {
    background: var(--emr-panel); border: 1px solid var(--emr-borde);
    border-left: 4px solid var(--emr-borde-fuerte);
    border-radius: var(--emr-r); padding: .9rem 1.05rem; margin-bottom: .7rem;
    box-shadow: var(--emr-sombra);
}
.emr .sp-ses.mal { border-left-color: var(--emr-mal); }
.emr .sp-ses.aviso { border-left-color: var(--emr-aviso); }
.emr .sp-ses.ok { border-left-color: var(--emr-ok); }
.emr .sp-ses-cab { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.emr .sp-cuando { min-width: 118px; }
.emr .sp-cuando b { display: block; font-size: .95rem; }
.emr .sp-que { flex: 1 1 220px; font-size: .9rem; }
.emr .sp-ses-cab > .emr-chip { margin-left: auto; }

/* La cadena: seis puntos unidos por una línea. Se lee de un vistazo dónde
   se paró una sesión, que es la pregunta que se hace todos los días.
   El color nunca va solo: cada punto lleva su palabra debajo. */
.emr .sp-cadena {
    display: flex; list-style: none; margin: .9rem 0 0; padding: 0; gap: 0;
    overflow-x: auto;
}
.emr .sp-paso {
    flex: 1 1 0; min-width: 74px; position: relative; text-align: center;
    font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--emr-tinta-3); padding-top: 1.5rem;
}
.emr .sp-paso::before {                    /* la línea que une con el anterior */
    content: ''; position: absolute; top: 8px; left: -50%; width: 100%; height: 2px;
    background: var(--emr-borde-fuerte);
}
.emr .sp-paso:first-child::before { display: none; }
.emr .sp-punto {
    position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--emr-panel); border: 2px solid var(--emr-borde-fuerte);
}
.emr .sp-paso.ok    { color: var(--emr-ok); }
.emr .sp-paso.ok .sp-punto    { background: var(--emr-ok); border-color: var(--emr-ok); }
.emr .sp-paso.ok::before      { background: var(--emr-ok); }
.emr .sp-paso.listo { color: var(--emr-marino); }
.emr .sp-paso.listo .sp-punto { background: var(--emr-marino); border-color: var(--emr-marino); }
.emr .sp-paso.aviso { color: var(--emr-aviso); }
.emr .sp-paso.aviso .sp-punto { background: var(--emr-aviso-bg); border-color: var(--emr-aviso); }
.emr .sp-paso.mal   { color: var(--emr-mal); }
.emr .sp-paso.mal .sp-punto   { background: var(--emr-mal); border-color: var(--emr-mal); }
.emr .sp-paso.na    { opacity: .38; }
.emr .sp-paso.espera .sp-punto { border-style: dashed; }

.emr .sp-avisos { margin-top: .7rem; display: flex; gap: .3rem; flex-wrap: wrap; }
/* Una sola acción, la que desbloquea. Cinco botones a la vez le devuelven
   la decisión a quien vino buscando qué hacer. */
.emr .sp-accion {
    display: inline-block; margin-top: .75rem; font-size: .82rem; font-weight: 700;
    padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--emr-marino);
    color: var(--emr-marino); background: var(--emr-panel-2);
}
.emr .sp-accion:hover { background: var(--emr-marino); color: #fff; text-decoration: none; }
.emr .sp-accion.mal { border-color: var(--emr-mal); color: var(--emr-mal); background: var(--emr-mal-bg); }
.emr .sp-accion.mal:hover { background: var(--emr-mal); color: #fff; }
.emr .sp-accion.aviso { border-color: var(--emr-aviso); color: var(--emr-aviso); background: var(--emr-aviso-bg); }
.emr .sp-accion.aviso:hover { background: var(--emr-aviso); color: #fff; }
.emr .sp-accion.ok { border-color: var(--emr-ok); color: var(--emr-ok); background: var(--emr-ok-bg); }
.emr .sp-accion.ok:hover { background: var(--emr-ok); color: #fff; }

@media (max-width: 700px) {
    .emr .sp-resumen { grid-template-columns: repeat(2, 1fr); }
    .emr .sp-ses-cab > .emr-chip { margin-left: 0; }
}

/* ── Centro de documentos: carpetas ───────────────────────────────────── */
.emr .emr-logo { border-radius: 6px; flex: none; }
.emr .emr-top .marca b { font-weight: 500; opacity: .8; }

.emr .doc-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: .9rem;
}
/* La carpeta es un objetivo grande y tocable, no un enlace de texto. En un
   teléfono se maneja con el pulgar; en un escritorio se ve el armario
   entero de un vistazo. */
.emr .doc-folder {
    display: flex; flex-direction: column; gap: .15rem;
    background: var(--emr-panel); border: 1px solid var(--emr-borde);
    border-radius: 16px; padding: 1.1rem 1.15rem 1rem;
    box-shadow: var(--emr-sombra); text-decoration: none; color: inherit;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, border-color .2s;
    min-height: 148px;
}
.emr .doc-folder:hover { transform: translateY(-3px); box-shadow: var(--emr-sombra-alta); text-decoration: none; border-color: var(--emr-borde-fuerte); }
.emr .doc-folder:active { transform: translateY(0); }
.emr .doc-folder.alerta { border-color: var(--emr-mal-bd); }
.emr .doc-folder-ico { color: var(--emr-marino); }
.emr .doc-folder-ico svg { width: 30px; height: 30px; }
.emr .doc-folder-nom { font-weight: 700; font-size: .95rem; margin-top: .5rem; letter-spacing: -.01em; }
.emr .doc-folder-n {
    font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
    color: var(--emr-marino); font-variant-numeric: tabular-nums;
}
.emr .doc-folder-pie { margin-top: auto; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* ── Dentro de una carpeta ────────────────────────────────────────────── */
.emr .doc-cabecera { margin-bottom: 1rem; }
.emr .doc-atras { font-size: .82rem; font-weight: 600; color: var(--emr-tinta-3); }
.emr .doc-atras:hover { color: var(--emr-marino); text-decoration: none; }
.emr .doc-cabecera h2 { font-size: 1.5rem; font-weight: 800; margin-top: .2rem; }

.emr .doc-semana-nav {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    background: var(--emr-panel); border: 1px solid var(--emr-borde);
    border-radius: var(--emr-r); padding: .6rem .75rem; box-shadow: var(--emr-sombra);
    margin-bottom: .8rem;
}
.emr .doc-paso {
    width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
    border: 1px solid var(--emr-borde-fuerte); background: var(--emr-panel-2);
    color: var(--emr-marino); font-size: 1.15rem; line-height: 1; font-weight: 700;
}
.emr .doc-paso:hover { background: #E9EFF8; }
.emr .doc-semana-tit { display: flex; flex-direction: column; min-width: 168px; }
.emr .doc-semana-tit b { font-size: .95rem; }
.emr .doc-rango { position: relative; }
.emr .doc-rango summary { list-style: none; cursor: pointer; }
.emr .doc-rango summary::-webkit-details-marker { display: none; }
.emr .doc-rango-in {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20;
    background: var(--emr-panel); border: 1px solid var(--emr-borde-fuerte);
    border-radius: var(--emr-r); box-shadow: var(--emr-sombra-alta);
    padding: .8rem; display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap;
}
.emr .doc-sub { margin-bottom: 1rem; }

.emr .doc-bloque { margin-bottom: 1.4rem; }
.emr .doc-bloque-tit {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--emr-tinta-3); font-weight: 700; margin-bottom: .55rem;
    display: flex; align-items: center; gap: .4rem;
}
.emr .doc-item {
    background: var(--emr-panel); border: 1px solid var(--emr-borde);
    border-radius: var(--emr-r); padding: .8rem .95rem; margin-bottom: .55rem;
    box-shadow: var(--emr-sombra);
}
/* Cuando la tarjeta es un enlace tiene que parecerlo — pero sin subrayado
   azul: es una ficha, no una frase. Lo que dice "esto se abre" es que se
   levanta al pasar por encima, y el foco visible para quien va con teclado. */
.emr a.doc-item-link { display: block; color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.emr a.doc-item-link:hover { border-color: var(--emr-oro, #C9A227); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,33,64,.10); }
.emr a.doc-item-link:focus-visible { outline: 2px solid var(--emr-oro, #C9A227); outline-offset: 3px; }
.emr .doc-item-cab { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.emr .doc-item-cab b { font-size: .92rem; }
.emr .doc-item-fecha { font-size: .78rem; color: var(--emr-tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emr .doc-item-chips { margin-top: .45rem; display: flex; gap: .3rem; flex-wrap: wrap; }

/* ── Centro de documentos ─────────────────────────────────────────────── */
.emr .doc-filtros { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.emr .doc-in {
    font: inherit; font-size: .84rem; padding: .38rem .6rem;
    border: 1px solid var(--emr-borde-fuerte); border-radius: var(--emr-r-s);
    background: var(--emr-panel); color: var(--emr-tinta);
}
.emr .doc-in[type="search"] { min-width: 220px; flex: 1 1 220px; }
.emr .doc-in:focus { outline: 2px solid var(--emr-marino); outline-offset: 1px; }
.emr .doc-lab { font-size: .72rem; color: var(--emr-tinta-3); font-weight: 700;
                text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .35rem; }
.emr .doc-sep { flex: 1 1 auto; }

/* La cabecera de la semana es un botón de ancho completo: el objetivo de
   pulsación es la fila entera, no una flechita de doce píxeles. */
.emr .doc-semana { padding: 0; overflow: hidden; }
.emr .doc-cab {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    background: none; border: 0; cursor: pointer; text-align: left;
    padding: .85rem 1.1rem; font: inherit; font-size: .9rem; color: var(--emr-tinta);
}
.emr .doc-cab:hover { background: var(--emr-panel-2); }
.emr .doc-cab[aria-expanded="true"] { border-bottom: 1px solid var(--emr-borde); }
.emr .doc-flecha { color: var(--emr-tinta-3); font-size: .8rem; width: 12px; }
.emr .doc-resumen { margin-left: auto; display: flex; gap: .3rem; align-items: center; }
.emr .doc-cuerpo { padding: .3rem 1.1rem 1rem; }

@media (max-width: 700px) {
    .emr .doc-in[type="search"] { min-width: 100%; }
    .emr .doc-resumen { width: 100%; margin: .4rem 0 0; }
    .emr .doc-cab { flex-wrap: wrap; }
    /* En un móvil la tabla no cabe: se desliza en su propio carril en vez de
       empujar la página entera hacia la derecha. */
    .emr .doc-cuerpo { overflow-x: auto; }
}

/* ── Móvil ────────────────────────────────────────────────────────────── */
/* Ficha + columna: dos columnas en escritorio (about), una en móvil. La
   plantilla iba en un style= en línea y el media query no la podía tocar:
   en un iPhone quedaban 340px de ficha y cero para el resto. */
.emr-3col.emr-2col-ancha { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
@media (max-width: 1080px) {
    .emr-3col { grid-template-columns: 1fr; }
    .emr-3col.emr-2col-ancha { grid-template-columns: 1fr; }
    .emr-ficha-in { grid-template-columns: auto 1fr; }
    .emr-acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 560px) {
    .emr-ficha-in { grid-template-columns: 1fr; }
    .emr-avatar { width: 48px; height: 48px; font-size: 1.1rem; border-radius: 13px; }
    .emr-ficha h1 { font-size: 1.2rem; }
}

/* ── Impresión: un expediente tiene que poder salir en papel ──────────── */
@media print {
    .emr-top, .emr-nav, .emr-acciones, .emr-btn { display: none !important; }
    .emr { background: #fff; font-size: 11pt; }
    .emr-card { box-shadow: none; border-color: #999; break-inside: avoid; }
    .emr-3col { grid-template-columns: 1fr 1fr; }
}

/* ── Calendario de la semana ──────────────────────────────────────────── */
.emr .cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.emr .cal-dia {
    background: var(--emr-panel); border: 1px solid var(--emr-borde);
    border-radius: var(--emr-r); padding: .55rem; min-height: 130px;
}
/* El día de hoy se marca con el color de marca, no con un fondo chillón:
   la semana tiene que leerse entera, no competir consigo misma. */
.emr .cal-dia.hoy { border-color: var(--emr-marino); box-shadow: inset 0 2px 0 var(--emr-marino); }
.emr .cal-dia-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .45rem; }
.emr .cal-dia-cab b { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.emr .cal-dia-cab span { font-size: .7rem; color: var(--emr-tinta-3); }
.emr .cal-ev {
    display: block; border-radius: var(--emr-r-s); padding: .4rem .5rem; margin-bottom: .35rem;
    background: var(--emr-panel-2); border-left: 3px solid var(--emr-borde-fuerte);
    font-size: .74rem; color: inherit; text-decoration: none;
}
.emr .cal-ev:hover { background: #E9EFF8; text-decoration: none; }
.emr .cal-ev.ok    { border-left-color: var(--emr-ok);    background: var(--emr-ok-bg); }
.emr .cal-ev.aviso { border-left-color: var(--emr-aviso); background: var(--emr-aviso-bg); }
.emr .cal-ev.mal   { border-left-color: var(--emr-mal);   background: var(--emr-mal-bg); }
.emr .cal-ev.na    { opacity: .5; }
.emr .cal-ev b { display: block; font-variant-numeric: tabular-nums; }
.emr .cal-cpt { font-weight: 700; }
.emr .cal-quien { display: block; color: var(--emr-tinta-3); }
.emr .cal-vacio { color: var(--emr-tinta-3); text-align: center; margin: .6rem 0 0; }

@media (max-width: 900px) {
    /* En un teléfono siete columnas son ilegibles: la semana pasa a ser una
       lista de días, que es como se lee una agenda en la mano. */
    .emr .cal-rejilla { grid-template-columns: 1fr; }
    .emr .cal-dia { min-height: 0; }
    .emr .cal-dia-cab { border-bottom: 1px solid var(--emr-borde); padding-bottom: .3rem; }
}

/* ── La barra de la aplicación ────────────────────────────────────────── */
.emr .emr-marca-link { display: flex; align-items: center; gap: .6rem; color: inherit; }
.emr .emr-marca-link:hover { text-decoration: none; }
.emr .emr-top-navs { display: flex; gap: .15rem; margin-left: .8rem; flex-wrap: wrap; }
.emr .emr-top-nav {
    padding: .38rem .8rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    color: rgba(255,255,255,.78);
}
.emr .emr-top-nav:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.emr .emr-top-nav.on { background: rgba(255,255,255,.16); color: #fff; }

/* Quién ha entrado, arriba a la derecha. En un sistema con datos de niños,
   saber de un vistazo con qué cuenta estás mirando no es un adorno. */
.emr .emr-cuenta { position: relative; }
.emr .emr-cuenta summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.emr .emr-cuenta summary::-webkit-details-marker { display: none; }
/* Chromium moderno ignora list-style aquí y pinta un ▶ pegado a la
   inicial. El marcador estándar es ::marker, no el de -webkit. */
.emr .emr-cuenta summary::marker { display: none; }
.emr .emr-cara { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.emr .emr-cara.ini {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.18); color: #fff; font-size: .72rem; font-weight: 800;
}
.emr .emr-cuenta-nom { color: #fff; font-size: .84rem; font-weight: 600; }
.emr .emr-cuenta-menu {
    position: absolute; right: 0; top: calc(100% + .55rem); z-index: 50; min-width: 246px; max-width: min(340px, calc(100vw - 1rem));
    max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--emr-panel); border: 1px solid var(--emr-borde-fuerte);
    border-radius: var(--emr-r); box-shadow: var(--emr-sombra-alta); overflow-x: hidden;
}
.emr .emr-cuenta-cab { padding: .85rem 1rem; border-bottom: 1px solid var(--emr-borde); background: var(--emr-panel-2); }
.emr .emr-cuenta-cab b { display: block; color: var(--emr-tinta); font-size: .9rem; }
.emr .emr-cuenta-cab .emr-cara.grande { width: 56px; height: 56px; margin-bottom: .5rem; display: block; }
.emr .emr-cuenta-cab .meta { display: block; overflow-wrap: anywhere; color: var(--emr-tinta-2); font-size: .78rem; }
.emr .emr-cuenta-cab .emr-cuenta-acceso { font-size: .72rem; color: var(--emr-tinta-3, var(--emr-tinta-2)); margin-top: .3rem; }
.emr .emr-cuenta-papeles { margin-top: .45rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.emr .emr-cuenta-menu a {
    display: block; padding: .6rem 1rem; color: var(--emr-tinta-2); font-size: .86rem; font-weight: 600;
    border-top: 1px solid var(--emr-borde);
}
.emr .emr-cuenta-menu a:first-of-type { border-top: 0; }
.emr .emr-cuenta-menu .emr-cuenta-grupo { display: block; padding: .55rem 1rem .2rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--emr-tinta-3); border-top: 1px solid var(--emr-borde); }
.emr .emr-cuenta-menu .emr-cuenta-grupo + a { border-top: 0; }
.emr .emr-cuenta-menu a:hover { background: var(--emr-panel-2); color: var(--emr-marino); text-decoration: none; }
.emr .emr-cuenta-menu a.salir { color: var(--emr-mal); }
.emr .emr-cuenta-menu a.salir:hover { background: var(--emr-mal-bg); color: var(--emr-mal); }

/* ── Panel de Clinical Records ────────────────────────────────────────── */
.emr .cr-hero {
    background: linear-gradient(135deg, var(--emr-navy), var(--emr-marino) 65%, var(--emr-marino-osc));
    color: #fff; padding: 1.6rem 1.4rem 1.5rem;
}
.emr .cr-hero-in { max-width: 1240px; margin: 0 auto; }
.emr .cr-hero h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.emr .cr-hero p { color: rgba(255,255,255,.72); font-size: .9rem; margin: .25rem 0 0; }
.emr .cr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-top: 1.1rem; }
.emr .cr-kpi {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--emr-r); padding: .75rem .9rem;
}
.emr .cr-kpi b { display: block; font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.emr .cr-kpi span { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.7); font-weight: 700; }
/* Un KPI en rojo tiene que leerse desde la puerta. La versión anterior era
   tan tenue sobre el marino que "2 devueltas" y "0 devueltas" parecían la
   misma tarjeta — y el número que avisa es justamente el que no se puede
   confundir con los demás. */
.emr .cr-kpi.mal {
    background: rgba(255,110,110,.2); border-color: rgba(255,160,160,.55);
    box-shadow: inset 3px 0 0 #ff8f8f;
}
.emr .cr-kpi.mal b { color: #ffdcdc; }
.emr .cr-kpi.mal span { color: rgba(255,225,225,.9); }

.emr .cr-sec {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--emr-tinta-3); font-weight: 700; margin: 1.5rem 0 .8rem;
}
.emr .cr-sec:first-child { margin-top: .2rem; }

/* Rejilla de niños: la cara primero. Un expediente se abre por la persona,
   no por su número de historia — aunque el número esté ahí debajo para
   quien lo necesite. */
.emr .cli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: .8rem; }
.emr .cli-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--emr-panel); border: 1px solid var(--emr-borde); border-radius: 16px;
    padding: 1.1rem .8rem .9rem; box-shadow: var(--emr-sombra); color: inherit;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, border-color .2s;
}
.emr .cli-tile:hover { transform: translateY(-3px); box-shadow: var(--emr-sombra-alta); text-decoration: none; }
.emr .cli-tile.alerta { border-color: var(--emr-mal-bd); }
.emr .cli-cara {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--emr-marino), var(--emr-marino-osc)); color: #fff;
    font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .6rem;
}
.emr .cli-nom { font-size: .92rem; line-height: 1.3; }
.emr .cli-chips { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }
.emr .cli-prox { margin-top: .45rem; font-size: .72rem; }

/* ── Ficha de identidad del cliente ───────────────────────────────────── */
.emr .cli-id { text-align: center; }
.emr .cli-id-foto {
    width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
    margin: 0 auto .7rem; display: block; border: 3px solid var(--emr-panel);
    box-shadow: 0 0 0 1px var(--emr-borde-fuerte), var(--emr-sombra);
}
.emr .cli-id-foto.ini {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--emr-marino), var(--emr-marino-osc));
    color: #fff; font-size: 2.4rem; font-weight: 800;
}
.emr .cli-id h3 { font-size: 1.05rem; }
.emr .emr-avatar.foto { object-fit: cover; border-radius: 16px; }

/* ── El día, hora por hora ────────────────────────────────────────────── */
.emr .dia-rejilla {
    position: relative; background: var(--emr-panel); border: 1px solid var(--emr-borde);
    border-radius: var(--emr-r); box-shadow: var(--emr-sombra);
    padding: .5rem .5rem .5rem 58px; overflow: hidden;
}
.emr .dia-hora { position: absolute; left: 0; right: 0; border-top: 1px solid var(--emr-borde); }
.emr .dia-hora span {
    position: absolute; left: 8px; top: -8px; font-size: .68rem; font-weight: 700;
    color: var(--emr-tinta-3); background: var(--emr-panel); padding: 0 .25rem;
    font-variant-numeric: tabular-nums;
}
.emr .dia-pista { position: relative; height: 100%; }
.emr .dia-ev {
    position: absolute; left: 4px; right: 8px; overflow: hidden;
    border-radius: var(--emr-r-s); padding: .35rem .6rem;
    background: var(--emr-panel-2); border: 1px solid var(--emr-borde);
    border-left: 4px solid var(--emr-borde-fuerte);
    font-size: .76rem; color: inherit; text-decoration: none;
    display: flex; flex-direction: column; gap: .1rem;
}
.emr .dia-ev:hover { text-decoration: none; box-shadow: var(--emr-sombra); z-index: 3; }
.emr .dia-ev.ok    { border-left-color: var(--emr-ok);    background: var(--emr-ok-bg); }
.emr .dia-ev.aviso { border-left-color: var(--emr-aviso); background: var(--emr-aviso-bg); }
.emr .dia-ev.mal   { border-left-color: var(--emr-mal);   background: var(--emr-mal-bg); }
.emr .dia-ev.na    { opacity: .55; }
.emr .dia-ev span { color: var(--emr-tinta-3); }
.emr .dia-ev .emr-chip { align-self: flex-start; margin-top: .1rem; }

/* La hora actual. Rojo, fina y por encima de todo: es la única línea de
   esta pantalla que se mueve sola, y tiene que encontrarse sin buscarla. */
.emr .dia-ahora { position: absolute; left: 46px; right: 0; height: 0; border-top: 2px solid #D8342F; z-index: 5; }
.emr .dia-ahora span {
    position: absolute; left: -6px; top: -5px; width: 10px; height: 10px;
    border-radius: 50%; background: #D8342F;
}

/* ═══════════════════════════════════════════════════════════════════════
   Calendario: día · semana · mes · año
   -----------------------------------------------------------------------
   Cuatro niveles de zoom sobre los mismos eventos. Las pestañas se quedan
   fijas arriba porque cambiar de zoom es el gesto más repetido de esta
   pantalla, y bajar a buscarlo cada vez rompe el hilo de lo que estabas
   mirando.
   ═══════════════════════════════════════════════════════════════════════ */
.sv-tabs {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    margin: 0 0 1rem; padding: .3rem; border-radius: 12px;
    background: var(--emr-fondo2, #eef1f7); border: 1px solid var(--emr-linea, #dbe1ec);
}
.sv-tab {
    padding: .42rem .85rem; border-radius: 9px; text-decoration: none;
    font-size: .84rem; font-weight: 700; letter-spacing: .01em;
    color: var(--emr-tinta2, #5b6478); transition: background .15s, color .15s;
}
.sv-tab:hover { background: rgba(30, 66, 144, .07); color: var(--emr-marino, #1E4290); }
.sv-tab.on {
    background: #fff; color: var(--emr-marino, #1E4290);
    box-shadow: 0 1px 2px rgba(16, 30, 62, .1), 0 2px 8px rgba(16, 30, 62, .06);
}
.sv-tab.flujo { margin-left: auto; color: var(--emr-marino, #1E4290); }

/* ── El mes ──────────────────────────────────────────────────────────── */
.mes-rejilla {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: var(--emr-linea, #dbe1ec); border: 1px solid var(--emr-linea, #dbe1ec);
    border-radius: 14px; overflow: hidden;
}
.mes-cab {
    background: var(--emr-fondo2, #eef1f7); padding: .5rem .6rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--emr-tinta2, #5b6478);
}
.mes-cel {
    display: block; min-height: 104px; padding: .4rem .45rem;
    background: #fff; text-decoration: none; color: inherit;
    transition: background .12s;
}
.mes-cel:hover { background: #f6f8fc; }
.mes-cel.fuera { background: #fafbfd; }
.mes-cel.fuera .mes-num { color: #b6bdcb; }
.mes-cel.hoy { box-shadow: inset 0 0 0 2px var(--emr-marino, #1E4290); }
.mes-num { display: block; font-size: .82rem; font-weight: 700; color: var(--emr-tinta2, #5b6478); }
.mes-cel.hoy .mes-num { color: var(--emr-marino, #1E4290); }
.mes-lista { display: flex; flex-direction: column; gap: 2px; margin-top: .3rem; }
.mes-pt {
    display: block; padding: .16rem .34rem; border-radius: 5px;
    font-size: .68rem; line-height: 1.25; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    background: var(--emr-fondo2, #eef1f7); color: var(--emr-tinta2, #5b6478);
    border-left: 3px solid #aab2c2;
}
.mes-pt b { font-weight: 800; }
.mes-pt.ok    { background: var(--emr-ok-bg, #e8f6ee);   color: #14603a; border-left-color: var(--emr-ok, #1a7f4b); }
.mes-pt.aviso { background: var(--emr-aviso-bg, #fdf3e0); color: #7a5210; border-left-color: var(--emr-aviso, #b47912); }
.mes-pt.mal   { background: var(--emr-mal-bg, #fdeaea);  color: #8d1f1f; border-left-color: var(--emr-mal, #b42323); }
.mes-mas { font-size: .66rem; font-weight: 700; color: var(--emr-tinta2, #5b6478); padding-left: .34rem; }

/* ── El año ──────────────────────────────────────────────────────────── */
.anio-rejilla {
    display: grid; gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.anio-mes {
    display: block; padding: .7rem .75rem; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--emr-linea, #dbe1ec); border-radius: 12px;
    transition: box-shadow .15s, transform .15s;
}
.anio-mes:hover { box-shadow: 0 6px 18px rgba(16, 30, 62, .1); transform: translateY(-1px); }
.anio-mes.vacio { opacity: .62; }
.anio-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .45rem; }
.anio-cab b { font-size: .84rem; font-weight: 800; }
.anio-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.anio-cel { display: block; aspect-ratio: 1; border-radius: 3px; background: #eef1f7; }
.anio-cel.fuera { background: transparent; }
.anio-cel.ok    { background: var(--emr-ok, #1a7f4b); }
.anio-cel.aviso { background: var(--emr-aviso, #b47912); }
.anio-cel.mal   { background: var(--emr-mal, #b42323); }
.anio-cel.plan  { background: #b9c6e4; }
.anio-cel.hoy   { box-shadow: 0 0 0 2px var(--emr-marino, #1E4290); }
.anio-leyenda {
    display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center;
    margin-top: .9rem; font-size: .76rem; color: var(--emr-tinta2, #5b6478);
}
.anio-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.anio-leyenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

@media (max-width: 720px) {
    /* En móvil el mes deja de ser una agenda legible y pasa a ser un mapa:
       el número y un punto de color por sesión. Meter texto de 11px en una
       celda de 45px no lo hace más útil, solo más sucio. */
    .mes-cel { min-height: 62px; padding: .3rem .25rem; }
    .mes-pt { font-size: 0; padding: 0; height: 5px; border-radius: 3px; border-left: 0; }
    .mes-pt.ok { background: var(--emr-ok, #1a7f4b); }
    .mes-pt.aviso { background: var(--emr-aviso, #b47912); }
    .mes-pt.mal { background: var(--emr-mal, #b42323); }
    .mes-mas { font-size: .6rem; padding: 0; }
    .anio-rejilla { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .sv-tab { padding: .38rem .6rem; font-size: .78rem; }
    .sv-tab.flujo { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   My Work · la bandeja de cada persona
   -----------------------------------------------------------------------
   Tarjetas anchas y con aire, no filas de tabla. Cada una es una decisión
   que alguien tiene que tomar, y una decisión merece más sitio que una
   celda. La barra de color a la izquierda es lo único que se lee de lejos:
   rojo = te lo devolvieron, ámbar = falta hacerlo, verde = cerrado.
   ═══════════════════════════════════════════════════════════════════════ */
.mw-sec { margin: 0 0 2rem; }
.mw-sec-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.mw-sec-cab h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.mw-cuenta {
    min-width: 26px; padding: .1rem .45rem; border-radius: 999px; text-align: center;
    font-size: .78rem; font-weight: 800;
    background: var(--emr-fondo2, #eef1f7); color: var(--emr-tinta2, #5b6478);
}
.mw-cuenta.mal { background: var(--emr-mal, #b42323); color: #fff; }
.mw-sec-sub { margin: 0 0 .8rem; max-width: 62ch; }
.mw-vacio {
    margin: .4rem 0 0; padding: .8rem 1rem; border-radius: 10px;
    background: var(--emr-fondo2, #eef1f7); color: var(--emr-tinta2, #5b6478); font-size: .86rem;
}
.mw-lista { display: grid; gap: .55rem; }
.mw-item {
    display: block; padding: .8rem 1rem .85rem 1.1rem; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--emr-linea, #dbe1ec); border-radius: 12px;
    border-left: 4px solid #aab2c2;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.mw-item:hover { box-shadow: 0 8px 22px rgba(16, 30, 62, .1); transform: translateY(-1px); }
.mw-item.mal   { border-left-color: var(--emr-mal, #b42323); }
.mw-item.aviso { border-left-color: var(--emr-aviso, #b47912); }
.mw-item.ok    { border-left-color: var(--emr-ok, #1a7f4b); }
.mw-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.mw-cab b { font-size: .95rem; font-weight: 700; }
.mw-fecha { font-size: .8rem; font-weight: 700; color: var(--emr-tinta2, #5b6478); white-space: nowrap; }
.mw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .35rem; }
/* El motivo del rechazo va en su propia caja: es texto escrito por otra
   persona sobre el trabajo de quien lee, y merece leerse como una cita, no
   como un pie de tarjeta. */
.mw-razon {
    margin: .55rem 0 0; padding: .5rem .7rem; border-radius: 8px;
    background: var(--emr-fondo2, #eef1f7); font-size: .85rem; line-height: 1.5;
}
.mw-item.mal .mw-razon { background: var(--emr-mal-bg, #fdeaea); color: #7d1c1c; }
.mw-quien { margin: .35rem 0 0; font-size: .76rem; }

/* Lista de pendientes dentro de una tarjeta de persona (My team). Es una
   sublista, no una tarjeta anidada: si cada pendiente fuera su propia
   tarjeta, una persona con ocho notas atrasadas llenaría la pantalla y
   escondería a las otras cinco personas del equipo. */
/* Firma de una enmienda dentro de My file. El texto completo va en un
   <details> cerrado: nadie lee cuatro cláusulas para enterarse de que le
   toca firmar, pero tiene que poder leerlas antes de hacerlo — y la
   casilla de "lo he leído" no sirve de nada si el texto no está a un clic. */
.mw-firma-det { margin: .6rem 0; }
.mw-firma-det summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--emr-navy, #16336E); }
.mw-firma-det p { font-size: .82rem; line-height: 1.6; margin: .5rem 0; }
.mw-firma-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem;
    padding-top: .6rem; border-top: 1px solid var(--emr-borde, #E2E9F3); }
.mw-firma-form label { font-size: .8rem; flex-basis: 100%; display: flex; gap: .4rem; align-items: flex-start; }
.mw-firma-form input[type=text] { flex: 1 1 200px; min-width: 0; padding: .4rem .6rem;
    border: 1px solid var(--emr-borde, #cdd6dd); border-radius: 8px; font: inherit; font-size: .84rem; }
.mw-firma-form .meta { flex-basis: 100%; }

.mw-sub { margin: .5rem 0 0; padding: 0 0 0 1rem; list-style: none; border-left: 2px solid var(--linea, #E1E8F2); }
.mw-sub li { font-size: .78rem; line-height: 1.5; padding: .1rem 0; }
.mw-sub a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.mw-sub a:hover { border-bottom-color: currentColor; }
.mw-hr { margin: .5rem 0 .7rem 1.1rem; padding: 0; line-height: 1.8; }
.mw-limpio {
    padding: 1.6rem 1.4rem; margin-bottom: 2rem; border-radius: 14px; text-align: center;
    background: var(--emr-ok-bg, #e8f6ee); border: 1px solid rgba(26, 127, 75, .25);
}
.mw-limpio h2 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 800; color: #14603a; }
.mw-limpio p { margin: 0; color: #256b48; font-size: .9rem; }
.mw-aviso { margin-top: 1.4rem; max-width: 70ch; }

@media (max-width: 720px) {
    .mw-cab { flex-direction: column; align-items: flex-start; gap: .15rem; }
    .mw-item { padding: .7rem .8rem .75rem .9rem; }
}

/* ── My Work: agenda propia y deltas ─────────────────────────────────── */
.ag-dia { border: 1px solid var(--emr-linea, #dbe1ec); border-radius: 12px; background: #fff; padding: .6rem .75rem; margin-bottom: .55rem; }
.ag-dia.hoy { border-color: var(--emr-marino, #1E4290); box-shadow: inset 3px 0 0 var(--emr-marino, #1E4290); }
.ag-dia-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.ag-dia-cab b { font-size: .86rem; font-weight: 800; }
.ag-dia-cab .meta { margin-left: auto; }
.ag-ev {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .4rem .5rem; border-radius: 8px; text-decoration: none; color: inherit;
}
.ag-ev:hover { background: var(--emr-fondo2, #eef1f7); }
.ag-hora { font-weight: 800; font-size: .84rem; font-variant-numeric: tabular-nums; min-width: 108px; }
.ag-cpt { font-weight: 700; font-size: .82rem; color: var(--emr-marino, #1E4290); }
.mw-delta { font-size: .72rem; font-weight: 800; margin-left: .3rem; }
.mw-delta.sube { color: var(--emr-ok, #1a7f4b); }
.mw-delta.baja { color: var(--emr-aviso, #b47912); }
/* Contador en la pestaña: el número que decide si hace falta entrar. */
.emr-nav-n {
    display: inline-block; min-width: 17px; padding: 0 .3rem; margin-left: .25rem;
    border-radius: 999px; background: var(--emr-mal, #b42323); color: #fff;
    font-size: .68rem; font-weight: 800; line-height: 17px; text-align: center;
}
@media (max-width: 720px) { .ag-hora { min-width: 0; } }

/* Dos columnas que SÍ se apilan. La versión con estilo en línea no podía:
   un atributo style gana a cualquier media query, y el móvil se desbordaba. */
.mw-2col { display: grid; grid-template-columns: 1fr 340px; gap: 1.1rem; align-items: start; }
/* Sin esto la columna 1fr crece hasta caber la tabla más ancha (min-width
   auto es el defecto en grid) y arrastra la página entera. */
.mw-2col > * { min-width: 0; }
@media (max-width: 900px) { .mw-2col { grid-template-columns: 1fr; } }
/* Las tablas de esta pantalla llevan columnas de sobra para un móvil.
   Se dejan desplazar SOLAS, dentro de su caja, en vez de arrastrar la
   página entera hacia la derecha. */
@media (max-width: 720px) {
    /* Se desplazan dentro de su caja. Sin nowrap: el texto de "detalle" es
       una frase entera y forzarla a una línea hacía la tabla absurda. */
    .mw-sec .emr-tabla { display: block; overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   El armazón: rail lateral fijo + barra fina
   -----------------------------------------------------------------------
   El rail no se desplaza con la página. En un EMR se pasa el día saltando
   de un expediente a otro, y tener que subir para cambiar de área es la
   fricción que hace que la gente abra cinco pestañas en vez de navegar.

   96px: cabe el icono con su palabra debajo. Solo el icono obliga a
   memorizar; solo la palabra ocupa el ancho de una columna de datos.
   ═══════════════════════════════════════════════════════════════════════ */
.emr-rail {
    position: fixed; inset: 0 auto 0 0; width: 96px; z-index: 60;
    background: var(--emr-navy, #0E2140); color: rgba(255,255,255,.72);
    display: flex; flex-direction: column; align-items: stretch;
    padding: .8rem 0 .6rem; overflow-y: auto; overscroll-behavior: contain;
}
.emr-rail::-webkit-scrollbar { width: 0; }
.rail-marca { display: flex; justify-content: center; padding: .2rem 0 1rem; }
.rail-marca img { border-radius: 8px; background: #fff; padding: 3px; }
.rail-nav { display: flex; flex-direction: column; gap: .15rem; }
.rail-pie { margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.12); }
.rail-i {
    display: flex; flex-direction: column; align-items: center; gap: .28rem;
    padding: .6rem .3rem; text-decoration: none; color: inherit;
    font-size: .66rem; font-weight: 700; letter-spacing: .01em; text-align: center;
    border-left: 3px solid transparent; transition: background .14s, color .14s;
}
.rail-i svg { width: 22px; height: 22px; }
.rail-i:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
/* El activo se marca con una barra a la izquierda además del fondo: el
   color solo no basta para quien no lo distingue. */
.rail-i.on { background: rgba(255,255,255,.13); color: #fff; border-left-color: var(--aimh-brand-primary-hover, #3B6BC9); } /* Deploy — Wave 0: shell indicator off gold (brand rule, 030 §5) */
.rail-i.salir:hover { background: rgba(220,90,90,.22); }

/* Sin `.emr` a propósito: las pantallas que todavía llevan su propia hoja
   (QA, Scheduling, Denials…) tienen que poder colgarse del rail sin que su
   cuerpo se repinte entero. El rail y la barra son del armazón; el resto de
   emr.css sigue viviendo bajo `.emr`. */
body.con-rail { padding-left: 96px; }
body.con-rail .emr-top { position: sticky; top: 0; z-index: 50; padding: .55rem 1.4rem; }
body.con-rail .emr-top .marca { font-weight: 800; font-size: .95rem; }

@media (max-width: 820px) {
    /* En móvil el rail se acuesta abajo, como una barra de pestañas: un
       rail vertical se come un tercio de una pantalla de 390px. */
    .emr-rail {
        inset: auto 0 0 0; width: auto; height: 62px;
        flex-direction: row; align-items: center; padding: 0;
        border-top: 1px solid rgba(255,255,255,.14);
    }
    .rail-marca, .rail-pie { display: none; }
    .rail-nav { flex-direction: row; gap: 0; width: 100%; overflow-x: auto; }
    .rail-i { flex: 1 0 auto; min-width: 68px; border-left: 0; border-top: 3px solid transparent; }
    .rail-i.on { border-left-color: transparent; border-top-color: var(--aimh-brand-primary-hover, #3B6BC9); }
    body.con-rail { padding-left: 0; padding-bottom: 62px; }
}

/* DEBT-WF-008 (Deploy — Wave 0): under 480px the nine tab items (68px each = 612px) no longer fit in one
   row and the scrollable strip hid four destinations with no affordance. Same items, same order, same
   destinations — wrapped onto two rows of five/four so every target stays visible and tappable. */
@media (max-width: 480px) {
    .emr-rail { height: auto; }
    .rail-nav { flex-wrap: wrap; overflow-x: visible; }
    .rail-i { flex: 1 1 20%; min-width: 20%; max-width: 25%; min-height: 52px; padding: .45rem .15rem; font-size: .62rem; }
    .rail-i span { overflow-wrap: anywhere; }
    body.con-rail { padding-bottom: 124px; }
}

/* Deploy — Wave 0 (400 % zoom finding): on short viewports (high zoom, landscape phones) the sticky top bar
   plus the fixed bottom bar can cover the whole screen. Below 520px of height, both stop floating: same
   header, same nine destinations (now at the end of the page), nothing hidden, content never covered. */
@media (max-width: 820px) and (max-height: 520px) {
    body.con-rail .emr-top { position: static; }
    .emr-rail { position: static; inset: auto; height: auto; }
    body.con-rail { padding-bottom: 0; }
}

/* ── Home: la rejilla de widgets ──────────────────────────────────────
   Tarjetas del mismo tamaño, en columnas que se recolocan solas. Cada una
   es un contador de trabajo con su enlace: si un número no lleva a la
   pantalla donde se arregla, no merece una tarjeta. */
.hm-saludo { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.hm-saludo h1 { font-size: 1.55rem; font-weight: 800; }
.hm-grupo { margin: 0 0 1.4rem; }
.hm-grupo h2 {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--emr-tinta-3, #6B7C92); font-weight: 800; margin-bottom: .6rem;
}
.hm-rejilla { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.hm-w {
    display: block; padding: .95rem 1rem 1rem; text-decoration: none; color: inherit;
    background: var(--emr-panel, #fff); border: 1px solid var(--emr-borde, #E3E9F2);
    border-radius: 14px; box-shadow: var(--emr-sombra);
    border-top: 3px solid var(--emr-borde-fuerte, #CFD9E8);
    transition: box-shadow .16s, transform .16s;
}
.hm-w:hover { box-shadow: var(--emr-sombra-alta); transform: translateY(-2px); text-decoration: none; }
.hm-w.ok    { border-top-color: var(--emr-ok, #1F6B3F); }
.hm-w.aviso { border-top-color: var(--emr-aviso, #8A6A1A); }
.hm-w.mal   { border-top-color: var(--emr-mal, #A02B2B); }
.hm-w-tit { font-size: .74rem; font-weight: 800; letter-spacing: .02em; color: var(--emr-tinta-2, #46566B); text-transform: uppercase; }
.hm-w-val { font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.hm-w.mal .hm-w-val { color: var(--emr-mal, #A02B2B); }
.hm-w.aviso .hm-w-val { color: var(--emr-aviso, #8A6A1A); }
.hm-w.ok .hm-w-val { color: var(--emr-ok, #1F6B3F); }
.hm-w-sub { font-size: .78rem; color: var(--emr-tinta-3, #6B7C92); margin-top: .1rem; }

/* Dos paneles de lista al pie del tablero: lo último y lo próximo. */
.hm-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.hm-ev { display: flex; align-items: center; gap: .55rem; padding: .5rem .3rem; border-bottom: 1px solid var(--emr-borde, #E3E9F2); text-decoration: none; color: inherit; }
.hm-ev:last-child { border-bottom: 0; }
.hm-ev:hover { background: var(--emr-panel-2, #F7F9FC); text-decoration: none; }
.hm-ev-f { font-size: .74rem; font-weight: 800; color: var(--emr-tinta-3, #6B7C92); min-width: 92px; font-variant-numeric: tabular-nums; }
.hm-ev-cpt { font-weight: 700; font-size: .8rem; }
.hm-ev .meta { margin-left: auto; }
@media (max-width: 720px) {
    .hm-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hm-w-val { font-size: 1.7rem; }
    .hm-ev-f { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Barra de filtros — la misma en todas las pantallas
   -----------------------------------------------------------------------
   Los controles arriba, y debajo las etiquetas de lo que está puesto. Esa
   segunda fila es la que evita el error caro: mirar una lista vacía y
   concluir que no hay nada, cuando lo que hay es un filtro olvidado.
   ═══════════════════════════════════════════════════════════════════════ */
.fb {
    background: var(--emr-panel, #fff); border: 1px solid var(--emr-borde, #E3E9F2);
    border-radius: 14px; padding: .8rem .9rem; margin-bottom: 1.1rem;
    box-shadow: var(--emr-sombra);
}
.fb-fila { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-end; }
.fb-campo { display: flex; flex-direction: column; gap: .25rem; min-width: 150px; }
.fb-campo.fb-ancho { flex: 1 1 260px; }
.fb-campo > span {
    font-size: .63rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--emr-tinta-3, #6B7C92); font-weight: 800;
}
.fb-in {
    font: inherit; font-size: .86rem; padding: .42rem .6rem;
    border: 1px solid var(--emr-borde-fuerte, #CFD9E8); border-radius: 9px;
    background: #fff; color: var(--emr-tinta, #1B2733); min-width: 0; width: 100%;
}
.fb-in:focus { outline: 2px solid var(--emr-marino, #1E4290); outline-offset: 1px; border-color: transparent; }
.fb-fecha { width: auto; min-width: 140px; }
.fb-dias { flex: 1 1 100%; }
.fb-atajos { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fb-atajo, .fb-chip {
    font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
    padding: .36rem .7rem; border-radius: 999px;
    border: 1px solid var(--emr-borde-fuerte, #CFD9E8);
    background: var(--emr-panel-2, #F7F9FC); color: var(--emr-tinta-2, #46566B);
    transition: background .13s, color .13s, border-color .13s;
}
.fb-atajo:hover, .fb-chip:hover { background: #fff; border-color: var(--emr-marino, #1E4290); color: var(--emr-marino, #1E4290); }
/* El seleccionado va relleno, no solo con el borde de otro color: en una
   fila de ocho chips el borde solo no se distingue de un hover. */
.fb-atajo.on, .fb-chip.on {
    background: var(--emr-marino, #1E4290); border-color: var(--emr-marino, #1E4290); color: #fff;
}
.fb-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

.fb-activos {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
    margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--emr-borde, #E3E9F2);
}
.fb-quita {
    font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
    padding: .22rem .55rem; border-radius: 999px;
    border: 1px solid var(--emr-marino, #1E4290);
    background: rgba(30,66,144,.08); color: var(--emr-marino, #1E4290);
}
.fb-quita:hover { background: rgba(30,66,144,.16); }
.fb-limpia {
    font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
    padding: .22rem .55rem; border-radius: 999px; margin-left: .2rem;
    border: 1px solid transparent; background: none; color: var(--emr-tinta-3, #6B7C92);
    text-decoration: underline;
}
.fb-limpia:hover { color: var(--emr-mal, #A02B2B); }
/* Cuántas cosas quedan tras filtrar: sin este número no se sabe si el
   filtro afinó o vació. */
.fb-cuenta { font-size: .8rem; color: var(--emr-tinta-3, #6B7C92); margin: -.4rem 0 .9rem; }
.fb-cuenta b { color: var(--emr-tinta, #1B2733); font-weight: 800; }

@media (max-width: 720px) {
    .fb-campo { min-width: 0; flex: 1 1 100%; }
    .fb-fecha { width: 100%; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   El calendario semanal — rejilla de tiempo
   -----------------------------------------------------------------------
   Cabeceras fijas arriba, eje de horas fijo a la izquierda, y en medio una
   superficie que se desplaza. Es la forma de Calendar de Apple, y no por
   copiarla: si las horas se van al hacer scroll, cada vez que bajas a ver
   la tarde tienes que acordarte de qué hora estabas mirando.
   ═══════════════════════════════════════════════════════════════════════ */
.ca {
    background: var(--emr-panel, #fff); border: 1px solid var(--emr-borde, #E3E9F2);
    border-radius: 14px; overflow: hidden; box-shadow: var(--emr-sombra);
}
.ca-cabs { display: flex; border-bottom: 1px solid var(--emr-borde, #E3E9F2); background: var(--emr-panel-2, #F7F9FC); }
.ca-gutter-cab { width: 56px; flex: none; border-right: 1px solid var(--emr-borde, #E3E9F2); }
.ca-cabs-in { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-width: 0; }
.ca-cab {
    padding: .5rem .3rem .55rem; text-align: center; border-left: 1px solid var(--emr-borde, #E3E9F2);
    display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.ca-cab:first-child { border-left: 0; }
.ca-cab-d { font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--emr-tinta-3, #6B7C92); }
.ca-cab-n { font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; margin-top: .05rem; }
.ca-cab-m { font-size: .6rem; font-weight: 700; color: var(--emr-tinta-3, #6B7C92); text-transform: uppercase; letter-spacing: .06em; }
/* Hoy se marca con el número en un círculo relleno, como en Apple: es el
   único día que hay que encontrar sin buscarlo. */
.ca-cab.hoy .ca-cab-d { color: var(--emr-marino, #1E4290); }
.ca-cab.hoy .ca-cab-n {
    background: var(--emr-marino, #1E4290); color: #fff;
    width: 29px; height: 29px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}

.ca-cuerpo { display: flex; overflow-y: auto; overflow-x: hidden; max-height: 640px; position: relative; }
.ca-gutter { width: 56px; flex: none; position: relative; border-right: 1px solid var(--emr-borde, #E3E9F2); background: var(--emr-panel, #fff); }
.ca-hora { position: absolute; left: 0; right: 0; height: 0; }
.ca-hora span {
    position: absolute; right: 7px; top: -7px;
    font-size: .66rem; font-weight: 700; color: var(--emr-tinta-3, #6B7C92);
    font-variant-numeric: tabular-nums;
}
.ca-rejilla { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.ca-lineas { position: absolute; inset: 0; pointer-events: none; }
.ca-linea { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--emr-borde, #E3E9F2); }
.ca-linea span { display: none; }
.ca-col { position: relative; border-left: 1px solid var(--emr-borde, #E3E9F2); min-width: 0; }
.ca-col:first-child { border-left: 0; }
.ca-col.hoy { background: rgba(30, 66, 144, .035); }

/* El evento: posición y altura las pone el JS con la hora real. Aquí solo
   vive su aspecto. El borde izquierdo de color es lo que se lee de lejos. */
.ca-ev {
    position: absolute; overflow: hidden; text-align: left;
    display: flex; flex-direction: column; gap: 1px;
    padding: .22rem .35rem .25rem .4rem; margin-left: 2px;
    border: 0; border-left: 3px solid var(--emr-off, #5C6B7E);
    border-radius: 5px; cursor: pointer; font: inherit;
    background: var(--emr-off-bg, #EEF1F6); color: var(--emr-tinta, #1B2733);
    text-decoration: none; transition: box-shadow .13s, transform .13s;
}
.ca-ev:hover { box-shadow: 0 4px 14px rgba(14,33,64,.18); transform: translateY(-1px); z-index: 5; text-decoration: none; }
.ca-ev.ok    { background: var(--emr-ok-bg, #E7F4EC);    border-left-color: var(--emr-ok, #1F6B3F); }
.ca-ev.aviso { background: var(--emr-aviso-bg, #FDF6E9); border-left-color: var(--emr-aviso, #8A6A1A); }
.ca-ev.mal   { background: var(--emr-mal-bg, #FBECEC);   border-left-color: var(--emr-mal, #A02B2B); }
.ca-ev.sup   { background: var(--emr-sup-bg, #F1ECFB);   border-left-color: var(--emr-sup, #5B3E9B); }
.ca-ev.na    { opacity: .55; text-decoration: line-through; }
.ca-ev-h { font-size: .64rem; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .8; }
.ca-ev-t { font-size: .7rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-ev-s { font-size: .64rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-ev-c { font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-top: 1px; opacity: .85; }
/* Una cita de media hora no tiene sitio para tres líneas: se queda con la
   hora y el nombre en una sola, en vez de recortar todo a la mitad. */
.ca-ev.corto { flex-direction: row; align-items: center; gap: .3rem; padding-top: .1rem; }
.ca-ev.corto .ca-ev-h { font-size: .6rem; }
.ca-ev.corto .ca-ev-t { font-size: .64rem; }

.ca-ahora { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #E5484D; z-index: 6; pointer-events: none; }
.ca-ahora-p {
    position: absolute; top: -5px; width: 9px; height: 9px; margin-left: -4px;
    border-radius: 50%; background: #E5484D;
}
.ca-sinhora {
    margin-top: .7rem; font-size: .78rem; color: var(--emr-aviso, #8A6A1A);
    background: var(--emr-aviso-bg, #FDF6E9); border: 1px solid var(--emr-aviso-bd, #E8D3A0);
    border-radius: 10px; padding: .5rem .7rem;
}

/* ── Menú del clic derecho ────────────────────────────────────────────
   Cuelga del <body> en posición fija: dentro de la rejilla lo recortaría
   el scroll de las horas justo donde más se usa, las citas de la tarde.
   El z-index va por encima de la barra de navegación pegajosa. */
.ca-menu {
    position: fixed; z-index: 3000; min-width: 208px; max-width: 280px;
    background: var(--emr-papel, #fff);
    border: 1px solid var(--emr-borde, #E3E9F2); border-radius: 12px;
    box-shadow: 0 12px 34px rgba(16, 34, 64, .18), 0 2px 6px rgba(16, 34, 64, .08);
    padding: .3rem; overflow: hidden;
}
.ca-menu-cab {
    padding: .4rem .55rem .45rem; margin-bottom: .2rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    color: var(--emr-tinta-3, #6B7C92);
    border-bottom: 1px solid var(--emr-borde, #E3E9F2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-menu-it {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .42rem .55rem; border: 0; border-radius: 8px;
    background: transparent; font: inherit; font-size: .84rem; text-align: left;
    color: var(--emr-tinta, #16233A); cursor: pointer;
}
.ca-menu-it:hover:not([disabled]), .ca-menu-it:focus-visible {
    background: var(--emr-suave, #F1F5FB); outline: none;
}
.ca-menu-it[disabled] { opacity: .45; cursor: not-allowed; }
.ca-menu-it.peligro { color: var(--emr-mal, #A32020); }
.ca-menu-it.peligro:hover:not([disabled]) { background: var(--emr-mal-bg, #FDEEEE); }
.ca-menu-ic { width: 1.15rem; flex: none; text-align: center; font-size: .92rem; }
.ca-menu-nota { margin-left: auto; font-size: .7rem; color: var(--emr-tinta-3, #6B7C92); }
.ca-menu-sep { height: 1px; margin: .25rem .3rem; background: var(--emr-borde, #E3E9F2); }

/* Una pista de que el clic derecho hace algo. Sin esto nadie lo descubre:
   un calendario que además es editable tiene que decirlo de alguna forma. */
.ca-col { cursor: context-menu; }

@media (max-width: 860px) {
    /* En móvil la semana no cabe legible en 390px. Se deja desplazar en
       horizontal con las horas ancladas, que es lo que hace el iPhone:
       antes que apretar siete columnas hasta lo ilegible, se navega. */
    .ca-cuerpo, .ca-cabs { overflow-x: auto; }
    .ca-rejilla, .ca-cabs-in { min-width: 620px; }
    .ca-gutter, .ca-gutter-cab { position: sticky; left: 0; z-index: 7; width: 44px; }
    .ca-cuerpo { max-height: 520px; }
    .ca-cab-n { font-size: 1rem; }
}

/* Lo que NO se factura se ve distinto: rayado diagonal suave. El color solo
   ya lo usan los estados clínicos, y "no produce ingreso" es una categoría
   distinta de "está bloqueado" o "está pagado" — necesita otro canal. */
.ca-ev.nofact {
    background-image: repeating-linear-gradient(45deg,
        rgba(91,62,155,.10) 0 6px, transparent 6px 12px);
    border-left-style: dashed;
}
.ca-ev.nofact .ca-ev-c { color: var(--emr-sup, #5B3E9B); }
.cal-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; margin: .8rem 0 0; font-size: .76rem; color: var(--emr-tinta-3, #6B7C92); }
.cal-leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: .3rem; vertical-align: -2px; }
.cal-leyenda i.nofact { background-image: repeating-linear-gradient(45deg, rgba(91,62,155,.55) 0 3px, #EEF1F6 3px 6px); }

/* La banda de todo el día: PTO, festivos, bloques de no disponibilidad. */
.ca-banda { display: flex; border-bottom: 1px solid var(--emr-borde, #E3E9F2); background: var(--emr-panel-2, #F7F9FC); }
.ca-banda-rot {
    width: 56px; flex: none; border-right: 1px solid var(--emr-borde, #E3E9F2);
    font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--emr-tinta-3, #6B7C92); display: flex; align-items: center; justify-content: flex-end;
    padding: .35rem .5rem .35rem 0;
}
.ca-banda-in { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: .3rem; align-content: start; }
.ca-todo {
    display: block; text-align: left; font: inherit; font-size: .68rem; font-weight: 700;
    padding: .2rem .45rem; border-radius: 5px; cursor: pointer; border: 0;
    border-left: 3px solid var(--emr-sup, #5B3E9B); background: var(--emr-sup-bg, #F1ECFB);
    color: var(--emr-sup, #5B3E9B); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-todo:hover { filter: brightness(.97); text-decoration: none; }
.ca-todo.aviso { background: var(--emr-aviso-bg, #FDF6E9); color: var(--emr-aviso, #8A6A1A); border-left-color: var(--emr-aviso, #8A6A1A); }
.ca-todo.na { background: var(--emr-off-bg, #EEF1F6); color: var(--emr-off, #5C6B7E); border-left-color: var(--emr-off, #5C6B7E); }
.ca-todo-c { font-size: .56rem; font-weight: 800; opacity: .8; }
@media (max-width: 860px) { .ca-banda { overflow-x: auto; } .ca-banda-in { min-width: 620px; } .ca-banda-rot { position: sticky; left: 0; z-index: 7; width: 44px; background: var(--emr-panel-2, #F7F9FC); } }

/* Tres o más citas repartiéndose una columna: solo hora y nombre. */
.ca-ev.flaco .ca-ev-s, .ca-ev.flaco .ca-ev-c { display: none; }
.ca-ev.flaco .ca-ev-t { font-size: .64rem; }

/* ── Agendar desde el expediente ──────────────────────────────────────
   Los tres avisos tienen tres pesos distintos a propósito: el rojo es un
   muro, el ámbar una decisión que alguien firma, y el gris un dato. */
.emr .ag-caja > summary { cursor: pointer; font-weight: 700; font-size: .9rem;
    color: var(--emr-navy); padding: .5rem 0; }
.emr .ag-form { padding-top: .6rem; }
.emr .ag-fila { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.emr .ag-campo { margin-top: .7rem; }
.emr .ag-campo label { display: block; font-size: .78rem; font-weight: 700;
    color: var(--emr-tinta-2); margin-bottom: .25rem; }
.emr .ag-campo input[type="date"], .emr .ag-campo input[type="time"],
.emr .ag-campo input[type="text"], .emr .ag-campo select {
    width: 100%; box-sizing: border-box; padding: .5rem .6rem; font: inherit; font-size: .88rem;
    border: 1px solid var(--emr-borde); border-radius: 8px;
    background: var(--emr-panel); color: var(--emr-tinta); }
.emr .ag-acc { margin-top: .8rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.emr .ag-mal, .emr .ag-duro, .emr .ag-forzar {
    border-radius: 10px; padding: .75rem .9rem; font-size: .86rem; margin-top: .8rem; line-height: 1.55; }
.emr .ag-mal, .emr .ag-duro { border: 1px solid var(--emr-mal); background: var(--emr-mal-bg); color: var(--emr-mal); }
.emr .ag-duro { border-width: 2px; }
.emr .ag-forzar { border: 1px solid #E3C08A; background: #FDF7EC; color: var(--emr-tinta); }
.emr .ag-duro ul, .emr .ag-forzar ul, .emr .ag-mal ul { margin: .45rem 0 0; padding-left: 1.15rem; }
.emr .ag-mal[hidden], .emr .ag-duro[hidden], .emr .ag-forzar[hidden] { display: none; }

.emr .ag-pend { list-style: none; margin: 0; padding: 0; }
.emr .ag-p { border: 1px solid var(--emr-borde); border-radius: 12px;
    padding: .8rem .95rem; margin-bottom: .55rem; }
.emr .ag-p .nt-meta { font-size: .78rem; color: var(--emr-tinta-3); margin-top: .2rem; }

/* ── Tablas en el móvil ───────────────────────────────────────────────────
   Las tablas del EMR tienen entre 7 y 12 columnas (eventos, seguros,
   billing, P&L). En un teléfono no caben y sin envoltorio se salen de la
   tarjeta y de la pantalla. Envolver cada tabla a mano son cuarenta sitios
   y se olvida uno; aquí la tabla misma se vuelve desplazable a ≤ 640px:
   se desliza con el dedo y lo que no cabe deja de estar cortado. */
@media (max-width: 640px) {
    body.emr table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}