/* Portal de Resultados · sistema visual «señalética hospitalaria».
   El portal se recorre como un hospital bien señalizado: un riel con letreros por área, cada área con su franja de
   color, y lo urgente primero. Los colores base son variables que el superadmin reemplaza con un tema (/tema.css). */

@font-face {
  font-family: "Overpass"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fuentes/overpass-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fuentes/overpass-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Base del tema (el superadmin la reemplaza) */
  --fondo: #e7ecf1; --superficie: #ffffff; --borde: #cbd5df; --texto: #142235; --suave: #4e5f73;
  --primario: #1f5fbf; --primario-texto: #ffffff; --primario-f: #e1eaf8;
  --riel: #13315c; --riel-texto: #ffffff;
  --ok: #157a4a; --ok-f: #dff1e7; --aviso: #8a5200; --aviso-f: #fbefd6; --error: #b8202d; --error-f: #fbe4e6;
  --radio: 8px;
  --fuente: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Áreas: la franja de color de cada letrero (señalética, fija para todos los temas) */
  --area-resultados: #2e62c9; --area-criticos: #c8202f; --area-rechazos: #e5a000; --area-laboratorio: #1e7f55;
  --area-precios: #6a41a8; --area-administracion: #52667a; --area-producto: #13315c;
  --area: var(--primario);

  /* Derivados */
  --superficie-2: color-mix(in oklab, var(--fondo) 55%, var(--superficie));
  --linea: color-mix(in oklab, var(--borde) 70%, var(--superficie));
  --riel-suave: color-mix(in oklab, var(--riel-texto) 72%, var(--riel));
  --riel-hover: color-mix(in oklab, var(--riel-texto) 9%, var(--riel));
  --riel-activo: color-mix(in oklab, var(--riel-texto) 16%, var(--riel));
  --sombra: 0 1px 2px rgb(16 32 56 / .06), 0 6px 18px -8px rgb(16 32 56 / .18);
  --sombra-alta: 0 2px 4px rgb(16 32 56 / .08), 0 16px 40px -12px rgb(16 32 56 / .28);
  --foco: 0 0 0 3px color-mix(in oklab, var(--primario) 35%, transparent);
  --t: 160ms cubic-bezier(.2, .7, .2, 1);
  --ancho-riel: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1621; --superficie: #162231; --borde: #2a3a4e; --texto: #e6edf5; --suave: #9fb0c3;
    --primario: #6da2f2; --primario-texto: #0b1626; --primario-f: #17304f;
    --riel: #0a1a30; --riel-texto: #e8eef6;
    --ok: #4fc68b; --ok-f: #133122; --aviso: #f0b252; --aviso-f: #3a2a10; --error: #f27b84; --error-f: #3d171c;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -10px rgb(0 0 0 / .55);
    --sombra-alta: 0 2px 6px rgb(0 0 0 / .35), 0 18px 44px -12px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: color-mix(in oklab, var(--suave) 45%, transparent) transparent; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 var(--fuente);
       font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in oklab, var(--primario) 28%, transparent); color: var(--texto); }
input, textarea { caret-color: var(--primario); }
a { color: var(--primario); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: 17px; font-weight: 750; letter-spacing: -0.005em; margin-bottom: 12px; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0; }
table, .cifra .valor, .mono, td, .num { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.pequeno { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
       stroke-linejoin: round; vertical-align: -3px; }
.ico.chico { width: 15px; height: 15px; vertical-align: -2px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- armazón: riel + barra + contenido */
.armazon { display: grid; grid-template-columns: var(--ancho-riel) minmax(0, 1fr); min-height: 100vh; }
.riel { background: var(--riel); color: var(--riel-texto); display: flex; flex-direction: column; position: sticky;
        top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; }
.riel-marca { display: flex; gap: 12px; align-items: center; padding: 20px 20px 18px; color: var(--riel-texto);
              text-decoration: none; }
.riel-marca img { max-height: 36px; max-width: 140px; }
.riel-sello { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none;
              background: var(--riel-texto); color: var(--riel); }
.riel-sello .ico { width: 20px; height: 20px; }
.riel-nombre { font-weight: 800; font-size: 16px; line-height: 1.15; letter-spacing: -0.01em; }
.riel-lab { color: var(--riel-suave); font-size: 12.5px; line-height: 1.3; }
.riel-grupo { padding: 6px 12px 10px; display: grid; gap: 2px; }
.riel-titulo { color: var(--riel-suave); font-size: 12px; font-weight: 700; padding: 12px 10px 6px; }
.letrero { --franja: var(--riel-suave); display: grid; grid-template-columns: 6px 22px 1fr auto; gap: 10px;
           align-items: center; padding: 9px 10px 9px 0; border-radius: 6px; color: var(--riel-texto);
           text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background var(--t); }
.letrero::before { content: ""; align-self: stretch; border-radius: 0 3px 3px 0; background: transparent;
                   transition: background var(--t); }
.letrero .ico { width: 20px; height: 20px; color: var(--franja); }
.letrero:hover { background: var(--riel-hover); text-decoration: none; }
.letrero[aria-current="page"] { background: var(--riel-activo); }
.letrero[aria-current="page"]::before { background: var(--franja); }
.letrero .contador { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800;
                     background: var(--franja); color: #fff; text-align: center; }
.riel-pie { margin-top: auto; padding: 14px 20px 18px; color: var(--riel-suave); font-size: 12.5px;
            border-top: 1px solid color-mix(in oklab, var(--riel-texto) 12%, var(--riel)); }
.area-resultados { --franja: #6f9cf0; } .area-criticos { --franja: #ff6b76; } .area-rechazos { --franja: #ffc23d; }
.area-laboratorio { --franja: #4fd08f; } .area-precios { --franja: #b591f0; } .area-administracion { --franja: #a9bccf; }
.area-producto { --franja: #9fc3ff; } .area-inicio { --franja: #ffffff; }

.lienzo { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 12px 32px;
         background: var(--fondo);
         border-bottom: 1px solid var(--linea); }
.buscador { flex: 1; max-width: 560px; position: relative; }
.buscador .ico { position: absolute; z-index: 1; pointer-events: none; left: 12px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.buscador input[type=search] { width: 100%; padding: 10px 14px 10px 40px; border-radius: 999px; border: 1px solid var(--borde);
                  background: var(--superficie); font: inherit; color: var(--texto); box-shadow: var(--sombra); }
.buscador input::placeholder { color: var(--suave); }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.usuario-ficha { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto);
                 padding: 4px 10px 4px 4px; border-radius: 999px; }
.usuario-ficha:hover { background: var(--superficie); text-decoration: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
          font-size: 13px; background: var(--riel); color: var(--riel-texto); }
.usuario-nombre { font-weight: 700; font-size: 14px; line-height: 1.1; }
.usuario-rol { color: var(--suave); font-size: 12.5px; line-height: 1.2; }
.usuario form { margin: 0; }
.boton-icono { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0;
               background: transparent; color: var(--suave); cursor: pointer; transition: background var(--t), color var(--t); }
.boton-icono:hover { background: var(--superficie); color: var(--texto); }
.franja-prueba { background: var(--aviso-f); color: var(--aviso); font-size: 13px; font-weight: 600; padding: 6px 32px;
                 display: flex; gap: 8px; align-items: center; }

main { width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px 32px 56px; display: grid; gap: 22px;
       align-content: start; }

/* Letrero de página: título con la franja del área, bajada y acciones */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.cabecera-titulo { display: grid; gap: 6px; padding-left: 30px; position: relative; }
.cabecera-titulo::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px;
                           border-radius: 4px; background: var(--area); }
.cabecera-titulo p { color: var(--suave); max-width: 72ch; }
.cabecera-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
[data-area="resultados"] { --area: var(--area-resultados); } [data-area="criticos"] { --area: var(--area-criticos); }
[data-area="rechazos"] { --area: var(--area-rechazos); } [data-area="laboratorio"] { --area: var(--area-laboratorio); }
[data-area="precios"] { --area: var(--area-precios); } [data-area="administracion"] { --area: var(--area-administracion); }
[data-area="producto"] { --area: var(--area-producto); } [data-area="inicio"] { --area: var(--primario); }

/* Compatibilidad: páginas que aún usan <div><h1> como título */
main > div:first-child > h1:first-child { padding-left: 30px; position: relative; }
main > div:first-child > h1:first-child::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px;
                                                  height: 18px; border-radius: 4px; background: var(--area); }
main > div:first-child > h1 + p { margin-top: 6px; padding-left: 30px; color: var(--suave); max-width: 80ch; }

/* ---------------------------------------------------------------- paneles */
.caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: calc(var(--radio) + 4px);
        padding: 20px 22px; box-shadow: var(--sombra); min-width: 0; }
.caja > h2:first-child, .caja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                                       flex-wrap: wrap; }
.caja-cabeza { margin-bottom: 14px; } .caja-cabeza h2 { margin: 0; }
details.caja > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-weight: 700; }
details.caja > summary::-webkit-details-marker { display: none; }
details.caja > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--suave);
                                 border-bottom: 2px solid var(--suave); transform: rotate(-45deg); transition: transform var(--t); }
details.caja[open] > summary::before { transform: rotate(45deg); }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 22px; align-items: start; }
.rejilla { display: grid; gap: 22px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }

/* ---------------------------------------------------------------- cifras accionables */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.cifra { --tono: var(--area); position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 20px 16px;
         background: var(--superficie); border: 1px solid var(--linea); border-radius: calc(var(--radio) + 4px);
         box-shadow: var(--sombra); color: var(--texto); text-decoration: none; overflow: hidden;
         transition: transform var(--t), box-shadow var(--t); }
a.cifra:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); text-decoration: none; }
.cifra .rotulo { display: flex; gap: 8px; align-items: center; color: var(--suave); font-size: 13.5px; font-weight: 600; }
.cifra .rotulo .ico { color: #fff; background: var(--tono); width: 26px; height: 26px; padding: 5px; border-radius: 6px; }
.cifra .valor { font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-top: 6px; }
.cifra .detalle { color: var(--suave); font-size: 13px; }
.cifra .ir { position: absolute; right: 16px; top: 18px; color: var(--suave); opacity: 0; transition: opacity var(--t); }
a.cifra:hover .ir { opacity: 1; }
.cifra.urgente { background: color-mix(in oklab, var(--tono) 9%, var(--superficie)); border-color: color-mix(in oklab, var(--tono) 35%, var(--linea)); }
.cifra.urgente .valor { color: var(--tono); }
.cifra.critico { --tono: var(--area-criticos); } .cifra.rechazo { --tono: var(--area-rechazos); }
.cifra.resultado { --tono: var(--area-resultados); } .cifra.laboratorio { --tono: var(--area-laboratorio); }
.cifra.precio { --tono: var(--area-precios); } .cifra.admin { --tono: var(--area-administracion); }

/* ---------------------------------------------------------------- gráficos */
.grafico-caja { position: relative; height: 260px; } .grafico-caja.alto { height: 320px; } .grafico-caja.bajo { height: 200px; }
.grafico-caja canvas { cursor: pointer; }
.grafico { width: 100%; height: auto; display: block; }
.grafico .g-barra { fill: var(--area); } .grafico .g-zona { fill: transparent; }
.grafico .g-col:hover .g-zona { fill: var(--primario-f); }
.grafico .g-grilla { stroke: var(--linea); stroke-width: 1; } .grafico .g-base { stroke: var(--suave); stroke-width: 1; }
.grafico .g-umbral { stroke: var(--aviso); stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafico .g-eje { fill: var(--suave); font-size: 11px; font-family: var(--fuente); }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--area)); display: inline-block; }
.pista { color: var(--suave); font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.barra-celda { display: inline-block; height: 8px; border-radius: 0 4px 4px 0; background: var(--area); vertical-align: middle; margin-right: 8px; }
.medidor { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.medidor-pista { flex: 1; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.medidor-relleno { height: 100%; border-radius: 4px; background: var(--area); }

/* ---------------------------------------------------------------- tablas */
.tabla { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--suave); padding: 10px 12px; white-space: nowrap;
     border-bottom: 1px solid var(--borde); background: var(--superficie); position: sticky; top: 0; }
td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr, table tr:not(:first-child) { transition: background var(--t); }
table tr:hover td { background: color-mix(in oklab, var(--primario-f) 55%, transparent); }
td.num, th.num { text-align: right; }
tr.fila-enlace { cursor: pointer; }
tr.inactivo td { color: var(--suave); }

/* ---------------------------------------------------------------- etiquetas de estado (siempre con texto) */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
        font-weight: 700; white-space: nowrap; line-height: 1.4; background: var(--superficie-2); color: var(--suave); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-f); color: var(--ok); }
.chip.pend { background: var(--aviso-f); color: var(--aviso); }
.chip.critico { background: var(--error-f); color: var(--error); }
.chip.info { background: var(--primario-f); color: var(--primario); }

/* ---------------------------------------------------------------- avisos */
.aviso { display: flex; gap: 12px; align-items: flex-start; border-radius: calc(var(--radio) + 2px); padding: 12px 16px;
         font-size: 14.5px; border: 1px solid transparent; }
.aviso::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: currentColor;
                 -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat; }
.aviso.amarillo { background: var(--aviso-f); color: var(--aviso); border-color: color-mix(in oklab, var(--aviso) 25%, transparent);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.aviso.rojo { background: var(--error-f); color: var(--error); border-color: color-mix(in oklab, var(--error) 25%, transparent);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }
.aviso.verde { background: var(--ok-f); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 25%, transparent);
  --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.aviso a { color: inherit; font-weight: 700; }
.avisos-lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }

/* ---------------------------------------------------------------- botones y controles */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14.5px;
         font-weight: 700; background: var(--primario); color: var(--primario-texto); border: 1px solid transparent;
         border-radius: var(--radio); padding: 9px 16px; cursor: pointer; text-decoration: none; line-height: 1.2;
         white-space: nowrap; transition: background var(--t), box-shadow var(--t), transform var(--t); }
.boton:hover { background: color-mix(in oklab, var(--primario) 86%, black); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton.secundario:hover { border-color: color-mix(in oklab, var(--primario) 45%, var(--borde)); color: var(--primario); }
.boton.peligro { background: var(--superficie); color: var(--error); border-color: color-mix(in oklab, var(--error) 40%, var(--borde)); }
.boton.peligro:hover { background: var(--error); color: #fff; }
.boton.ancho { width: 100%; padding: 12px 16px; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--primario); cursor: pointer; text-decoration: underline; }

input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=search],
input[type=file], select, textarea {
  font: inherit; font-size: 14.5px; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 8px 11px; min-height: 40px; width: 100%; transition: border-color var(--t), box-shadow var(--t); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in oklab, var(--primario) 35%, var(--borde)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario); box-shadow: var(--foco); }
select[multiple] { min-height: 160px; padding: 6px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primario); }
label { color: var(--texto); }

.filtros { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.filtros label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--suave); min-width: 150px; flex: 1 1 160px; }
.filtros label input, .filtros label select { min-width: 0; }
.filtros .boton { flex: none; }
.form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; align-items: start; }
.form-fila label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; }
.config { display: grid; gap: 16px; }
.config > label { font-weight: 700; font-size: 14px; }
.config-filas { display: grid; gap: 16px; }
.config-filas.dos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.config-fila { display: grid; gap: 6px; } .config-fila > label { font-weight: 700; font-size: 14px; }
.interruptor { display: inline-flex !important; grid-auto-flow: column; gap: 10px; align-items: center; cursor: pointer;
               font-weight: 600 !important; font-size: 14px; }
.interruptor input { width: 40px; height: 22px; appearance: none; border-radius: 999px; background: var(--borde);
                     position: relative; cursor: pointer; transition: background var(--t); flex: none; margin: 0; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
                            background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform var(--t); }
.interruptor input:checked { background: var(--primario); }
.interruptor input:checked::after { transform: translateX(18px); }

/* ---------------------------------------------------------------- pestañas (submenús de sección) */
.submenu { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); }
.submenu a { position: relative; text-decoration: none; color: var(--suave); padding: 10px 14px 12px; font-weight: 650;
             font-size: 14.5px; border-radius: 8px 8px 0 0; transition: color var(--t), background var(--t); }
.submenu a:hover { color: var(--texto); background: color-mix(in oklab, var(--superficie) 60%, transparent); }
.submenu a[aria-current="page"] { color: var(--texto); }
.submenu a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px;
                                          border-radius: 3px 3px 0 0; background: var(--area); }

.paginas { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 14px; }

/* ---------------------------------------------------------------- estados vacíos */
.vacio { display: grid; place-items: center; text-align: center; gap: 8px; padding: 32px 16px; color: var(--suave); }
.vacio .ico { width: 34px; height: 34px; color: color-mix(in oklab, var(--area) 70%, var(--suave)); }
.vacio strong { color: var(--texto); font-size: 15.5px; }

/* ---------------------------------------------------------------- listas de tareas «hoy» */
.tareas-hoy { display: grid; gap: 10px; }
.tarea { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px;
         border-radius: var(--radio); background: var(--superficie-2); color: var(--texto); text-decoration: none;
         transition: background var(--t); }
.tarea:hover { background: var(--primario-f); text-decoration: none; }
.tarea-icono { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff;
               background: var(--tono, var(--area)); }
.tarea-titulo { font-weight: 700; } .tarea-detalle { color: var(--suave); font-size: 13px; }
.tarea-cuenta { font-weight: 800; font-size: 20px; }

/* ---------------------------------------------------------------- utilidades de página antiguas */
.vista-previa .caja, .vista-previa .boton, .vista-previa .aviso { border-radius: var(--radio); }
.qr svg { width: 200px; height: 200px; }

/* ---------------------------------------------------------------- adaptación */
@media (max-width: 1100px) {
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}
@media (max-width: 900px) {
  .armazon { grid-template-columns: 1fr; }
  .riel { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); z-index: 20; transform: translateX(-100%);
          transition: transform 220ms cubic-bezier(.2, .7, .2, 1); box-shadow: var(--sombra-alta); }
  body.riel-abierto .riel { transform: none; }
  .barra { padding: 10px 16px; } main { padding: 20px 16px 40px; } .franja-prueba { padding: 6px 16px; }
  .usuario-nombre, .usuario-rol { display: none; }
  h1 { font-size: 24px; }
  .tabla { margin: 0 -16px; padding: 0 16px; } .caja { padding: 16px; }
  .dos-columnas { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .solo-movil { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Bandeja de críticos: cada pendiente se despliega para registrar la notificación */
.critico-item > summary { list-style: none; cursor: pointer; }
.critico-item > summary::-webkit-details-marker { display: none; }
.critico-item[open] > summary { border-radius: var(--radio) var(--radio) 0 0; background: var(--error-f); }
.critico-form { background: var(--superficie-2); border-radius: 0 0 var(--radio) var(--radio); padding: 14px 16px 16px;
                display: grid; gap: 12px; margin-bottom: 4px; }
.critico-tiempo { text-align: right; }

/* Ficha del paciente */
.paciente { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
.paciente-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
                   background: var(--primario-f); color: var(--area-resultados); }
.paciente-avatar .ico { width: 34px; height: 34px; }
.paciente-datos { display: grid; gap: 10px; }
.paciente dl { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.paciente dt { color: var(--suave); font-size: 12.5px; font-weight: 600; }
.paciente dd { margin: 0; font-weight: 700; }
.paciente-nota { align-self: start; }
.ordenes { display: grid; gap: 8px; }
details.orden { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
details.orden > summary { display: grid; grid-template-columns: 150px 120px 1fr auto; gap: 14px; align-items: center;
                          padding: 12px 16px; cursor: pointer; list-style: none; border-radius: var(--radio); }
details.orden > summary::-webkit-details-marker { display: none; }
details.orden > summary:hover { background: var(--superficie-2); }
details.orden[open] > summary { border-bottom: 1px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0; }
.orden-fecha { font-weight: 700; }
.orden-detalle { padding: 4px 16px 10px; }
table.resultados .valor-resultado { font-weight: 700; }
table.resultados tr.es-critico td { background: color-mix(in oklab, var(--error-f) 70%, transparent); }
@media (max-width: 900px) { .paciente { grid-template-columns: 1fr; } details.orden > summary { grid-template-columns: 1fr 1fr; } }

/* Formulario de usuario: rol en tarjetas y secciones que aparecen según el rol */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rol-opcion { position: relative; cursor: pointer; }
.rol-opcion input { position: absolute; opacity: 0; inset: 0; }
.rol-tarjeta { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border: 1.5px solid var(--borde);
               border-radius: var(--radio); background: var(--superficie); transition: border-color var(--t), background var(--t); }
.rol-opcion:hover .rol-tarjeta { border-color: color-mix(in oklab, var(--primario) 45%, var(--borde)); }
.rol-opcion input:checked + .rol-tarjeta { border-color: var(--primario); background: var(--primario-f);
                                           box-shadow: inset 0 0 0 1px var(--primario); }
.rol-opcion input:focus-visible + .rol-tarjeta { box-shadow: var(--foco); }
.rol-nombre { font-weight: 800; } .rol-desc { color: var(--suave); font-size: 13px; line-height: 1.4; }
[data-mostrar-rol][hidden] { display: none !important; }
.acciones-cuenta { display: grid; gap: 12px; }
.zona-peligro { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--borde); display: grid; gap: 6px; }
.filtro-opciones { margin-bottom: 8px; }

/* Panel lateral de detalle: se abre sobre la pantalla al tocar un dato, sin perder lo que se estaba mirando */
dialog.panel-detalle { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(760px, 94vw); max-width: none;
  height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--fondo); color: var(--texto);
  box-shadow: -24px 0 60px -20px rgb(10 26 48 / .45); overflow: hidden; }
dialog.panel-detalle::backdrop { background: rgb(12 24 44 / .42); }
dialog.panel-detalle[open] { animation: panel-entra 220ms cubic-bezier(.2, .7, .2, 1); }
dialog.panel-detalle[open]::backdrop { animation: panel-fondo 220ms ease-out; }
@keyframes panel-entra { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes panel-fondo { from { opacity: 0; } to { opacity: 1; } }
.panel-marco { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.panel-cuerpo { padding: 26px 28px 40px; display: grid; gap: 18px; }
.panel-cerrar { position: absolute; top: 14px; right: 18px; background: var(--superficie); box-shadow: var(--sombra); z-index: 5; }
.panel-cabeza { display: grid; gap: 6px; padding-right: 52px; }
.panel-cabeza .etiqueta-area { display: inline-flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; font-weight: 700; }
.panel-cabeza .etiqueta-area::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--area); }
.panel-cabeza h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 0; outline: none; }
.panel-cabeza h2:focus, .panel-cabeza h2:focus-visible { box-shadow: none; outline: none; }
.panel-cabeza p { color: var(--suave); }
.panel-cuerpo .cifras { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.panel-cuerpo .cifra { padding: 14px 16px; } .panel-cuerpo .cifra .valor { font-size: 28px; }
.panel-cuerpo .caja { box-shadow: none; }
.panel-pie { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-cargando { display: grid; gap: 14px; padding-top: 8px; }
.panel-cargando span { display: block; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--superficie-2), var(--superficie), var(--superficie-2));
  background-size: 200% 100%; animation: brillo 1.1s linear infinite; }
.panel-cargando span:first-child { height: 30px; width: 60%; } .panel-cargando span:nth-child(2) { height: 90px; }
.panel-cargando span:nth-child(3) { height: 180px; } .panel-cargando span:nth-child(4) { width: 80%; }
@keyframes brillo { to { background-position: -200% 0; } }
body.con-panel { overflow: hidden; }
tr[data-modal]:focus-visible td { background: var(--primario-f); }
@media (max-width: 700px) { dialog.panel-detalle { width: 100vw; } .panel-cuerpo { padding: 20px 16px 32px; } }

/* «Ver como»: franja fija mientras el superadmin mira el portal como otro usuario */
.franja-ver-como { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                   padding: 10px 32px; background: var(--riel); color: var(--riel-texto); font-size: 14px; }
.franja-ver-como form { margin: 0 0 0 auto; }
.franja-ver-como .boton { background: var(--riel-texto); color: var(--riel); }
.ver-como-form { margin-top: 6px; }
@media (max-width: 900px) { .franja-ver-como { padding: 10px 16px; } }

/* Ayudas: «?» junto a un concepto; el globo lo posiciona static/panel.js (no lo recorta ninguna tabla) */
.ayuda { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; margin-left: 4px; border: 0;
         border-radius: 50%; background: transparent; color: var(--suave); cursor: help; vertical-align: middle;
         transition: color var(--t), background var(--t); }
.ayuda .ico { width: 16px; height: 16px; }
.ayuda:hover, .ayuda[aria-expanded="true"] { color: var(--primario); background: var(--primario-f); }
.globo-ayuda { position: fixed; z-index: 50; max-width: 300px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px;
               line-height: 1.45; background: var(--riel); color: var(--riel-texto); box-shadow: var(--sombra-alta);
               pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 120ms, transform 120ms; }
.globo-ayuda.visible { opacity: 1; transform: none; }
.globo-ayuda::after { content: ""; position: absolute; left: var(--flecha, 50%); width: 10px; height: 10px; background: inherit;
                      transform: translateX(-50%) rotate(45deg); }
.globo-ayuda.arriba::after { bottom: -5px; } .globo-ayuda.abajo::after { top: -5px; }
.cifra .rotulo .ayuda .ico { color: inherit; background: none; width: 16px; height: 16px; padding: 0; border-radius: 0; }
.cifra .rotulo .ayuda { margin-left: 0; }
.globo-ayuda.ancho { max-width: 320px; }
div.cifra[data-globo] { cursor: help; }
.orden-acciones { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.boton.chico { padding: 5px 12px; font-size: 13px; }
/* Permisos por perfil: matriz acción × perfil */
table.permisos th[scope="row"] { text-align: left; font-weight: 400; min-width: 260px; }
table.permisos th[scope="row"] b { display: block; font-weight: 600; }
table.permisos .centro { text-align: center; }
table.permisos .interruptor { justify-content: center; }
table.permisos .no-aplica { color: var(--texto-suave, #6b7280); }
.acciones-form { display: flex; justify-content: flex-end; margin-top: 14px; }
.caja.nota ul { margin: 6px 0 0; padding-left: 20px; }
.caja.nota li { margin: 4px 0; }
/* Valores críticos: elección de quién decide */
.opciones-fuente { display: grid; gap: 10px; }
.opcion-fuente { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borde);
                 border-radius: 8px; cursor: pointer; }
.opcion-fuente input { margin-top: 4px; }
.opcion-fuente > span { display: grid; gap: 2px; }
.opcion-fuente.elegida, .opcion-fuente:has(input:checked) { border-color: var(--primario); background: color-mix(in oklab, var(--primario) 6%, var(--superficie)); }
.paginas { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 12px; }
/* Valores críticos: administrador por examen (convenio → centros) */
.migas { margin: 0 0 6px; font-size: 14px; }
.migas a { display: inline-flex; align-items: center; gap: 4px; }
.migas .ico { transform: rotate(180deg); }
.fila-critico { display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(220px, 2fr) auto; gap: 8px 16px;
                align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.fila-critico-nombre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fila-critico-valor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fila-critico-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px; }
.fila-critico-acciones form { margin: 0; }
.arbol-criticos .rama { padding: 2px 0 8px; }
.arbol-criticos .rama + .rama { margin-top: 6px; }
.hoja-centro .fila-critico { padding-left: 28px; }
.hoja-centro .fila-critico-nombre b { font-weight: 500; }
details.cambiar > summary { list-style: none; cursor: pointer; }
details.cambiar > summary::-webkit-details-marker { display: none; }
details.cambiar[open] { flex-basis: 100%; order: 3; }
.cambiar-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin-top: 8px; padding: 10px 12px;
                background: var(--fondo); border-radius: 8px; }
.cambiar-form label { display: grid; gap: 2px; font-size: 13px; }
.cambiar-form input[type="text"] { width: 110px; }
.cambiar-form input[name="texto"] { width: 180px; }
.valores-critico input[type="text"] { max-width: 160px; }
.buscar-arbol { display: grid; gap: 4px; max-width: 360px; margin: 14px 0 8px; }
.elegir-arbol { max-height: 420px; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; }
.elegir-rama { padding: 4px 0; border-bottom: 1px solid var(--borde); }
.elegir-rama:last-child { border-bottom: 0; }
.elegir-rama > summary { cursor: pointer; padding: 4px 0; }
.elegir-rama > summary label { display: inline-flex; gap: 6px; align-items: center; }
.elegir-centros { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; padding: 4px 0 8px 26px; }
.elegir-centros label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.elegir-centros [hidden], .elegir-arbol [hidden] { display: none; }
.caja.revisar ul { margin: 6px 0 0; padding-left: 20px; }
@media (max-width: 760px) {
  .fila-critico { grid-template-columns: 1fr; }
  .fila-critico-acciones { justify-content: flex-start; }
  .hoja-centro .fila-critico { padding-left: 16px; }
}
/* Hallazgos */
.historia { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.historia li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.historia li:last-child { border-bottom: 0; }
.historia li div { display: flex; flex-wrap: wrap; gap: 4px 8px; }
@media print {
  .riel, .barra, .no-imprimir, .franja-prueba, .franja-ver-como { display: none !important; }
  .lienzo { margin: 0 !important; }
  .caja { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}
/* Ficha del examen */
.ficha-examen h3 { margin: 14px 0 6px; font-size: 15px; }
.avisos-examen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aviso-examen { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
                background: var(--fondo); }
.aviso-examen > span { flex: 1; }
.aviso-examen.tipo-precio { background: color-mix(in oklab, var(--area-precios) 9%, var(--superficie)); }
.aviso-examen.tipo-critico { background: color-mix(in oklab, var(--area-criticos) 8%, var(--superficie)); }
.aviso-examen.tipo-deriva { background: color-mix(in oklab, var(--area-laboratorio) 9%, var(--superficie)); }
.aviso-examen.grave { font-weight: 600; }
.barras-uso { display: flex; align-items: flex-end; gap: 4px; min-height: 60px; overflow-x: auto; padding-bottom: 4px; }
.barras-uso > div { display: grid; justify-items: center; gap: 2px; min-width: 38px; padding: 6px 4px; border-radius: 6px;
                    background: var(--fondo); }
.barras-uso span { font-weight: 700; }
.barras-uso small { color: var(--suave); font-size: 11px; }
.lista-simple { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
details.referencia { margin-top: 14px; }
details.referencia > summary { cursor: pointer; color: var(--suave); }
.explicacion-hallazgo h3 { margin: 14px 0 4px; font-size: 15px; }
.explicacion-hallazgo p { max-width: 80ch; }
dialog.panel-detalle.ancho { width: min(1080px, 96vw); }
.panel-contenido .caja { box-shadow: none; }
/* Modal centrado para formularios de edición */
dialog.panel-detalle.centro { inset: 0; margin: auto; width: min(620px, 94vw); height: auto; max-height: 90dvh;
                              border-radius: 14px; box-shadow: var(--sombra-alta); }
dialog.panel-detalle.centro[open] { animation: modal-entra 180ms ease-out; }
dialog.panel-detalle.centro .panel-marco { height: auto; max-height: 90dvh; }
@keyframes modal-entra { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-formulario { display: grid; gap: 10px; padding-right: 36px; }
.modal-formulario h2 { margin: 0; font-size: 22px; }
.modal-formulario .campos { display: grid; gap: 12px; }
.modal-formulario .campos > label:not(.interruptor) { display: grid; gap: 4px; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.acciones-proveedores { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.acciones-fila { white-space: nowrap; }
.acciones-fila form { margin: 0 0 0 6px; }
.sobretitulo { display: block; color: var(--suave); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
/* Pie del portal y de la pantalla de acceso: quién presta el servicio y quién lo desarrolla */
.pie-portal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: auto;
              padding: 18px 28px 22px; color: var(--suave); font-size: 12.5px; border-top: 1px solid var(--linea); }
.acceso-creditos { display: grid; gap: 2px; margin-top: 18px; color: var(--suave); font-size: 12px; }
@media print { .pie-portal { border: 0; padding: 8px 0 0; } }
.pagina-error { max-width: 620px; margin: 48px auto; display: grid; gap: 10px; justify-items: start; }
.pagina-error > .ico { width: 36px; height: 36px; color: var(--area, var(--primario)); }
.pagina-error h1 { margin: 0; font-size: 24px; }
/* Acerca de */
.acerca { display: grid; gap: 16px; max-width: 760px; }
.acerca-desarrollo { display: grid; gap: 4px; }
.acerca-marca { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: .01em; }
.acerca-lema { margin: 0; color: var(--suave); }
.acerca-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; margin: 12px 0 0; }
.acerca-datos dt { color: var(--suave); font-size: 13px; }
.acerca-datos dd { margin: 0; font-weight: 600; }
.pie-portal .credito-desarrollo b { color: var(--texto); }
.pie-portal a { color: inherit; }
.franja-vencido { margin: 0; border-radius: 0; }
.panel-error { padding-top: 24px; }
.panel-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
/* «Hoy» de jefatura: semáforos y «Requiere su atención» */
.semaforos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.semaforo { position: relative; display: grid; gap: 4px; padding: 16px 18px 16px 44px; border-radius: 12px;
            background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); text-decoration: none;
            border: 1px solid var(--linea); }
.semaforo:hover { box-shadow: var(--sombra-alta); }
.semaforo-luz { position: absolute; left: 16px; top: 20px; width: 16px; height: 16px; border-radius: 50%;
                background: var(--ok); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok) 20%, transparent); }
.semaforo.estado-alerta .semaforo-luz { background: var(--area-rechazos); box-shadow: 0 0 0 4px color-mix(in oklab, var(--area-rechazos) 22%, transparent); }
.semaforo.estado-critico .semaforo-luz { background: var(--area-criticos); box-shadow: 0 0 0 4px color-mix(in oklab, var(--area-criticos) 22%, transparent); }
.semaforo.estado-critico { background: color-mix(in oklab, var(--area-criticos) 6%, var(--superficie)); }
.semaforo-titulo { font-size: 14px; font-weight: 700; color: var(--suave); }
.semaforo-valor { font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.semaforo-detalle { font-size: 13px; color: var(--suave); }
.lista-atencion { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-atencion a { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px;
                    border-radius: 10px; background: var(--fondo); color: var(--texto); text-decoration: none; }
.lista-atencion a:hover { background: color-mix(in oklab, var(--primario) 8%, var(--fondo)); }
.lista-atencion .atencion-critico a { background: color-mix(in oklab, var(--area-criticos) 9%, var(--superficie)); }
.atencion-critico .atencion-marca { color: var(--area-criticos); }
.atencion-alerta .atencion-marca { color: var(--area-rechazos); }
.atencion-texto { display: grid; gap: 2px; }
.atencion-texto span { font-size: 13.5px; color: var(--suave); }
.mando-dia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; margin: 14px 0 0; }
.mando-dia dt { font-size: 12.5px; color: var(--suave); } .mando-dia dd { margin: 0; font-size: 20px; font-weight: 800; }
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 18px; }
.accesos a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; color: var(--texto);
             text-decoration: none; }
.accesos a:hover { background: var(--fondo); }
.accesos a span { display: grid; gap: 2px; font-size: 13px; color: var(--suave); }
.accesos a b { color: var(--texto); font-size: 14.5px; }
/* Filtro de convenios y centros */
.filtro-centros-boton { display: inline-flex; align-items: center; gap: 4px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13.5px; text-decoration: none; }
.en-linea { display: inline; margin: 0; }
/* Tablas agrupadas por convenio con sus centros */
.selector-vista { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.selector-vista a { padding: 6px 12px; font-size: 13.5px; color: var(--texto); text-decoration: none; }
.selector-vista a[aria-current] { background: var(--primario); color: var(--primario-texto); }
.tabla-grupos .grupo-cabeza { cursor: pointer; background: var(--superficie-2); }
.tabla-grupos .grupo-cabeza th { text-align: left; font-weight: 400; }
.tabla-grupos .grupo-cabeza th b { margin-right: 8px; }
.grupo-flecha { display: inline-flex; margin-right: 6px; transition: transform 120ms; }
.grupo-cabeza[aria-expanded="true"] .grupo-flecha { transform: rotate(90deg); }
.tabla-grupos td.sangria { padding-left: 34px; }
@media (prefers-reduced-motion: reduce) { .grupo-flecha { transition: none; } }
/* Bandeja de críticos agrupada: convenio → centro → críticos */
.grupos-criticos { display: grid; gap: 8px; }
.grupo-critico { border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); }
.grupo-critico > summary, .grupo-centro > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 14px; cursor: pointer; }
.grupo-critico > summary::-webkit-details-marker, .grupo-centro > summary::-webkit-details-marker { display: none; }
.grupo-critico > summary::before, .grupo-centro > summary::before { content: "›"; display: inline-block; width: 12px;
  font-weight: 700; transition: transform 120ms; }
.grupo-critico[open] > summary::before, .grupo-centro[open] > summary::before { transform: rotate(90deg); }
.grupo-nombre { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; }
.grupo-centro { margin: 0 12px 8px 26px; border-top: 1px solid var(--linea); }
.grupo-centro > summary { padding: 10px 6px; }
.grupo-centro .tareas-hoy { padding: 0 6px 10px 18px; }
@media (prefers-reduced-motion: reduce) { .grupo-critico > summary::before, .grupo-centro > summary::before { transition: none; } }
/* Pestañas (Configuración del producto y otras) */
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borde); margin: 4px 0 14px; }
.pestanas [role="tab"] { font: inherit; font-size: 14.5px; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--suave); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pestanas [role="tab"][aria-selected="true"] { color: var(--texto); font-weight: 700; border-bottom-color: var(--primario); }
.pestanas [role="tab"]:hover { color: var(--texto); }
.pestanas .chip { padding: 0 6px; font-size: 11.5px; }
.barra-guardar-config { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  padding: 12px 16px; margin-top: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: var(--sombra); }
/* Trazabilidad de la orden */
.linea-tiempo { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px 0; }
.linea-tiempo li { position: relative; display: grid; gap: 2px; padding: 22px 8px 0 0; font-size: 13px; }
.linea-tiempo li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--linea); }
.linea-tiempo li.hecho::before { background: var(--area-laboratorio); }
.linea-tiempo .punto { position: absolute; top: 1px; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--linea); }
.linea-tiempo li.hecho .punto { background: var(--area-laboratorio); border-color: var(--area-laboratorio); }
.paso-nombre { font-weight: 700; color: var(--texto); }
.paso-fecha { font-variant-numeric: tabular-nums; }
.paso-detalle { color: var(--suave); font-size: 12px; }
.linea-tiempo li.pendiente .paso-nombre { color: var(--suave); font-weight: 600; }
.trazabilidad h4 { margin: 6px 0 2px; font-size: 14px; }
.barra-tramos { display: flex; width: 160px; height: 10px; border-radius: 6px; overflow: hidden; background: var(--fondo); }
.tramo { display: inline-block; height: 10px; }
.tramo-1 { background: var(--area-rechazos); } .tramo-2 { background: var(--area-resultados); } .tramo-3 { background: var(--area-laboratorio); }
.leyenda-tramos { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--suave); margin-top: 8px; }
.leyenda-tramos .tramo { width: 14px; border-radius: 3px; margin-right: -4px; }
/* Tiempos: resumen por tramo */
.tramos-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tramo-resumen { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--fondo); }
.tramo-resumen.el-mayor { box-shadow: inset 0 0 0 2px var(--area-rechazos); }
.tramo-resumen .tramo { width: 28px; height: 6px; border-radius: 3px; }
.tramo-nombre { font-weight: 700; font-size: 14px; }
.tramo-valor { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.conclusion { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; }
.grafico-caja.alto { height: 380px; }
/* Orden en modal grande al centro, con encabezado fijo y pestañas */
dialog.panel-detalle.centro.grande { width: min(1200px, 96vw); height: 92dvh; max-height: 92dvh; }
dialog.panel-detalle.centro.grande .panel-marco { height: 100%; max-height: 92dvh; }
.orden-modal { display: block; }
.orden-fija { position: sticky; top: -1px; z-index: 2; background: var(--fondo); margin-bottom: 12px; }
.orden-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 12px 20px; padding: 4px 48px 12px 0; background: var(--fondo); }
.orden-titulo { display: grid; gap: 4px; min-width: 0; }
.orden-titulo h2 { margin: 0; font-size: 24px; font-weight: 800; }
.orden-titulo p { margin: 0; color: var(--suave); }
.orden-resumen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
.orden-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.orden-modal .pestanas { margin: 0; }
.orden-modal [role="tabpanel"] { background: var(--superficie); border-radius: 12px; padding: 14px 16px; }
@media (max-width: 700px) { .orden-fija { position: static; } .orden-cabeza { padding-right: 40px; } }
/* Valores críticos: listas personalizadas y mesa de trabajo */
.pestanas.vistas a[role="tab"] { text-decoration: none; }        /* pestañas que son enlaces: mismo estilo que .pestanas */
.texto-critico { color: var(--error); font-weight: 600; }
.texto-aviso { color: var(--aviso); }
table.compacta td, table.compacta th { padding-top: 6px; padding-bottom: 6px; }
td.centrado { text-align: center; }
.caja.interior { margin-top: 16px; background: var(--fondo); }
.filtros.en-linea { margin: 0; padding: 0; }
.accion-fila > summary { list-style: none; cursor: pointer; display: inline-flex; }
.accion-fila > summary::-webkit-details-marker { display: none; }
.accion-fila[open] form { margin-top: 8px; }
.pasos-mesa { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 14px; padding: 0; color: var(--suave); }
.pasos-mesa li { display: flex; align-items: center; gap: 8px; }
.pasos-mesa b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--borde); font-size: 13px; }
.pasos-mesa li[aria-current="step"] { color: var(--texto); font-weight: 700; }
.pasos-mesa li[aria-current="step"] b { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.grilla-criticos td { vertical-align: top; }
.grilla-criticos input[type="text"], .grilla-criticos select { width: 100%; min-width: 0; }
.grilla-criticos input.corto { width: 4.5em; }
.grilla-criticos input.limite { width: 7em; font-variant-numeric: tabular-nums; }
.grilla-criticos tr.con-error td { background: var(--error-f); }
.grilla-criticos tr.con-aviso td:first-child { box-shadow: inset 3px 0 0 var(--aviso); }
.resumen-cambios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.simulacion-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.simulacion-cifras div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.simulacion-cifras b { font-size: 22px; font-variant-numeric: tabular-nums; }
.guardar-version label.ancho { flex: 1 1 320px; }
.version-critico { padding: 12px 0; border-top: 1px solid var(--borde); }
.version-critico:first-of-type { border-top: 0; }
.version-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.version-critico p { margin: 6px 0 0; }
.ayuda-importar { margin-top: 10px; display: grid; gap: 8px; }
.ayuda-importar p { margin: 0; }
.ejemplo-excel table { font-size: 13px; }
.ejemplo-excel th { background: var(--fondo); white-space: nowrap; }
.ejemplo-excel td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.columnas-importar dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 14px; margin: 8px 0 0; font-size: 13.5px; }
.columnas-importar dt { font-weight: 700; }
.columnas-importar dd { margin: 0; color: var(--suave); }
@media (max-width: 700px) { .columnas-importar dl { grid-template-columns: 1fr; } .columnas-importar dd { margin-bottom: 6px; } }
.pegar-codigos { margin-top: 10px; }
.pegar-codigos textarea { width: 100%; font-family: var(--mono); font-size: 13px; }
.pegar-codigos label.ancho { flex: 1 1 320px; }
/* Tests que hoy no pertenecen a ningún examen del catálogo: se muestran marcados, nunca se ocultan */
.chip.sin-examen { background: var(--aviso-f); color: var(--aviso); margin-right: 6px; }
tr.fila-sin-examen td { background: color-mix(in oklab, var(--aviso-f) 45%, var(--superficie)); }
.glosa-sin-examen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0; color: var(--suave); }
.seleccion-masiva { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.seleccion-masiva { position: sticky; top: 0; z-index: 2; padding: 8px 0; margin: 0; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.resumen-codigos p { margin: 0 0 4px; }
.grupo-codigo { margin: 14px 0; }
.grupo-codigo h3 { margin: 0 0 6px; font-size: 15px; }
.grupo-examen { border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 10px; margin: 6px 0; }
.grupo-examen-cabeza { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.grupo-examen-tests { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0 26px; }
.test-opcion { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.grupo-examen.fila-sin-examen { background: color-mix(in oklab, var(--aviso-f) 45%, var(--superficie)); }
.barra-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.reajuste-mesa { margin: 0 0 10px; }
/* Estadísticas: editor de plantillas */
fieldset.grupo-opciones, .grupo-opciones fieldset { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
fieldset.grupo-opciones legend, .grupo-opciones fieldset legend { font-weight: 700; margin-bottom: 4px; width: 100%; }
div.grupo-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; margin-top: 12px; }
.editor-estadistica h3 { margin: 4px 0; }
.tabla-estadistica tfoot th { border-top: 2px solid var(--borde); }
/* Estadísticas: selector de exámenes */
.modo-examenes { border: 0; padding: 0; margin: 4px 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.modo-examenes legend { font-weight: 700; margin-bottom: 6px; }
.opcion-tarjeta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer; background: var(--superficie); }
.opcion-tarjeta > span { display: grid; gap: 2px; }
.opcion-tarjeta:has(input:checked) { border-color: var(--primario); box-shadow: inset 0 0 0 1px var(--primario); background: var(--primario-f); }
.selector-examenes { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: 18px; align-items: start; }
.selector-elegidos, .selector-agregar { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; min-width: 0; }
.selector-elegidos { position: sticky; top: 12px; max-height: 70vh; display: flex; flex-direction: column; }
.selector-elegidos h3, .selector-agregar h3 { margin: 0 0 8px; font-size: 15px; }
.lista-elegidos { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.lista-elegidos li { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linea); }
.lista-elegidos li:first-child { border-top: 0; }
.lista-elegidos .boton-icono { flex: none; font-size: 18px; line-height: 1; padding: 2px 8px; }
.selector-agregar .grupo-codigo h4 { margin: 10px 0 4px; font-size: 14px; }
@media (max-width: 900px) { .selector-examenes { grid-template-columns: 1fr; } .selector-elegidos { position: static; max-height: none; } }
.lista-elegidos .boton-icono { width: 28px; height: 28px; border-radius: 8px; }
/* Selector segmentado (opciones excluyentes) y campos angostos del editor de estadísticas */
.segmentado { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.segmentado label { position: relative; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmentado span { display: block; padding: 8px 14px; font-size: 14px; border-left: 1px solid var(--borde); }
.segmentado label:first-child span { border-left: 0; }
.segmentado input:checked + span { background: var(--primario); color: var(--primario-texto); font-weight: 700; }
.segmentado input:focus-visible + span { box-shadow: var(--foco); }
.editor-estadistica label.angosto { flex: 0 1 280px; }
.selector-agregar .filtros label.ancho { flex: 2 1 260px; }
.selector-agregar td.pequeno { white-space: nowrap; }
/* Estadísticas: tabla del resultado (columnas por centro con encabezado de dos niveles y primera columna fija) */
.tabla-estadistica { overflow-x: auto; }
.tabla-estadistica table { width: max-content; min-width: 100%; }
.tabla-estadistica .fija { position: sticky; left: 0; z-index: 1; background: var(--superficie); min-width: 240px; max-width: 360px; white-space: normal; }
.tabla-estadistica thead .fija, .tabla-estadistica tfoot .fija { background: var(--fondo); }
.tabla-estadistica td.num, .tabla-estadistica th.num { white-space: nowrap; }
.tabla-estadistica th.grupo-columnas { text-align: center; border-bottom: 1px solid var(--borde); white-space: normal; max-width: 220px; }
.avisos-estadistica { align-items: flex-start; }
.avisos-estadistica ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

[hidden] { display: none !important; }   /* el atributo hidden siempre oculta, aunque otra regla ponga display */
.generar-estadistica .filtros label { flex: 0 1 300px; }
.editor-estadistica label.angosto, .generar-estadistica .filtros label { max-width: 320px; }

/* Vista previa del correo de una estadística publicada */
.previa-correo { width: 100%; height: 560px; border: 1px solid var(--borde); border-radius: 10px; background: #eef1f5; }