:root {
    /* Marca Gnitif (manual de marca): azul marino #173C66, azul intermedio #2575A3, cian tecnológico #1FBDC4.
       El cian solo como acento decorativo (degradados, bordes, iconos): sobre blanco no da contraste suficiente para texto. */
    --gnitif-marino: #173C66;
    --gnitif-intermedio: #2575A3;
    --gnitif-cian: #1FBDC4;
    --gnitif-degradado: linear-gradient(90deg, var(--gnitif-marino), var(--gnitif-intermedio) 55%, var(--gnitif-cian));
    --fuente-titulos: "Poppins", "Montserrat", "Segoe UI", sans-serif;
    --fuente-texto: "Lora", "Merriweather", Georgia, serif;
    --color-texto: #1b2a3d;
    --color-fondo: #f4f7fa;
    --color-primario: var(--gnitif-intermedio);
    --color-primario-oscuro: var(--gnitif-marino);
    --color-borde: #d6dee7;
    --color-error: #b3261e;
    --color-error-fondo: #fbe9e7;
    --color-info-fondo: #e6f3f8;
    --color-cant-miss: #c0392b;
    --color-cant-miss-fondo: #fdecea;
    --color-advertencia: #9a6700;
    --color-advertencia-fondo: #fff4e0;
    --color-alta: #c0392b;
    --color-alta-fondo: #fdecea;
    --color-media: #9a6700;
    --color-media-fondo: #fff4e0;
    --color-baja: #1f7a4d;
    --color-baja-fondo: #e7f6ee;
    --color-descartada: #666;
    --color-descartada-fondo: #eceef1;
    --radio: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.5;
}

.barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--color-borde);
    font-family: var(--fuente-titulos);
    position: relative;
}

.barra-superior::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gnitif-degradado);
}

.marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-primario-oscuro);
    text-decoration: none;
}

.marca-icono { width: 36px; height: 36px; border-radius: 9px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.35rem; color: var(--gnitif-marino); letter-spacing: -0.01em; }
.marca-acento { background: linear-gradient(180deg, var(--gnitif-intermedio), var(--gnitif-cian)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-lema { font-family: var(--fuente-texto); font-size: 0.78rem; color: var(--gnitif-marino); }

/* Títulos y controles en Poppins (tipografía principal); textos largos en Lora (secundaria). */
h1, h2, h3, h4, label, button, .boton-primario, .badge, .plegable summary, .titulo-seccion,
.diagnostico-principal, .diagnostico-principal-nombre, .texto-accion, .fecha, .fecha-caso, .selector-ejemplo {
    font-family: var(--fuente-titulos);
}
h1, h2, h3 { color: var(--gnitif-marino); }
a { color: var(--color-primario); }
a:hover { color: var(--gnitif-marino); }

.tarjeta-acceso { text-align: left; }
.logo-acceso { display: block; width: min(320px, 100%); height: auto; margin: 0 auto 1.25rem; }

.barra-superior nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.barra-superior nav a, .enlace-boton {
    color: var(--color-primario);
    text-decoration: none;
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.usuario-actual {
    color: #666;
    font-size: 0.9rem;
}

.contenido {
    max-width: 760px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.tarjeta-formulario, .tarjeta-resultado {
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.5rem 2rem;
}

label {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

input, select, textarea {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    font: inherit;
}

textarea { resize: vertical; }

.boton-primario {
    margin-top: 1.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(90deg, var(--gnitif-marino), var(--gnitif-intermedio));
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.boton-primario:hover { background: var(--gnitif-marino); }
.boton-primario:disabled { background: var(--color-descartada); opacity: 0.8; cursor: wait; }

.texto-ayuda {
    color: #555;
    font-size: 0.95rem;
}

.aviso {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.aviso-error { background: var(--color-error-fondo); color: var(--color-error); }
.aviso-info { background: var(--color-info-fondo); color: var(--color-primario-oscuro); margin-top: 1rem; }

.encabezado-resultado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.reporte-markdown h2 { color: var(--color-primario-oscuro); margin-top: 1.75rem; }
.reporte-markdown h3 { margin-top: 1.25rem; }

.enlace-volver {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--color-primario);
}

.fecha-caso {
    color: #888;
    font-size: 0.85rem;
    white-space: nowrap;
}

/*
 * Historial: tarjetas clicables, mismo lenguaje visual que resultado.html.
 * El diagnóstico principal va como TÍTULO (h4), no como badge -- es una frase
 * larga, y forzarla dentro de un badge/pill fue justo lo que se desbordaba
 * antes de este cambio. El badge ahora solo carga una palabra corta
 * ("Evaluado" / "Sin resolver"), que es lo que .badge espera.
 */

.contenedor-historial {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tarjeta-historial {
    display: block;
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tarjeta-historial:hover {
    border-color: var(--color-primario);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.tarjeta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.fecha {
    font-size: 0.875rem;
    color: #64748b;
    white-space: nowrap;
}

.badge-evaluado { background: var(--color-info-fondo); color: var(--color-primario-oscuro); }
.badge-pendiente { background: var(--color-descartada-fondo); color: var(--color-descartada); }

.diagnostico-principal {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primario-oscuro);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.fragmento-caso {
    font-size: 0.95rem;
    color: #475569;
    margin: 0 0 1.1rem;
    line-height: 1.5;
}

.tarjeta-footer {
    display: flex;
    justify-content: flex-end;
}

.texto-accion {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primario);
}

.tarjeta-historial:hover .texto-accion {
    text-decoration: underline;
    color: var(--color-primario-oscuro);
}

.pie {
    max-width: 760px;
    margin: 2rem auto 1rem;
    padding: 0 1rem;
    font-size: 0.8rem;
    color: #888;
    text-align: center;
}

.form-inline { display: inline; }

.pie p { margin: 0.25rem 0; }
.pie-enlaces { margin-top: 0.5rem; font-family: var(--fuente-titulos); }
.pie-enlaces a { color: var(--color-primario); text-decoration: none; }
.pie-enlaces a:hover { text-decoration: underline; }

/* Casillas obligatorias (términos, desidentificación): el input normal ocupa el 100% del ancho, aquí no. */
.casilla { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-family: var(--fuente-texto); font-size: 0.92rem; margin-top: 1rem; }
.casilla input[type="checkbox"] { width: auto; margin: 0.25rem 0 0; flex-shrink: 0; accent-color: var(--gnitif-intermedio); }
.aviso-privacidad { background: var(--color-advertencia-fondo); color: var(--color-texto); border-left: 3px solid var(--color-advertencia); margin: 1rem 0 0; font-size: 0.92rem; }

/* Páginas legales */
.documento-legal h1 { margin-top: 0; }
.documento-legal h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.documento-legal li { margin-bottom: 0.35rem; }
.aviso-borrador { background: var(--color-advertencia-fondo); color: var(--color-advertencia); border-left: 3px solid var(--color-advertencia); }
.version-documento { color: #666; font-size: 0.85rem; }

/* --- Resultado del caso: tarjetas, badges y plegables --- */

.resultado { max-width: 820px; margin: 0 auto; }

.tarjeta {
    background: white;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.tarjeta h2 { margin-top: 0; color: var(--color-primario-oscuro); font-size: 1.15rem; }
.tarjeta h3 { margin-top: 0; }

.titulo-seccion { color: var(--color-primario-oscuro); font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }

.lista-diferencial { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }

.tarjeta-hipotesis { border-left: 4px solid var(--color-borde); margin-bottom: 0; }

.tarjeta-cant-miss {
    border-left: 4px solid var(--color-cant-miss);
    background: var(--color-cant-miss-fondo);
}

.encabezado-hipotesis {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.encabezado-hipotesis h3 { font-size: 1.05rem; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-cant-miss { background: var(--color-cant-miss); color: white; }

.badges-probabilidad { display: flex; gap: 0.5rem; margin: 0.4rem 0 0.6rem; flex-wrap: wrap; }

.badge-probabilidad { font-weight: 600; }
.badge-pretest-alta, .badge-posttest-alta { background: var(--color-alta-fondo); color: var(--color-alta); }
.badge-pretest-media, .badge-posttest-media { background: var(--color-media-fondo); color: var(--color-media); }
.badge-pretest-baja, .badge-posttest-baja { background: var(--color-baja-fondo); color: var(--color-baja); }
.badge-posttest-descartada { background: var(--color-descartada-fondo); color: var(--color-descartada); }

.categoria-fisiopatologica {
    color: #666;
    font-size: 0.85rem;
    font-style: italic;
    margin: 0 0 0.5rem;
}

.plegable {
    margin-top: 0.75rem;
    border-top: 1px solid var(--color-borde);
    padding-top: 0.5rem;
}

.plegable summary {
    cursor: pointer;
    color: var(--color-primario);
    font-weight: 600;
    font-size: 0.9rem;
}

.plegable ul { margin: 0.4rem 0 0.6rem; padding-left: 1.25rem; }

.hallazgos-titulo { font-weight: 700; margin: 0.5rem 0 0.2rem; font-size: 0.9rem; }
.hallazgos-a-favor { color: var(--color-baja); }
.hallazgos-en-contra { color: var(--color-alta); }

.diagnostico-principal-nombre {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primario-oscuro);
}

.lista-citas { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }

.tarjeta-cita {
    background: var(--color-info-fondo);
    border-left: 3px solid var(--gnitif-cian);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.cita-afirmacion { margin: 0 0 0.3rem; font-weight: 600; }
.cita-fuente { margin: 0; font-size: 0.85rem; color: #555; }

.plegable-fragmento blockquote {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--color-borde);
    color: #444;
    font-size: 0.88rem;
    font-style: italic;
}

.aviso-limitaciones {
    background: var(--color-advertencia-fondo);
    color: var(--color-advertencia);
    margin-top: 1rem;
    margin-bottom: 0;
}

.aviso-limitaciones p { margin: 0.3rem 0 0; color: var(--color-texto); }

.columnas-plan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .columnas-plan { grid-template-columns: 1fr; }

    /* Barra superior: en pantallas angostas la marca y la navegación se
       apilan y la navegación puede saltar de línea, en vez de desbordar. */
    .barra-superior {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }
    .barra-superior nav {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
    .usuario-actual { flex-basis: 100%; }
}

/* --- Formulario de caso nuevo: botón de ejemplo + estado de carga --- */

.encabezado-textarea {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.encabezado-textarea label { margin-top: 0; }

.boton-enlace {
    background: none;
    border: none;
    color: var(--color-primario);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.boton-enlace:hover { text-decoration: underline; color: var(--color-primario-oscuro); }

.selector-ejemplo {
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-primario);
    background: none;
    border: 1px solid var(--color-primario);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    width: auto;
    max-width: 100%;
    margin: 0;
    cursor: pointer;
}