@charset "UTF-8";
/* caso.css — la página de un caso o de una edición en la parte pública: una
   CPC, una Pregunta de la Ronda (sección 3, Casos y rondas; maqueta «Sección 3 ·
   Casos y rondas», aprobada por Jairo el 2026-10-22), y el curso de
   razonamiento clínico, sus días y sus documentos (sección 4).

   Va después de /vega.css y /publica.css, que ponen los colores, los dos modos,
   las fuentes, la ruta y «¿Qué es…?». Aquí: la paleta del contenido clínico en
   los dos modos, la cabecera del caso, las pestañas y el aviso de la respuesta
   que todavía no se publica. Las pestañas las mueve /caso.js.

   La respuesta de una CPC no está en la página antes de su día (Jairo,
   2026-10-22): el HTML se lee aunque la pestaña esté escondida. Mientras tanto,
   su pestaña lleva data-cerrada y su panel solo el aviso .c-pendiente con la
   fecha. Ese día, un solo PR cambia el panel por la respuesta, quita
   data-cerrada, pasa el aviso de la cabecera a «Ver la respuesta» y marca
   "publicada": true en /datos/portada.json. Nunca antes de ese día: la vista
   previa de un PR es una dirección pública.

   El panel mientras tanto (el candado, en un <svg aria-hidden> dentro de la
   pestaña y del icono):
     <div class="c-pendiente">
       <span class="c-pendiente-icono" aria-hidden="true">[candado]</span>
       <h2>La respuesta se publica el D de Mes de AAAA</h2>
       <p>Antes de esa fecha, el caso queda abierto para que cada quien llegue a su propio diagnóstico.</p>
       <button type="button" data-ir-pestana="conclusion">Repasar la impresión diagnóstica</button>
     </div>
   y en la cabecera, en vez del botón de la respuesta:
     <span class="p-chip">[reloj]Respuesta: D de Mes de AAAA</span>
   En /cpc.html, la edición lleva ese mismo aviso hasta el PR de la respuesta. */

/* ── Paleta del contenido ────────────────────────────────────────────────
   Familias de color de los casos: texto (para letra sobre el fondo de la
   página o el claro de su familia), vivo (bordes y marcas), fondo (claro de la
   familia) y botón (relleno con letra blanca, el mismo en los dos modos). Salen
   de las zonas de vega.css: azul de Residentes, verde de Rotaciones, violeta de
   Investigación, café de Evaluaciones, gris de Docentes; rojo y amarillo del
   semáforo. */
:root {
  --c-azul: #1A3A5C;     --c-azul-vivo: #2E6DA4;     --c-azul-fondo: #DCE8F4;     --c-azul-boton: #2E6DA4;
  --c-verde: #0E5E45;    --c-verde-vivo: #1D9E75;    --c-verde-fondo: #D5EFE6;    --c-verde-boton: #157A5A;
  --c-viol: #4E2E80;     --c-viol-vivo: #7A4FB5;     --c-viol-fondo: #E8DFF4;     --c-viol-boton: #7A4FB5;
  --c-cafe: #8A3A12;     --c-cafe-vivo: #C2571E;     --c-cafe-fondo: #F7E1D3;     --c-cafe-boton: #A84A17;
  --c-rojo: #B42318;     --c-rojo-vivo: #D9534F;     --c-rojo-fondo: #FDECEA;     --c-rojo-boton: #B42318;
  --c-amarillo: #7A5300; --c-amarillo-vivo: #C9920E; --c-amarillo-fondo: #FDF0D2;
  --c-gris: #2F3A48;     --c-gris-vivo: #5B6B7F;     --c-gris-fondo: #E6EAF0;     --c-gris-boton: #5B6B7F;
  /* Un velo para las filas pares y las cabeceras de tabla, sobre cualquier fondo. */
  --c-velo: rgba(18, 38, 61, .05);
  --c-velo-fuerte: rgba(18, 38, 61, .09);
  /* Fondo oscuro con letra clara: pausas, cabeceras de tabla, el cierre. */
  --c-tinta: #1A3A5C; --c-tinta-texto: #FFFFFF; --c-tinta-suave: #C9D7E6;
}
:root[data-tema="oscuro"] {
  --c-azul: #A9CBEB;     --c-azul-vivo: #6AA7E0;     --c-azul-fondo: #182C42;
  --c-verde: #8FE0C2;    --c-verde-vivo: #3CC79A;    --c-verde-fondo: #133229;
  --c-viol: #D4C1F5;     --c-viol-vivo: #B08CEB;     --c-viol-fondo: #2A2040;
  --c-cafe: #F6C3A1;     --c-cafe-vivo: #F08A4B;     --c-cafe-fondo: #3A2216;
  --c-rojo: #F7A399;     --c-rojo-vivo: #F07167;     --c-rojo-fondo: #3D1C1C;
  --c-amarillo: #F7CF7E; --c-amarillo-vivo: #F2B544; --c-amarillo-fondo: #3A2E12;
  --c-gris: #CBD5E1;     --c-gris-vivo: #9AAAC0;     --c-gris-fondo: #232C38;
  --c-velo: rgba(255, 255, 255, .04);
  --c-velo-fuerte: rgba(255, 255, 255, .08);
  --c-tinta: #24324A; --c-tinta-texto: #E2E8F0; --c-tinta-suave: #A9BAD0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --c-azul: #A9CBEB;     --c-azul-vivo: #6AA7E0;     --c-azul-fondo: #182C42;
    --c-verde: #8FE0C2;    --c-verde-vivo: #3CC79A;    --c-verde-fondo: #133229;
    --c-viol: #D4C1F5;     --c-viol-vivo: #B08CEB;     --c-viol-fondo: #2A2040;
    --c-cafe: #F6C3A1;     --c-cafe-vivo: #F08A4B;     --c-cafe-fondo: #3A2216;
    --c-rojo: #F7A399;     --c-rojo-vivo: #F07167;     --c-rojo-fondo: #3D1C1C;
    --c-amarillo: #F7CF7E; --c-amarillo-vivo: #F2B544; --c-amarillo-fondo: #3A2E12;
    --c-gris: #CBD5E1;     --c-gris-vivo: #9AAAC0;     --c-gris-fondo: #232C38;
    --c-velo: rgba(255, 255, 255, .04);
    --c-velo-fuerte: rgba(255, 255, 255, .08);
    --c-tinta: #24324A; --c-tinta-texto: #E2E8F0; --c-tinta-suave: #A9BAD0;
  }
}

/* ── Cabecera del caso ───────────────────────────────────────────────── */
.c-pagina { gap: 26px; }
.c-cabecera { display: flex; flex-direction: column; gap: 16px; }
.c-cabecera .p-act-franja { margin-bottom: 2px; }
.c-volada {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--z-oscuro);
}
/* Con data-seccion en el <body>, el cuadrito es el ícono de la sección: lo pone /publica.css. */
.c-volada::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--z-vivo); }
.c-cabecera h1 {
  margin: 0; max-width: 22ch; font-family: var(--p-serif); font-weight: 600;
  font-size: 52px; line-height: 1.06; letter-spacing: -.015em;
}
.c-lead { margin: 0; max-width: 60ch; font-family: var(--p-serif); font-size: 21px; line-height: 1.5; color: var(--v-texto-suave); }
.c-autores {
  display: flex; flex-direction: column; gap: 4px; padding-top: 12px;
  border-top: 1px solid var(--v-borde); font-size: 15px; color: var(--v-texto-suave);
}
.c-autores strong { color: var(--v-texto); }
.c-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.c-estado .p-chip { padding: 8px 16px; font-size: 16px; }
.c-boton-respuesta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--v-ok-fondo); color: var(--v-ok-texto);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.c-boton-respuesta:hover { filter: brightness(.97); }

/* La pregunta clínica de una Pregunta de la Ronda. */
.c-pregunta-clinica {
  margin: 0; padding: 16px 20px; max-width: 80ch;
  background: var(--v-superficie); border: 1px solid var(--v-borde); border-left: 4px solid var(--z-vivo);
  border-radius: 0 10px 10px 0; font-family: var(--p-serif); font-size: 18px; line-height: 1.55;
}
.c-pregunta-clinica strong { font-family: var(--v-fuente-texto); color: var(--z-oscuro); }

/* ── Pestañas ────────────────────────────────────────────────────────── */
.c-partes { display: flex; flex-direction: column; }
.c-pestanas {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid var(--v-borde); scroll-margin-top: 12px;
}
.c-pestana {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 14px;
  border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--v-texto-suave); cursor: pointer;
}
.c-pestana:hover { color: var(--v-texto); }
.c-pestana[aria-selected="true"] { color: var(--v-texto); font-weight: 700; border-bottom-color: var(--z-vivo); }
.c-pestana svg { flex: none; }
.c-panel {
  background: var(--v-superficie); border: 1px solid var(--v-borde); border-top: 0;
  border-radius: 0 0 10px 10px; padding: 28px 32px 36px;
}
.c-panel[hidden] { display: none; }
.c-panel:focus-visible { outline: 3px solid var(--v-acento); outline-offset: 2px; }

/* La respuesta que todavía no se publica. */
.c-pendiente {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 16px;
}
.c-pendiente-icono {
  width: 56px; height: 56px; border-radius: 16px; background: var(--z-claro); color: var(--z-oscuro);
  display: flex; align-items: center; justify-content: center;
}
.c-pendiente h2 { margin: 0; font-family: var(--p-serif); font-weight: 600; font-size: 28px; }
.c-pendiente p { margin: 0; max-width: 52ch; color: var(--v-texto-suave); }
.c-pendiente button {
  margin-top: 6px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--v-borde-fuerte); background: var(--v-superficie-2); color: var(--v-texto);
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ── Curso de razonamiento clínico (sección 4) ───────────────────────────
   Maqueta «Sección 4 · Razonamiento clínico», aprobada por Jairo el
   2026-10-22. El curso y sus días usan la cabecera y las pestañas de arriba;
   los documentos de referencia, el índice «En esta página». */
.c-meta {
  margin: 0; padding: 12px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  border-top: 1px solid var(--v-borde); font-size: 15px; color: var(--v-texto-suave);
}
.c-meta li { display: inline-flex; align-items: center; gap: 8px; }
.c-meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--z-vivo); }
.c-vocab { margin: 0; padding: 12px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--v-borde); }
.c-vocab li { padding: 4px 12px; border-radius: 999px; background: var(--z-claro); color: var(--z-oscuro); font-size: 14px; font-weight: 600; }
.c-en-preparacion {
  display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  border: 1px dashed var(--v-texto-suave); color: var(--v-texto-suave); font-size: 13px; font-weight: 700;
}

/* Los tres días del bootcamp, para saltar de uno a otro. */
.c-dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.c-dias a {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 10px;
  text-decoration: none; color: var(--v-texto); background: var(--v-superficie); border: 1px solid var(--v-borde);
}
.c-dias a:hover { border-color: var(--z-vivo); }
.c-dias a[aria-current="page"] { background: var(--z-claro); border-color: var(--z-vivo); }
.c-dias-n {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--v-superficie-2); color: var(--v-texto-suave);
}
.c-dias a[aria-current="page"] .c-dias-n { background: var(--z-boton); color: #FFFFFF; }
.c-dias-t { display: flex; flex-direction: column; line-height: 1.3; }
.c-dias-t small { font-size: 13px; font-weight: 700; color: var(--z-oscuro); }
.c-dias a[aria-current="page"] .c-dias-t span { font-weight: 700; }

/* Anterior y siguiente, al final de un día. */
.c-sigue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.c-sigue a {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 10px;
  background: var(--v-superficie); border: 1px solid var(--v-borde); text-decoration: none; color: var(--v-texto);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.c-sigue a:hover { transform: translateY(-3px); border-color: var(--z-vivo); }
.c-sigue a span { font-size: 14px; color: var(--v-texto-suave); }
.c-sigue a strong { font-family: var(--p-serif); font-weight: 600; font-size: 20px; }
.c-sigue a.c-sigue-despues { grid-column: 2; align-items: flex-end; text-align: right; }

/* Documento de referencia: índice al lado en escritorio, plegado arriba en el
   celular. */
.c-doc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.c-indice {
  flex: 1 1 220px; max-width: 250px; position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 2px; font-size: 15px;
}
.c-indice-titulo { padding: 0 0 8px 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-texto-suave); }
.c-indice a { padding: 7px 14px; border-left: 3px solid var(--v-borde); color: var(--v-texto-suave); text-decoration: none; line-height: 1.35; }
.c-indice a:hover { color: var(--v-texto); }
.c-indice a[aria-current="true"] { border-left-color: var(--z-vivo); color: var(--v-texto); font-weight: 700; }
.c-indice a.c-indice-volver { margin-top: 14px; border-left-color: transparent; color: var(--v-foco); font-weight: 700; }
.c-doc-cuerpo { flex: 999 1 560px; min-width: 0; }
.c-indice-movil { display: none; }
.c-indice-movil nav { display: flex; flex-direction: column; padding: 0 18px 14px; }
.c-indice-movil nav a { padding: 8px 0; border-top: 1px solid var(--v-borde); color: var(--v-texto); text-decoration: none; }

/* Un botón que pliega lo que era un <div onclick>: se ve como antes. */
button[data-plegable] {
  display: flex; width: 100%; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}

/* La cabecera de la respuesta publicada. */
.c-respuesta-cab { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.c-respuesta-volada { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v-ok-texto); }
.c-respuesta-cab h2 { margin: 0; font-family: var(--p-serif); font-weight: 600; font-size: 32px; line-height: 1.15; }
.c-respuesta-cab p { margin: 0; font-size: 15px; color: var(--v-texto-suave); }
.c-respuesta-cab strong { color: var(--v-texto); }

/* Autoría y créditos al final del caso. */
.c-creditos { font-size: 14px; line-height: 1.7; color: var(--v-texto-suave); text-align: center; }

@media (max-width: 760px) {
  .c-cabecera h1 { font-size: 34px; }
  .c-lead { font-size: 18px; }
  .c-pregunta-clinica { font-size: 17px; padding: 14px 16px; }
  .c-panel { padding: 20px 16px 28px; }
  .c-dias, .c-sigue { grid-template-columns: minmax(0, 1fr); }
  .c-sigue a.c-sigue-despues { grid-column: auto; align-items: flex-start; text-align: left; }
  .c-indice { display: none; }
  .c-indice-movil { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .c-sigue a { transition: none; }
  .c-sigue a:hover { transform: none; }
}

@media print {
  .c-pestanas, .c-estado, .c-dias, .c-sigue, .c-indice, .c-indice-movil { display: none; }
  .c-panel[hidden] { display: block; }
  .c-panel { border: 0; padding: 0; margin-bottom: 24px; }
}