/* Panel del doctor — hoja clínica de revisión. Parte de guiones-doctor/estilo.css:
   misma familia tipográfica y el verde azulado clínico; el estado de cada variante se lee
   en el filete izquierdo, como la banda de una historia clínica. Sin sombras ni degradados. */
/* Fuentes servidas por el propio panel (OFL, public/fonts/): sin terceros. */
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --bg: #f2f5f5; --papel: #ffffff; --tinta: #14232b; --gris: #55656c; --gris-2: #7b8a90; --linea: #d7e0e2; --linea-2: #e7edee;
  --acento: #0f6c66; --acento-suave: #e1efed;
  --ok: #1d6a43; --ok-suave: #e3f0e8;
  --cambio: #8a5a00; --cambio-suave: #f7edd8;
  --no: #a1302a; --no-suave: #f6e2df;
  --f-titulo: "Literata", Georgia, serif;
  --f-texto: "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-dato: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1619; --papel: #151f23; --tinta: #e3ecee; --gris: #9fb0b6; --gris-2: #7d8f95; --linea: #29383e; --linea-2: #1f2c31;
  --acento: #55bdb2; --acento-suave: #173634; --ok: #7fcf9f; --ok-suave: #16301f; --cambio: #e2ad55; --cambio-suave: #33280f;
  --no: #ee8c82; --no-suave: #3a1c19; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f1619; --papel: #151f23; --tinta: #e3ecee; --gris: #9fb0b6; --gris-2: #7d8f95; --linea: #29383e; --linea-2: #1f2c31;
  --acento: #55bdb2; --acento-suave: #173634; --ok: #7fcf9f; --ok-suave: #16301f; --cambio: #e2ad55; --cambio-suave: #33280f;
  --no: #ee8c82; --no-suave: #3a1c19; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tinta); font: 400 17px/1.55 var(--f-texto); }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--acento); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 3px; }
.dato { font-family: var(--f-dato); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0; }
.rotulo { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); font-weight: 700; }

/* Cabecera */
.cab { border-bottom: 1px solid var(--linea); background: var(--papel); }
.cab-i, .vista { max-width: 760px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.cab-i { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 14px; }
.marca { font-family: var(--f-titulo); font-weight: 600; font-size: 16px; color: var(--tinta); text-decoration: none; }
.marca span { font-family: var(--f-texto); font-weight: 400; color: var(--gris); }
.yo { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; text-align: right; }
.sesion { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.salir { margin: 0; flex: none; }
.salir button { font: 700 13px var(--f-texto); color: var(--acento); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .marca span { display: none; } }
.vista { padding-block: 28px 96px; display: grid; gap: 28px; }
.vista:focus { outline: none; }

/* Lista de clases */
.intro { display: grid; gap: 8px; }
.intro h1 { font-size: clamp(26px, 5.5vw, 34px); line-height: 1.15; }
.intro p { color: var(--gris); max-width: 58ch; }
.clases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.clase { border-bottom: 1px solid var(--linea); }
.grupo { font-size: 13px; font-family: var(--f-texto); letter-spacing: .07em; text-transform: uppercase; color: var(--gris); font-weight: 700; margin-bottom: -16px; }
.clase a { display: grid; grid-template-columns: 104px 1fr; gap: 4px 16px; padding: 14px 4px; color: inherit; text-decoration: none; }
.clase a:hover .c-tema { color: var(--acento); }
.c-fecha { color: var(--gris); padding-top: 3px; }
.c-tema { font-size: 16px; line-height: 1.4; transition: color .15s ease; }
.c-avance { grid-column: 2; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gris); }
.c-sin { color: var(--gris-2); font-style: italic; }
.barra { display: flex; width: 120px; height: 6px; background: var(--linea-2); border-radius: 2px; overflow: hidden; flex: none; }
.barra i { display: block; height: 100%; }
.barra .b-ok { background: var(--ok); } .barra .b-cambio { background: var(--cambio); } .barra .b-no { background: var(--no); }
@media (max-width: 420px) { .clase a { grid-template-columns: 1fr; } .c-avance { grid-column: 1; } }

/* Una clase */
.volver { font-size: 15px; text-decoration: none; }
.volver::before { content: "← "; }
.ficha { display: grid; gap: 10px; }
.ficha h1 { font-size: clamp(24px, 5vw, 31px); line-height: 1.2; }
.ficha-datos { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--gris); }
.hecho { border-left: 2px solid var(--acento); padding: 2px 0 2px 14px; font-size: 15px; display: grid; gap: 2px; }
.hecho b { font-weight: 700; }
.resumen { color: var(--gris); font-size: 15px; }

.nugget { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--tinta); }
.n-cab { display: grid; gap: 4px; }
.n-cod { color: var(--acento); }
.n-cab h2 { font-size: 22px; line-height: 1.25; }
.n-idea { color: var(--gris); }
.n-meta { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 14.5px; }
.n-meta dd { margin: 2px 0 0; }
@media (max-width: 620px) { .n-meta { grid-template-columns: 1fr; gap: 8px; } }
.riesgo-medio, .riesgo-alto { color: var(--cambio); font-weight: 700; } .riesgo-alto { color: var(--no); }
.cruce { font-size: 14.5px; border-left: 2px solid var(--cambio); padding-left: 12px; }

.variante { background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--linea); border-radius: 6px; padding: 18px 18px 16px; display: grid; gap: 12px; scroll-margin-top: 16px; transition: border-color .2s ease; }
.variante[data-estado="aprobada"] { border-left-color: var(--ok); }
.variante[data-estado="cambio_pedido"] { border-left-color: var(--cambio); }
.variante[data-estado="rechazada"] { border-left-color: var(--no); }
.v-cab { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.v-cab h3 { font-size: 18px; line-height: 1.3; font-weight: 500; }
.v-cod { color: var(--gris); display: block; margin-bottom: 2px; }
.estado { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--gris); }
.estado[data-e="aprobada"] { color: var(--ok); } .estado[data-e="cambio_pedido"] { color: var(--cambio); } .estado[data-e="rechazada"] { color: var(--no); }
.pantalla { font-family: var(--f-titulo); font-size: 19px; line-height: 1.35; font-weight: 500; display: grid; gap: 4px; }
.v-resumen { display: grid; gap: 4px; line-height: 1.5; }
.formula { font-size: 13.5px; color: var(--gris); }

video { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; background: #000; border-radius: 4px; display: block; }

.pasos { list-style: none; margin: 0; padding: 0; }
.paso { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea-2); }
.p-num { color: var(--acento); padding-top: 2px; }
.p-cab { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.p-cab b { font-size: 15px; }
.p-min { color: var(--gris); }
.p-dice { font-size: 16px; margin-top: 2px; }
.p-dice.nodice { color: var(--gris); font-style: italic; }
.p-ve { font-size: 14.5px; color: var(--gris); margin-top: 2px; }
.p-ve::before { content: "Se ve: "; font-weight: 700; }
.v-nota { font-size: 14.5px; color: var(--gris); }

/* Decisión */
.decidir { border-top: 1px solid var(--linea); padding-top: 14px; display: grid; gap: 10px; }
.opciones { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; }
.opcion { font: 700 14.5px var(--f-texto); white-space: nowrap; background: var(--papel); color: var(--tinta); border: 0; border-left: 1px solid var(--linea); min-height: 44px; padding: 8px 6px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.opcion:first-child { border-left: 0; }
.opcion:active { background: var(--linea-2); }
.opcion[aria-pressed="true"][data-tipo="aprobar"] { background: var(--ok-suave); color: var(--ok); }
.opcion[aria-pressed="true"][data-tipo="pedir_cambio"] { background: var(--cambio-suave); color: var(--cambio); }
.opcion[aria-pressed="true"][data-tipo="rechazar"] { background: var(--no-suave); color: var(--no); }
.campo { display: grid; gap: 6px; }
.campo textarea { font: 16px/1.45 var(--f-texto); color: var(--tinta); background: var(--bg); border: 1px solid var(--linea); border-radius: 6px; padding: 9px 11px; min-height: 64px; resize: vertical; width: 100%; }
.campo textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; border-color: transparent; }
.campo textarea[aria-invalid="true"] { border-color: var(--cambio); }
.acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.guardar { font: 700 15px var(--f-texto); background: var(--tinta); color: var(--papel); border: 0; border-radius: 6px; min-height: 44px; padding: 10px 18px; cursor: pointer; transition: transform .16s var(--salida), opacity .15s ease; }
.guardar:active { transform: scale(0.97); }
.guardar:disabled { opacity: .4; cursor: default; transform: none; }
.aviso { font-size: 14px; color: var(--gris); transition: opacity .2s ease; }
.aviso[data-tono="ok"] { color: var(--ok); } .aviso[data-tono="error"] { color: var(--no); }
@starting-style { .aviso { opacity: 0; } }
@media (max-width: 480px) { .guardar { flex: 1; } }

/* Página de destino */
.pagina { display: grid; gap: 6px; border-top: 1px solid var(--linea-2); padding-top: 12px; }
.pag-sel { font: 16px var(--f-texto); color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: 6px; min-height: 44px; padding: 8px 36px 8px 11px; width: 100%; max-width: 360px;
  appearance: none; background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2355656c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center; }
.pag-sel:disabled { opacity: .6; }
.pag-info { font-size: 14px; color: var(--gris); }
.pag-info[data-tono="ok"] { color: var(--ok); } .pag-info[data-tono="error"] { color: var(--no); }

/* Historial */
.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nota { display: grid; gap: 2px; font-size: 14.5px; padding-left: 12px; border-left: 1px solid var(--linea); }
.nota-cab { color: var(--gris); display: flex; flex-wrap: wrap; gap: 0 10px; }
.nota-tipo { font-weight: 700; color: var(--tinta); }
.nota[data-tipo="sistema"] .nota-tipo { color: var(--gris); }
.nota-texto { white-space: pre-wrap; overflow-wrap: anywhere; }

.descartes { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--tinta); }
.descartes h2 { font-size: 20px; }
.descartes ul { list-style: none; margin: 0; padding: 0; }
.descartes li { display: grid; grid-template-columns: 112px 1fr; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--linea-2); font-size: 15px; }
.descartes .por { grid-column: 2; color: var(--gris); font-size: 14px; }
@media (max-width: 480px) { .descartes li { grid-template-columns: 1fr; } .descartes .por { grid-column: 1; } }

.vacio, .error { color: var(--gris); }
.error { color: var(--no); }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; } }