:root {
    --fondo: #f5f4ef;
    --superficie: #ffffff;
    --superficie-2: #faf9f5;
    --tinta: #1b2420;
    --tinta-suave: #5c6863;
    --linea: #dfddd3;
    --acento: #1d6b47;
    --acento-fuerte: #15543a;
    --acento-tinta: #ffffff;
    --acento-suave: #e4f1ea;
    --error: #a8321f;
    --error-suave: #fbe9e5;
    --aviso: #8a5a00;
    --aviso-suave: #fdf3d9;
    --azul: #2456a6;
    --azul-suave: #e6eefb;
    --gris-suave: #eceae3;
    --radio: 10px;
    --sombra: 0 1px 2px rgba(27, 36, 32, .06), 0 4px 14px rgba(27, 36, 32, .04);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #121715;
        --superficie: #1a211e;
        --superficie-2: #202825;
        --tinta: #e9ede9;
        --tinta-suave: #9aa8a1;
        --linea: #2e3935;
        --acento: #4fb585;
        --acento-fuerte: #6bc79a;
        --acento-tinta: #0d1a14;
        --acento-suave: #1d3329;
        --error: #f08a76;
        --error-suave: #3a1f1a;
        --aviso: #e8b65a;
        --aviso-suave: #33290f;
        --azul: #8fb4f2;
        --azul-suave: #1b2740;
        --gris-suave: #262f2b;
        --sombra: none;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--acento); }
code { font: .9em ui-monospace, Consolas, monospace; background: var(--gris-suave); padding: .1em .35em; border-radius: 4px; }

.suave { color: var(--tinta-suave); }
.pequeno { font-size: .875rem; }
.numero { font-variant-numeric: tabular-nums; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Barra superior */
.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
    position: sticky;
    top: 0;
    z-index: 5;
}
.barra-interior {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
}
.marca { font-weight: 700; padding: 14px 0; text-decoration: none; color: var(--tinta); white-space: nowrap; }
.marca span { color: var(--acento); }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav a {
    padding: 14px 10px;
    text-decoration: none;
    color: var(--tinta-suave);
    font-weight: 550;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }
.barra form { margin: 0; }

.pagina { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 24px; }
.pagina-angosta { max-width: 440px; margin: 0 auto; padding: 48px 16px; display: grid; gap: 20px; }
/* Sin esto, un hijo con desplazamiento horizontal (pestañas, tablas) ensancha toda la pagina. */
.pagina > *, .pagina-angosta > * { min-width: 0; }

.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.encabezado p { margin-top: 4px; }

/* Superficies */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    display: grid;
    gap: 16px;
    min-width: 0;
}
.tarjeta > header { display: grid; gap: 4px; }

.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fila-extremos { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pila { display: grid; gap: 12px; }

.resumen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dato { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; display: grid; gap: 6px; }
.dato .etiqueta { font-size: .8rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.dato .valor { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.progreso { height: 6px; background: var(--gris-suave); border-radius: 99px; overflow: hidden; }
.progreso > span { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.progreso.alerta > span { background: var(--aviso); }
.progreso.agotado > span { background: var(--error); }

/* Avisos */
.aviso { padding: 12px 14px; border-radius: var(--radio); border: 1px solid transparent; display: flex; gap: 8px 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.aviso-ok { background: var(--acento-suave); color: var(--acento-fuerte); border-color: color-mix(in srgb, var(--acento) 30%, transparent); }
.aviso-error { background: var(--error-suave); color: var(--error); border-color: color-mix(in srgb, var(--error) 30%, transparent); }
.aviso-alerta { background: var(--aviso-suave); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.aviso-info { background: var(--azul-suave); color: var(--azul); border-color: color-mix(in srgb, var(--azul) 30%, transparent); }
.aviso a { color: inherit; font-weight: 650; white-space: nowrap; }

/* Formularios */
label { font-weight: 600; display: block; }
.campo { display: grid; gap: 6px; }
.campo .ayuda { font-size: .875rem; color: var(--tinta-suave); font-weight: 400; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    font: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 44px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}
input[readonly], textarea[readonly] { background: var(--superficie-2); color: var(--tinta-suave); }
.rejilla-campos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.codigo { font: 1.4rem ui-monospace, Consolas, monospace; letter-spacing: .3em; text-align: center; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 650;
    min-height: 44px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--acento);
    background: var(--acento);
    color: var(--acento-tinta);
    cursor: pointer;
    text-decoration: none;
}
.boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton-secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton-secundario:hover { background: var(--gris-suave); border-color: var(--linea); }
.boton-texto { background: transparent; border-color: transparent; color: var(--tinta-suave); padding-inline: 8px; }
.boton-texto:hover { background: var(--gris-suave); border-color: transparent; color: var(--tinta); }
.boton-ancho { width: 100%; }

/* Modulos */
.fase { display: grid; gap: 12px; }
.fase > h2 { display: flex; align-items: baseline; gap: 10px; }
.fase > h2 small { font-weight: 500; color: var(--tinta-suave); font-size: .875rem; }
.modulos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.modulo {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 14px 16px;
    display: grid;
    gap: 8px;
    grid-template-columns: auto 1fr;
    align-items: start;
}
.modulo .orden {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gris-suave); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums;
}
.modulo .cuerpo { display: grid; gap: 2px; min-width: 0; }
.modulo .nombre { font-weight: 650; }
.modulo .pie { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.modulo.estado-bloqueado { background: var(--superficie-2); }
.modulo.estado-bloqueado .nombre, .modulo.estado-bloqueado .orden { color: var(--tinta-suave); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: .8rem; font-weight: 650; background: var(--gris-suave); color: var(--tinta-suave); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-pendiente { background: var(--gris-suave); color: var(--tinta); }
.chip-en_curso { background: var(--azul-suave); color: var(--azul); }
.chip-por_aprobar { background: var(--aviso-suave); color: var(--aviso); }
.chip-aprobado { background: var(--acento-suave); color: var(--acento-fuerte); }
.chip-desactualizado { background: var(--error-suave); color: var(--error); }
.chip-plano::before { display: none; }

/* Pestañas de secciones del perfil */
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 0; list-style: none; padding-left: 0; }
.pestanas a {
    display: inline-flex; gap: 8px; align-items: center;
    padding: 8px 12px; border-radius: 99px; border: 1px solid var(--linea);
    background: var(--superficie); color: var(--tinta); text-decoration: none; font-weight: 600; white-space: nowrap; min-height: 40px;
}
.pestanas a[aria-current="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.pestanas .cuenta { font-size: .8rem; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.pestanas .completa { color: var(--acento); opacity: 1; }
.pestanas a[aria-current="true"] .completa { color: inherit; }

/* Tablas y listas */
.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); background: var(--superficie-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.der, th.der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; }
.lista li { display: flex; gap: 8px 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista li:last-child { border-bottom: 0; }

.requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.requisitos li { display: flex; gap: 10px; align-items: center; }
.requisitos .si { color: var(--acento); font-weight: 700; }
.requisitos .no { color: var(--error); font-weight: 700; }

.clave-secreta { font: 1.1rem ui-monospace, Consolas, monospace; letter-spacing: .08em; background: var(--superficie-2); border: 1px dashed var(--linea); border-radius: 8px; padding: 12px; word-break: break-all; user-select: all; }

ol.pasos { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

@media (max-width: 560px) {
    h1 { font-size: 1.3rem; }
    .tarjeta { padding: 16px; }
    .barra-interior { gap: 0 12px; }
    .marca { padding: 10px 0 0; flex: 1; }
    .nav { order: 3; flex-basis: 100%; }
    .nav a { padding: 10px 10px; }
}

/* Dictado por voz */
.dictado { gap: 8px 12px; }
.boton-dictar { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.boton-dictar.escuchando { background: var(--error-suave); color: var(--error); border-color: var(--error); }
.boton-dictar.escuchando svg { animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .boton-dictar.escuchando svg { animation: none; } }

/* Campo de imagen (logo) */
fieldset.imagen-campo { border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; margin: 0; min-width: 0; gap: 14px; }
fieldset.imagen-campo legend { font-weight: 600; padding: 0 6px; }
fieldset.imagen-campo legend .ayuda { font-size: .875rem; color: var(--tinta-suave); font-weight: 400; }
.imagen-actual { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; }
.imagen-actual img { max-width: 180px; max-height: 96px; object-fit: contain; background: repeating-conic-gradient(#e9e9e9 0 25%, #fff 0 50%) 0 0 / 16px 16px; border: 1px solid var(--linea); border-radius: 8px; padding: 8px; }
.imagen-actual span { overflow-wrap: anywhere; min-width: 0; }
input[type="file"] { width: 100%; font: inherit; color: var(--tinta); border: 1px dashed var(--linea); border-radius: 8px; padding: 9px 12px; min-height: 44px; background: var(--superficie); }
.casilla { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.casilla input { width: 18px; height: 18px; }

/* Modulos: estados nuevos y enlace */
.chip-esperando { background: var(--aviso-suave); color: var(--aviso); }
.chip-con_error { background: var(--error-suave); color: var(--error); }
a.nombre { color: var(--tinta); text-decoration-color: var(--acento); text-underline-offset: 3px; }
a.nombre:hover { color: var(--acento); }

/* Progreso de una ejecucion */
.progreso-caja { border-color: var(--azul); }
.giro { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--azul-suave); border-top-color: var(--azul); animation: giro 0.9s linear infinite; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation-duration: 4s; } }

/* Salida de un modulo */
.salida-seccion h3, .salida-seccion h4, .salida-seccion h5 { font-size: .95rem; margin-bottom: 6px; }
.salida-grupo { display: grid; gap: 14px; min-width: 0; }
.salida-grupo > div { min-width: 0; }
.salida-etiqueta { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 600; margin-bottom: 2px; }
.salida-lista { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.salida-fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: ficha; }
.salida-fichas > li { counter-increment: ficha; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; padding: 14px 14px 14px 46px; position: relative; min-width: 0; }
.salida-fichas > li::before { content: counter(ficha); position: absolute; left: 12px; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: var(--gris-suave); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.salida-seccion p { overflow-wrap: anywhere; }
.valor small { font-size: .9rem; font-weight: 500; }
details > summary { cursor: pointer; padding: 6px 0; }
details[open] > summary { margin-bottom: 10px; }
details > * + * { margin-top: 10px; }
.criterios { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.criterios li { display: grid; gap: 6px; align-content: start; }

/* Comparar respuestas */
.comparacion-columnas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.comparacion-columnas > div { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 8px; padding: 12px; min-width: 0; }
.comparacion-texto { overflow-wrap: anywhere; }
.comparacion-tranquila { background: var(--superficie-2); box-shadow: none; }
.comparacion h2 { font-size: 1rem; }
.otra-respuesta { background: var(--azul-suave); color: var(--azul); border-radius: 8px; padding: 8px 10px; margin-top: 4px; }

/* Impresion y PDF: solo el contenido, en claro, sin botones ni formularios */
@media print {
    :root { --fondo: #fff; --superficie: #fff; --superficie-2: #f6f6f3; --tinta: #111; --tinta-suave: #555; --linea: #ccc; --sombra: none; }
    body { background: #fff; font-size: 11pt; }
    .barra, form, .no-imprimir, [data-dictado] + .dictado, #decision, .aviso-info { display: none !important; }
    .pagina { max-width: none; padding: 0; gap: 14px; }
    .tarjeta, .salida-fichas > li { break-inside: avoid; box-shadow: none; }
    .salida-seccion { break-inside: auto; }
    a { color: inherit; text-decoration: none; }
    details > summary { list-style: none; font-weight: 650; }
}