/* Estilos de pantallas e informe. Estaban en un <style> dentro de index.html;
   viven aquí para que la vista de reporte compartido (compartido.html) use
   exactamente los mismos. */
/* extensiones del sistema clínico */
/* el atributo hidden pierde contra cualquier regla display (flex, grid…):
   sin esto se veían el "!" de error y los paginadores estando ocultos */
[hidden]{display:none !important}
.field-sel{padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit; min-width:200px}
/* avisos apilables y anunciados a lectores de pantalla */
#toast-wrap{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:99; display:flex; flex-direction:column; gap:8px; align-items:center; max-width:92vw}
.toast{display:flex; align-items:center; gap:12px; background:var(--brand-deep); color:#fff; padding:11px 16px 11px 20px; border-radius:99px; font-size:.9rem; box-shadow:var(--shadow); animation:toast-in .18s ease}
.toast.bad{background:var(--risk)}
.toast.ok{background:var(--ok)}
.toast-x{border:0; background:none; color:inherit; cursor:pointer; font-size:1rem; line-height:1; opacity:.75; padding:2px 4px; border-radius:50%}
.toast-x:hover{opacity:1}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .toast{animation:none} }
:root[data-theme="dark"] .toast{color:#0C1414}
@media (prefers-color-scheme:dark){ :root[data-theme="sistema"] .toast{color:#0C1414} }

/* errores de validación por campo */
.field-top{display:flex; align-items:center; gap:5px}
.field-err{color:var(--risk); font-size:.82rem; margin-top:5px; display:flex; gap:6px; align-items:flex-start}
.field-err::before{content:"!"; font-weight:800; flex:none}
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{border-color:var(--risk)}
.req{color:var(--risk); font-weight:700}

/* zona de carga de archivo */
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  border:2px dashed var(--line-2); border-radius:14px; padding:30px 22px; cursor:pointer;
  background:var(--surface-2); color:var(--ink-2); transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-visible{border-color:var(--brand); background:var(--brand-soft)}
.dropzone.drag{border-color:var(--brand); background:var(--brand-soft)}
.dropzone[aria-busy="true"]{cursor:progress; border-style:solid}
.dropzone svg{color:var(--brand)}
.dz-main{font-weight:700; color:var(--ink)}
.dz-sub{font-size:.84rem; color:var(--muted)}
.dz-file{font-family:var(--mono); font-size:.82rem; color:var(--brand-ink); word-break:break-all}
.dropzone input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* indicador de proceso */
.spinner{
  width:17px; height:17px; border-radius:50%; flex:none;
  border:2px solid var(--line-2); border-top-color:var(--brand); animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spinner{animation-duration:2s} }

/* esqueleto de carga */
.sk{display:flex; flex-direction:column; gap:12px; padding:6px 0}
.sk-line{height:14px; border-radius:7px; background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:sk 1.1s ease-in-out infinite}
.sk-row{height:62px; border-radius:12px; background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:200% 100%; animation:sk 1.1s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .sk-line,.sk-row{animation:none} }

/* filtros por estado */
.seg{display:inline-flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:var(--r-control)}
.seg button{
  border:0; background:none; cursor:pointer; font:inherit; font-size:.84rem; font-weight:700;
  color:var(--muted); padding:5px 13px; border-radius:6px;
}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--brand-ink); box-shadow:var(--shadow)}
/* logo de marca en el acceso: dos archivos porque el morado original
   (#5B135D) es ilegible sobre fondo oscuro; la variante lo aclara */
.login-brand{flex-direction:column; align-items:flex-start; gap:6px}
.login-logo{width:min(240px, 78%); height:auto; display:block}
.login-logo.oscuro{display:none}
.login-kicker{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); font-weight:700; padding-left:2px;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="sistema"] .login-logo.claro{display:none}
  :root[data-theme="sistema"] .login-logo.oscuro{display:block}
}
:root[data-theme="dark"] .login-logo.claro{display:none}
:root[data-theme="dark"] .login-logo.oscuro{display:block}
/* el aviso legal quedaba muy por debajo del pliegue: la tarjeta ya no
   estira la página a la altura completa de la ventana */
body.no-auth .login-wrap{min-height:auto; padding:26px 0 6px}
body.no-auth .foot{padding-bottom:26px}

/* ---- formato de informe (inspirado en el PDF de referencia del cliente) ---- */
.tabla-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.tabla-resumen{border-collapse:collapse; width:100%; font-size:.9rem; min-width:560px}
.tabla-resumen th, .tabla-resumen td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.tabla-resumen thead th{
  background:var(--brand-deep); color:#F2F7F6; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
:root[data-theme="dark"] .tabla-resumen thead th{background:var(--surface-3); color:var(--ink)}
@media (prefers-color-scheme:dark){ :root[data-theme="sistema"] .tabla-resumen thead th{background:var(--surface-3); color:var(--ink)} }
.tabla-resumen tbody tr:last-child td{border-bottom:0}
.tabla-resumen tbody tr:nth-child(even){background:var(--surface-2)}
.punto{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle}
.punto.ok{background:var(--ok)} .punto.warn{background:var(--warn-dot, var(--warn)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.punto.risk{background:var(--risk)} .punto.mid{background:var(--muted)}
.punto.alta{background:#3B78D8}

/* tabla de idoneidad de medicamentos (formato del reporte de referencia) */
.ido-ley{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; font-size:.85rem}
.ido-ley dd{margin:0}
.ido-tabla{width:100%; border-collapse:separate; border-spacing:3px; font-size:.86rem; min-width:620px}
.ido-c-f{width:24%} .ido-c-g{width:30%} .ido-c-n{width:9%} .ido-c-i{width:10%}
.ido-cat-h{text-align:center; color:#538AC6; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  padding:14px 0 4px; border-bottom:1px solid var(--line); font-size:.84rem}
.ido-th th{font-weight:600; color:var(--brand-ink); font-size:.8rem; text-align:center; padding:4px}
.ido-tabla td{background:var(--surface-2); padding:5px 8px; vertical-align:middle}
.ido-tabla td.ido-info{background:none; font-size:.75rem; color:var(--muted); text-align:center}
.ido-n{text-align:center; padding:4px !important}
.ido-gen{font-weight:800; font-size:.74rem; margin-right:8px; white-space:nowrap}
.ido-gen.c-ok{color:#3E9B1E} .ido-gen.c-warn{color:#E08A00} .ido-gen.c-risk{color:#D7261E}
.ido-gen.c-alta{color:#2F63C8} .ido-gen.c-mid{color:var(--muted)}
.ido-caja{display:inline-block; min-width:38px; padding:3px 6px; font-weight:800; font-size:.74rem; text-align:center; color:#111; border-radius:2px}
.ido-ok{background:#6FB52C} .ido-nd{background:#A9D6E5} .ido-na{background:#C9C9C9}
.ido-c2{background:#FFF200} .ido-c3{background:#FFC000} .ido-c4{background:#F4511E; color:#fff}

.gen-card{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--surface); display:flex; flex-direction:column; gap:10px}
.gen-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.gen-head h3{font-family:var(--font-head)}
.caja{background:var(--surface-2); border-radius:10px; padding:12px 14px; font-size:.9rem}
.caja strong:first-child{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--brand-ink)}
/* llamado que no se sostiene: se distingue del resultado normal sin usar
   el rojo de riesgo, porque no hay un hallazgo clínico que comunicar */
.caja-aviso{background:var(--warn-soft); border:1px solid var(--warn)}
.caja-aviso strong:first-child{color:var(--warn)}
.gen-revisar{border-color:var(--warn)}
/* reporte viejo: el aviso va antes del informe, no dentro, para que se lea
   aunque el doctor no baje a las fichas */
.aviso-viejo{background:var(--warn-soft); border:1px solid var(--warn); border-radius:12px;
  padding:14px 16px; margin:14px 0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.aviso-viejo p{font-size:.9rem; flex:1; min-width:240px}
/* guía del flujo en el expediente: los cuatro pasos y el siguiente */
.pasos{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:0}
.pasos ol{list-style:none; margin:0 0 12px; padding:0; display:flex; gap:8px; flex-wrap:wrap}
.pasos li{flex:1; min-width:120px; display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600;
  color:var(--muted); padding-bottom:8px; border-bottom:3px solid var(--line)}
.pasos li .n{flex:none; width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center;
  border:2px solid var(--line-2); font-size:.76rem}
.pasos li.hecho{color:var(--ok); border-bottom-color:var(--ok)}
.pasos li.hecho .n{background:var(--ok); border-color:var(--ok); color:var(--surface)}
.pasos li.actual{color:var(--brand-ink); border-bottom-color:var(--brand)}
.pasos li.actual .n{background:var(--brand); border-color:var(--brand); color:var(--surface)}
.paso-sig{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--brand-soft); border-radius:10px; padding:12px 14px}
.paso-sig.listo{background:var(--ok-soft)}
.paso-sig p{margin:0; font-size:.9rem; flex:1; min-width:240px}
.paso-sig .botones{display:flex; gap:8px; flex-wrap:wrap}
/* la tarjeta a la que lleva un botón de la guía parpadea una vez */
.resalta{animation:resalta 1.8s ease-out}
@keyframes resalta{0%,30%{box-shadow:0 0 0 3px var(--brand)} 100%{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion: reduce){ .resalta{animation:none; outline:3px solid var(--brand)} }
/* acciones de una fila. Con cinco botones, la columna de ancho fijo los
   partía en dos renglones desiguales; ahora la columna se ajusta al
   contenido y los botones comparten tamaño y no se cortan. */
.acciones{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.btn-mini{padding:5px 12px; font-size:.78rem; white-space:nowrap}
/* acción destructiva en rojo, para que contraste con el resto. Va con
   doble clase porque .btn.ghost tiene más peso que una clase suelta y se
   comía el color. */
.btn.btn-baja{color:var(--risk)}
.btn.btn-baja:hover{border-color:var(--risk)}
/* la acción destructiva se separa del resto para no darle a Baja por inercia */
.acciones .sep{width:1px; align-self:stretch; min-height:22px; margin:0 5px; background:var(--line-2)}
@media (max-width:620px){ .acciones .sep{display:none} }

/* Medicación capturada: hacer visible qué reconoció el motor.
   El cotejo de fármacos falla en silencio —una marca no reconocida queda
   fuera del cálculo y el informe sale como si el paciente no la tomara—,
   así que el estado de cada nombre se muestra en el chip y lo no reconocido
   se explica aparte, no solo con un ícono. */
.med-chip{display:inline-flex; align-items:center; gap:7px; padding:6px 8px 6px 11px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface-2); font-size:.85rem}
.med-gen{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; padding:2px 6px;
  border-radius:6px; background:var(--brand-soft); color:var(--brand-ink); white-space:nowrap}
.med-chip.med-modula{border-color:var(--warn); background:var(--warn-soft)}
.med-chip.med-modula .med-gen{background:transparent; color:var(--warn); border:1px solid var(--warn)}
.med-chip.med-desconocido{border-style:dashed; border-color:var(--warn); color:var(--warn)}
.med-x{border:0; background:none; cursor:pointer; color:var(--risk); font-size:.95rem;
  line-height:1; padding:2px 4px; border-radius:6px}
.med-x:hover{background:var(--risk-soft)}
.med-aviso{background:var(--warn-soft); border:1px solid var(--warn); border-radius:10px;
  padding:10px 12px; margin:8px 0; font-size:.85rem}
.med-aviso p{margin:0} .med-aviso p + p{margin-top:5px}
.med-sug{color:var(--muted)}
.med-resumen{font-size:.82rem; color:var(--muted); margin:6px 0 0}
.lnk{border:0; background:none; padding:0; font:inherit; color:var(--brand-ink);
  text-decoration:underline; cursor:pointer}
.lnk:hover{color:var(--brand-deep)}
/* Sección de interacciones: cada hallazgo es una ficha con el gen a la
   izquierda, el par en negritas y la consecuencia redactada debajo. La
   consecuencia importa más que el nombre del gen, así que va en cuerpo
   normal y a ancho completo, no como pie de nota. */
.int-h{font-family:var(--font-head); font-size:.95rem; margin:14px 0 8px}
.int-h:first-child{margin-top:0}
.int-fila{display:flex; flex-direction:column; gap:6px; padding:12px 14px}
.int-cab{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.int-gen{font-size:.7rem; letter-spacing:.06em; padding:3px 7px; border-radius:6px;
  background:var(--brand-soft); color:var(--brand-ink); white-space:nowrap}
.int-causa{font-size:.88rem}
.int-fila p{margin:0}
/* Consulta de prescripción. El veredicto manda: color, punto y etiqueta van
   arriba y a tamaño grande, porque es lo único que el médico mira si tiene
   treinta segundos. El razonamiento queda debajo para quien quiera verlo. */
.field select{padding:10px 14px; border:1px solid var(--line); border-radius:9px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:.95rem}
.field select:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
.consulta{margin-top:16px; border-left:4px solid var(--line-2)}
.consulta-risk{border-left-color:var(--risk)}
.consulta-warn{border-left-color:var(--warn)}
.consulta-ok{border-left-color:var(--ok)}
.consulta-cab{display:flex; align-items:flex-start; gap:12px; margin-bottom:6px}
.consulta-cab .punto{margin-top:9px; flex:none}
.consulta-cab h2{font-family:var(--font-head); margin:2px 0}
.consulta-risk .eyebrow{color:var(--risk)}
.consulta-warn .eyebrow{color:var(--warn)}
.consulta-ok .eyebrow{color:var(--ok)}
.consulta-bloque{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.consulta-bloque h4{font-family:var(--font-head); font-size:.9rem; margin-bottom:7px}
.lista{list-style:none; display:flex; flex-direction:column; gap:9px; font-size:.9rem}
.lista li{padding-left:14px; border-left:2px solid var(--line-2)}
/* Anotaciones clínicas de ClinPGx. Son cientos, así que van agrupadas por
   variante y plegadas; solo se abren solas las variantes con evidencia alta
   o que hablan de un fármaco que el paciente ya toma. La lectura del
   genotipo del paciente va destacada: es lo único de la ficha que se
   refiere a él y no a la variante en abstracto. */
/* un enlace con aspecto de botón no debe llevar el subrayado del enlace:
   junto a un <button> se veía distinto sin motivo */
a.btn{text-decoration:none}
.anot-grupo{margin-bottom:8px}
/* el nombre de la variante y el conteo van en línea dentro del summary y
   quedaban pegados ("AA110 anotaciones") */
.anot-grupo > summary .t-sub{margin-left:10px}
/* DPWG y ficha FDA dentro de la ficha del fármaco: van visualmente
   separadas de la recomendación CPIC, que es la que manda, y cada bloque
   lleva su fuente en la cabecera */
.guia-bloque{border-top:1px solid var(--line); margin-top:12px; padding-top:10px}
.guia-fuente{font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--muted); margin:0 0 7px}
.guia-fila{font-size:.86rem; margin:0 0 9px}
.guia-fila:last-child{margin-bottom:0}
.guia-rec{display:block; margin-top:4px; white-space:pre-line}
.guia-impl{display:block; margin-top:4px; font-size:.8rem}

.anot{border-left:2px solid var(--line-2); padding:10px 0 10px 14px; margin-bottom:12px}
.anot:last-child{margin-bottom:0}
.anot-cab{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:6px}
.anot-farm{font-size:.9rem; margin:0 0 5px}
.anot-lectura{font-size:.88rem; margin:0 0 6px; background:var(--surface-2);
  border-radius:8px; padding:9px 11px}
.anot-link{font-size:.8rem}
.anot-resto{margin-top:6px; border-top:1px solid var(--line); padding-top:10px}
.anot-resto > summary{cursor:pointer; font-size:.84rem; color:var(--brand-ink); padding:6px 0}
.anot-resto > summary:hover{color:var(--brand-deep)}
/* aviso de alcance de la revisión de interacciones: va al pie de la
   respuesta y no arriba, porque se lee después del resultado, que es
   cuando el médico decide qué hacer con él */
.aviso-alcance{border-radius:10px; padding:12px 14px; margin:14px 0 10px; font-size:.84rem}
.aviso-alcance p{margin:0} .aviso-alcance p + p{margin-top:7px}
.aviso-alcance strong:first-child{color:var(--warn)}
/* Selector de tema. Va junto a "Salir" porque es preferencia de quien usa el
   sistema, no una acción del expediente. Cicla claro → oscuro → automático. */
.user-tema{min-width:92px; justify-content:center}
/* destello del destino al usar "Ver detalle" */
.saltado{animation:destello 1.5s ease-out}
@keyframes destello{from{box-shadow:0 0 0 3px var(--brand)} to{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){ .saltado{animation:none; box-shadow:0 0 0 3px var(--brand)} }

.freq-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.freq-card{margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px}
.pastel{
  width:88px; height:88px; border-radius:50%; flex:none;
  background:conic-gradient(var(--brand) 0 var(--ang), var(--brand-2-soft) var(--ang) 360deg);
  border:1px solid var(--line);
}

/* celda de interpretación: punto y texto alineados arriba, y la etiqueta
   "ajustado" en su propio renglón para que las filas no se descuadren */
.celda-fenotipo{line-height:1.35}
.fen-linea{display:flex; align-items:flex-start; gap:8px}
.fen-linea .punto{margin:6px 0 0; flex:none}
.fen-ajuste{display:inline-block; margin-top:5px; margin-left:17px}
.fen-prelim{display:block; margin-left:17px; margin-top:3px; font-size:.78rem; color:var(--muted)}

/* carátula y páginas del PDF: solo al imprimir */
.portada, .solo-pdf{display:none}

.solo-print{display:none}
.report-head-card{border-top:4px solid var(--brand)}
/* índice del reporte: con 95 fármacos y 6 secciones hace falta poder saltar */
.rep-index{display:flex; flex-direction:column; gap:9px; background:var(--surface-2); border-radius:12px; padding:14px 16px}
.rep-index-links{display:flex; flex-wrap:wrap; gap:8px}
.rep-index-links a{
  font-size:.85rem; font-weight:700; text-decoration:none; color:var(--brand-ink);
  background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:5px 13px;
}
.rep-index-links a:hover{border-color:var(--brand)}
.report{display:flex; flex-direction:column; gap:38px; margin-top:10px}
.report-sec > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.report-sec > summary::-webkit-details-marker{display:none}
.report-sec > summary h2{border:0; padding:0}
.rs-toggle{margin-left:auto; color:var(--muted); font-size:1.3rem; line-height:1}
.rs-toggle::before{content:"–"}
.report-sec:not([open]) .rs-toggle::before{content:"+"}
.report-sec > summary:hover .rs-toggle{color:var(--ink)}
.rs-body{margin-top:16px; display:flex; flex-direction:column; gap:12px}
/* móvil y tableta: objetivos táctiles cómodos (mínimo ~40px) y controles
   que no se aprietan. Auditado en 390px, 768px y 1024px. */
@media (max-width:820px){
  .filterbar{gap:8px}
  .filterbar .btn, .filterbar input, .filterbar .field-sel{min-height:42px}
  .btn{min-height:42px}
  .seg{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .seg button{min-height:38px; padding:8px 14px; white-space:nowrap}
  .field input, .field select, .field-sel{min-height:42px}
  .dropzone{padding:26px 16px}
  .rep-index-links a{padding:8px 14px}
  /* enlaces dentro de listas y fichas: en escritorio van en línea, con dedo
     necesitan área propia (PubMed, ClinPGx) */
  .acc-body a, .t-sub a, .rowlist a[target="_blank"]{display:inline-block; padding:7px 0}
  #med-chips .med-x{min-width:30px; min-height:30px; font-size:1rem}
  .med-aviso .lnk{display:inline-block; padding:6px 0}
  .toast-x{min-width:30px; min-height:30px}
  .modal{max-width:100% !important}
  .report{gap:28px}
}
@media (max-width:900px){
  /* con más secciones, la navegación y la barra superior deben poder
     acomodarse en varias líneas en vez de empujar el ancho de la página */
  .chipnav{flex-wrap:wrap; row-gap:8px}
  .topbar{flex-wrap:wrap; row-gap:8px}
  .topbar > div[style*="flex:1"]{flex-basis:100%; height:0}
  /* enlaces dentro de las filas: área táctil propia */
  .trow a.t-name{display:inline-block; padding:3px 0}
  .card a{display:inline-block; padding:4px 0}
  .user-out{min-height:38px; padding:8px 14px}
  .user-chip{padding:7px 12px}
  .brand{padding:6px 0}
}
@media (max-width:560px){
  /* la barra superior no debe robar tres líneas al contenido */
  .brand span{white-space:nowrap; font-size:.82rem}
  .user-chip{white-space:nowrap; max-width:34vw; overflow:hidden; text-overflow:ellipsis}
}
@media (max-width:520px){
  .filterbar{flex-direction:column; align-items:stretch}
  .filterbar .btn, .filterbar input, .filterbar .field-sel, .filterbar .seg{width:100%}
  .filterbar .pill{align-self:flex-start}
  #pager{flex-direction:row; justify-content:space-between}
  #pager .btn{width:auto; flex:1}
  .trow{padding:14px}
}

@media print{
  /* el PDF siempre sale en claro, aunque el navegador esté en tema oscuro:
     de lo contrario los textos claros quedan sobre el papel blanco */
  /* se repiten los mismos selectores que usa el tema oscuro para ganar por
     especificidad: si no, las variables oscuras siguen mandando al imprimir */
  :root, :root[data-theme="sistema"], :root[data-theme="dark"], :root[data-theme="light"]{
    --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F4F3; --surface-3:#E6EAE9;
    --ink:#111111; --ink-2:#333333; --muted:#555555; --line:#CCCCCC; --line-2:#BBBBBB;
    --brand:#5F2167; --brand-ink:#5F2167; --brand-soft:#F3EAF6; --brand-deep:#5F2167;
    --brand-2:#538AC6; --brand-2-soft:#E4EEF8;
    --ok:#1F6B45; --ok-soft:#E0F0E7; --warn:#7E5509; --warn-soft:#F6EDD9;
    --risk:#A5342A; --risk-soft:#F8E4E1;
    --shadow:none;
  }
  /* solo el distintivo de estado lleva borde al imprimir: la píldora neutra
     ya es texto llano y un recuadro alrededor la volvería a convertir en ruido */
  .pill.ok, .pill.warn, .pill.risk, .pill.brand{border:1px solid #bbb}
  .topbar,.chipnav,.filterbar,.foot,.note a,.screen-head,.grid.cols-2,#modal-root,.no-print,.rep-index{display:none !important}
  body{background:#fff; color:#111; padding:0}
  .main{max-width:100%; padding:0}
  .report .card,.report .rowlist,.report details{box-shadow:none; border-color:#ccc}
  .report details{page-break-inside:avoid}
  .rs-toggle{display:none}
  a{color:#111; text-decoration:none}
  /* El aviso legal va como bloque al final, NO fijo: Chrome coloca mal los
     elementos position:fixed al paginar y se encimaban con el contenido de
     la página siguiente. El aviso principal ya va en la carátula. */
  .print-legal{
    display:block !important; font-size:8pt; line-height:1.4; color:#444;
    border-top:1px solid #ccc; padding-top:4mm; margin-top:6mm; break-inside:avoid;
  }
  .gen-card, .freq-card{break-inside:avoid}
  /* El PDF lleva solo la carátula y el resumen de resultados: es lo que se
     entrega en mano. El detalle por gen, los medicamentos, la evidencia de
     asociación y las frecuencias se consultan en el sistema, donde además
     se pueden buscar. */
  .report > .report-sec:not(#sec-resumen):not(#sec-idoneidad){display:none !important}
  .report > p.note{display:none !important}   /* el aviso ya va en la carátula y al pie */
  /* Cada sección abre en página propia. Con break-after:avoid, Chrome dibujaba
     el encabezado recortado al final de la página anterior Y otra vez arriba
     de la siguiente (fallo conocido con summary en flex). Además así el
     informe queda ordenado por temas, como el de referencia. */
  .report-sec{break-before:page}
  .report .report-sec:first-of-type{break-before:auto}
  .report-sec > summary{display:block; break-after:avoid; break-inside:avoid}
  .report-sec > summary h2{font-size:15pt}
  .tabla-resumen thead{display:table-header-group}
  /* idoneidad: cada categoría se puede partir entre hojas, pero no una fila */
  .ido-tabla{min-width:0; font-size:8.6pt; border-spacing:2px}
  .ido-tabla tr{break-inside:avoid}
  .ido-cat-h, .ido-th{break-after:avoid}
  .ido-caja, .ido-tabla td, .punto.alta{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .ido-tabla td{background:#E6E6E8 !important; padding:.6mm 2mm; line-height:1.25}
  .ido-n{padding:.4mm !important}
  .ido-caja{padding:.5mm 1.5mm; font-size:7.5pt; min-width:9mm}
  .ido-gen{font-size:7.5pt}
  .ido-cat-h{padding:3mm 0 1mm; font-size:8.5pt}
  .ido-th th{padding:.5mm; font-size:8pt}
  .ido-tabla td.ido-info{background:none !important}
  .ido-ley{font-size:8.5pt}
  .tabla-resumen tr{break-inside:avoid}
  /* los colores del semáforo y de las etiquetas deben imprimirse */
  .punto, .pill, .tabla-resumen thead th, .caja{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  /* la carátula sustituye a la ficha de cabecera y ocupa su propia página */
  .report-head-card{display:none !important}
  .portada{
    display:block !important;   /* bloque, no flex: si no, no se pagina bien */
    break-after:page;
  }
  .portada-logo{width:52mm; height:auto}
  .portada-hero{width:100%; height:68mm; object-fit:cover; border-radius:4mm}
  .portada-kicker{
    font-family:var(--mono); font-size:8.5pt; letter-spacing:.18em;
    text-transform:uppercase; color:#5F2167; font-weight:700;
  }
  .portada-titulo h1{font-size:26pt; line-height:1.1; margin:3mm 0 2mm; color:#111}
  .portada-sub{font-size:11pt; color:#333; max-width:150mm}
  .portada-datos{
    display:grid; grid-template-columns:1fr 1fr; gap:4mm 10mm;
    margin:2mm 0; padding:5mm 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc;
  }
  .portada-datos dt{font-family:var(--mono); font-size:7.5pt; letter-spacing:.12em; text-transform:uppercase; color:#666}
  .portada-datos dd{margin:1mm 0 0; font-size:11pt; font-weight:700; color:#111}
  .portada-legal{font-size:8pt; line-height:1.4; color:#444; font-style:italic}
  .portada{padding-bottom:6mm}
  .solo-print{display:inline-block !important}
  p.solo-print, .nota-print{display:block !important; font-size:8.5pt; color:#444; font-style:italic; margin-bottom:3mm}
  .acc{break-inside:avoid}
  .tabla-resumen{font-size:9pt}
  /* en papel no sirve un enlace: se quita la columna y su espacio se reparte */
  #sec-resumen .tabla-resumen th:nth-child(5),
  #sec-resumen .tabla-resumen td:nth-child(5){display:none}
  #sec-resumen .tabla-resumen th:nth-child(1){width:15%}
  #sec-resumen .tabla-resumen th:nth-child(2){width:29%}
  #sec-resumen .tabla-resumen th:nth-child(3){width:27%}
  #sec-resumen .tabla-resumen th:nth-child(4){width:29%}
  .tabla-resumen thead th{background:#e8e8e8 !important; color:#111 !important}
  /* CLAVE: Chrome no fragmenta bien dentro de contenedores flex — los saltos
     de página se ignoran y los encabezados se dibujaban dos veces. Al imprimir
     todo pasa a flujo de bloque, que sí respeta la paginación. */
  .report, .portada, .rs-body, .gen-card, .freq-card{display:block}
  .report > * + *{margin-top:7mm}
  .portada > * + *{margin-top:5mm}
  .rs-body > * + *{margin-top:4mm}
  .gen-card > * + *{margin-top:3mm}
  .fen-linea{display:block}
  .fen-linea .punto{display:inline-block; margin:0 6px 1px 0}
  .gen-head{display:block}
  .gen-head .pill{margin-top:2mm}
  /* Encabezado y pie en cada hoja, como el reporte de Novagenic. Van en las
     cajas de margen de @page (Chrome 131+): un elemento position:fixed se
     encimaba con el contenido al paginar. El nombre del paciente lo pone el
     propio informe en un <style> (ver reporte.js). */
  @page{
    margin:20mm 12mm 20mm;
    @top-left{font:9pt "Open Sans", sans-serif; color:#555; vertical-align:bottom; padding-bottom:3mm; border-bottom:.4pt solid #bbb}
    @top-right{content:"novagenic"; font:700 13pt "Exo", sans-serif; color:#5F2167; vertical-align:bottom; padding-bottom:2mm; border-bottom:.4pt solid #bbb}
    @bottom-left{content:"NOVAGENIC MÉXICO · Adolfo López Mateos 3395-204, CDMX, 14120 · www.novagenic.com"; font:7.5pt "Open Sans", sans-serif; color:#555; vertical-align:top; padding-top:3mm; border-top:.4pt solid #bbb}
    @bottom-right{content:counter(page); font:700 8pt "Open Sans", sans-serif; color:#fff; background:#538AC6; border-radius:50%; width:6mm; height:6mm; text-align:center; vertical-align:middle; margin-top:3mm}
  }
  /* la portada y la contraportada van limpias */
  @page :first{@top-left{content:none !important} @top-right{content:none} @bottom-left{content:none} @bottom-right{content:none}}
  @page limpia{margin:15mm 12mm; @top-left{content:none !important} @top-right{content:none} @bottom-left{content:none} @bottom-right{content:none}}

  .solo-pdf{display:block !important}
  .pdf-pag{break-before:page}
  .pdf-h{font-size:17pt; color:#1d2a44; margin:0 0 3mm; border:0; padding:0}
  .pdf-intro{font-size:9.5pt; color:#444; margin:0 0 5mm}
  /* tarjeta: rejilla de 4 columnas en un marco punteado, como la del reporte de referencia */
  .pdf-tarjeta{break-before:page; break-after:page}
  .tj-marco{border:1.2pt dashed #333; padding:3mm}
  .tj-cab{display:flex; align-items:center; gap:8mm; margin-bottom:2mm}
  .tj-cab img{height:6.5mm; width:auto}
  .tj-cab strong{font-size:10pt}
  .tj-cab span{margin-left:auto; font-size:9pt; color:#444}
  .tj-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5mm}
  .tj-celda{
    display:grid; grid-template-columns:5mm 1fr auto; grid-template-rows:auto auto; column-gap:2mm;
    border:.6pt solid #999; padding:1.1mm 1.8mm; break-inside:avoid;
  }
  .tj-color{grid-row:1 / span 2; width:4.2mm; height:4.2mm; border-radius:0; align-self:center; margin:0}
  .tj-gen{font-size:8pt; font-weight:800}
  .tj-tag{font-size:7.5pt; text-align:right; color:#333}
  .tj-sub{grid-column:2 / span 2; font-size:6.8pt; line-height:1.25; color:#444; overflow-wrap:anywhere}
  .tj-ley{display:grid; grid-template-columns:auto 1fr; gap:1mm 4mm; margin-top:4mm; font-size:8.3pt}
  .tj-ley dt{font-weight:800; color:#1d2a44}
  .tj-ley dd{margin:0; color:#333}
  .tj-nota{font-size:8.5pt; margin-top:2mm; color:#333}
  .tj-color, .tj-cab img{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  /* conceptos, bibliografía y legal: texto corrido */
  .pdf-concepto{break-inside:avoid; margin-bottom:2.6mm}
  .pdf-concepto h3{font-size:10pt; margin:0 0 1mm; color:#111}
  .pdf-concepto p, .pdf-legal p{font-size:9.2pt; line-height:1.4; text-align:justify; color:#222}
  .pdf-legal p{margin:0 0 3.5mm}
  .pdf-legal h3{font-size:10.5pt; margin:5mm 0 1.5mm}
  .pdf-copy{font-size:8.5pt !important; color:#555 !important}
  .pdf-biblio ul{padding-left:4mm; margin:0}
  .pdf-biblio li{font-size:9pt; line-height:1.45; margin-bottom:2.2mm; overflow-wrap:anywhere}
  /* anexo en tres columnas */
  .anx-cols{column-count:3; column-gap:7mm}
  .anx-gen{break-inside:avoid; margin-bottom:3mm}
  .anx-cab{font-size:8pt; color:#5F2167; border-bottom:1.2pt solid #8DB3DE; padding-bottom:.8mm; margin:0 0 1mm; display:flex; gap:3mm}
  .anx-cab .mono{font-size:7.5pt; color:#5F2167}
  .anx-fila{display:flex; justify-content:space-between; font-size:8.3pt; margin:0; line-height:1.25}
  /* contraportada */
  .pdf-contra{
    page:limpia; break-before:page; height:235mm; margin-top:0 !important; box-sizing:border-box;
    border:1.6pt solid #5F2167; position:relative; text-align:center;
  }
  .pdf-contra img{width:120mm; height:auto; margin-top:88mm}
  .pdf-contra-datos{position:absolute; left:0; right:0; bottom:12mm}
  .pdf-contra-datos p{margin:0; font-size:11pt; color:#111}
}
.print-legal{display:none}