/* ============================================================
   SINTRAIME · Seccional Soledad — hoja de estilos única.
   Todo el sitio público sale de este archivo. Cambia las
   variables de :root y cambia el sitio entero.
   ============================================================ */

:root {
    --primary-red: #D32F2F;
    --dark-red: #9A0007;
    --bright-yellow: #FFC107;
    --dark-yellow: #FFA000;
    --clean-white: #FFFFFF;
    --off-white: #F8F9FA;
    --text-dark: #212121;
    --text-muted: #64748B;
    --gray-border: #E0E0E0;
    --light-red: #FFF5F5;
    --green: #2E7D32;
    --alto-header: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 140px; }

body {
    background-color: var(--off-white);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.6;
}

img { max-width: 100%; display: block; }

/* Cualquier regla de display (flex, grid) le gana al atributo hidden del
   navegador. Esta línea lo devuelve a su lugar en todo el sitio. */
[hidden] { display: none !important; }

/* ---------------------------------------------- HEADER FIJO */
header.sitio {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    background-color: var(--primary-red);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.logo-container { display: flex; align-items: center; gap: 12px; }
.logo-container img {
    height: 42px;
    width: 42px;
    object-fit: contain;
    background: var(--clean-white);
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 0 0 2px var(--bright-yellow);
}
.logo-container h1 {
    color: var(--clean-white);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1.1;
}
.logo-container span { color: var(--bright-yellow); }
.logo-container a { text-decoration: none; display: flex; align-items: center; gap: 12px; }

nav ul { list-style: none; display: flex; align-items: center; gap: 20px; }
nav ul li a {
    color: var(--clean-white);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: color .2s ease;
}
nav ul li a:hover { color: var(--bright-yellow); }
nav ul li a.activo { color: var(--bright-yellow); }

.btn-login {
    background-color: var(--bright-yellow);
    color: var(--dark-red) !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    transition: transform .2s, background-color .2s;
}
.btn-login:hover { background-color: var(--clean-white); transform: translateY(-2px); }

/* El botón mide 44 px de lado aunque las rayas sean de 26: ese es el blanco
   que el dedo necesita para no fallar el toque. Las rayas van centradas. */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    border-radius: 6px;
    flex: none;
}
.menu-toggle span {
    width: 26px; height: 3px;
    background-color: var(--clean-white);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle:active { background: rgba(0,0,0,.15); }

/* Abierto, las tres rayas se vuelven una X. */
.menu-toggle.abierto span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.abierto span:nth-child(2) { opacity: 0; }
.menu-toggle.abierto span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------- CARRUSEL (HERO) */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 85vh;
    margin-top: var(--alto-header);
    background-color: var(--dark-red);
    overflow: hidden;
}
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.carousel-slide.active { opacity: 1; pointer-events: auto; }
/* El velo rojo que deja leer el texto encima de la foto. Su fuerza la fija
   cada lámina desde el panel con la variable --velo; sin ella se queda en el
   75 % de siempre, así que una lámina vieja se ve igual que antes. */
.carousel-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(154,0,7,.95), rgba(211,47,47,.8));
    opacity: var(--velo, .75);
}

/* Con la foto completa quedan franjas a los lados: se rellenan con el rojo
   de la marca en vez de dejar un vacío negro. */
.carousel-slide { background-color: var(--dark-red); }
.carousel-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--clean-white);
    max-width: 850px;
    padding: 0 20px;
}
.carousel-content h2 {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 18px;
    text-shadow: 2px 2px 8px rgba(0,0,0,.35);
    line-height: 1.15;
}
.carousel-content h2 span { color: var(--bright-yellow); }
.carousel-content p {
    font-size: clamp(.95rem, 2vw, 1.15rem);
    margin-bottom: 28px;
    opacity: .95;
}
.carousel-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
    background-color: var(--bright-yellow);
    color: var(--dark-red);
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--bright-yellow);
    transition: .2s;
}
.btn-primary:hover { background-color: var(--dark-yellow); border-color: var(--dark-yellow); }
.btn-outline {
    background: transparent;
    color: var(--clean-white);
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--clean-white);
    transition: .2s;
}
.btn-outline:hover { background-color: var(--clean-white); color: var(--dark-red); }

.carousel-nav {
    position: absolute;
    bottom: 26px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 5;
}
.dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: .3s;
}
.dot.active { background: var(--bright-yellow); transform: scale(1.25); }

/* ------------------------------------------ HERO DE PÁGINA */
.hero-pagina {
    margin-top: var(--alto-header);
    background: linear-gradient(135deg, var(--dark-red) 0%, var(--primary-red) 100%);
    color: var(--clean-white);
    padding: 60px 5% 55px;
    text-align: center;
}
.hero-pagina h2 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 800;
    margin-bottom: 12px;
}
.hero-pagina h2 span { color: var(--bright-yellow); }
.hero-pagina p { max-width: 760px; margin: 0 auto; opacity: .93; font-size: .98rem; }

/* --------------------------------------- SUB-NAV DE ANCLAS */
.sub-nav {
    background: var(--clean-white);
    border-bottom: 1px solid var(--gray-border);
    padding: 12px 5%;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    position: sticky;
    top: var(--alto-header);
    z-index: 900;
}
.sub-nav a {
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-dark);
    font-size: .85rem;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 30px;
    border: 1px solid var(--gray-border);
    transition: .2s;
}
.sub-nav a:hover, .sub-nav a.activo {
    background: var(--primary-red);
    color: var(--clean-white);
    border-color: var(--primary-red);
}

/* ------------------------------------------------ SECCIONES */
section.bloque { padding: 70px 5%; }
section.bloque.alterna { background: var(--clean-white); }

.section-title { text-align: center; margin-bottom: 42px; }
.section-title h3 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--dark-red);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.section-title h3::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 4px;
    background: var(--bright-yellow);
    border-radius: 2px;
}
.section-title p { color: var(--text-muted); max-width: 680px; margin: 0 auto; font-size: .95rem; }

.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    max-width: 1250px;
    margin: 0 auto;
}

/* --------------------------------------------- TARJETAS */
.tarjeta {
    background: var(--clean-white);
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.09); }
.tarjeta h4 { font-size: 1.08rem; font-weight: 700; color: var(--dark-red); margin-bottom: 8px; }
.tarjeta p { font-size: .9rem; color: var(--text-muted); margin-bottom: 12px; }
.tarjeta.destacada { border-top: 5px solid var(--bright-yellow); }
.tarjeta.urgente { border-left: 5px solid var(--primary-red); }

.tarjeta-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.etiqueta-legal {
    background: var(--light-red);
    color: var(--dark-red);
    border: 1px solid #f3cfcf;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.pastilla {
    display: inline-block;
    background: var(--primary-red);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .3px;
}
.pastilla.oro { background: var(--bright-yellow); color: var(--dark-red); }

.lista-tarjeta { list-style: none; margin-top: auto; }
.lista-tarjeta li {
    font-size: .89rem;
    padding: 9px 0 9px 20px;
    border-bottom: 1px dashed var(--gray-border);
    position: relative;
}
.lista-tarjeta li:last-child { border-bottom: none; }
.lista-tarjeta li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-red);
    font-weight: 700;
}
.resalte { color: var(--dark-red); font-weight: 700; }

.fecha-comunicado {
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: block;
    margin-bottom: 8px;
}
.btn-leer {
    margin-top: 14px;
    color: var(--primary-red);
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    align-self: flex-start;
}
.btn-leer:hover { color: var(--dark-red); }

.btn-tarjeta {
    background: var(--primary-red);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem;
    padding: 9px 18px;
    border-radius: 4px;
    transition: .2s;
    display: inline-block;
}
.btn-tarjeta:hover { background: var(--dark-red); }

.pie-tarjeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-border);
    flex-wrap: wrap;
}

/* ------------------------------------------- FORMULARIOS */
.caja {
    background: var(--clean-white);
    border: 1px solid var(--gray-border);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.caja.roja { background: var(--primary-red); color: #fff; border-color: var(--dark-red); }
.caja.roja h3, .caja.roja h4 { color: #fff; }
.caja.roja a { color: var(--bright-yellow); }

.grupo { margin-bottom: 16px; }
.grupo label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-dark);
}
.caja.roja .grupo label { color: #fff; }
.grupo input, .grupo select, .grupo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    font-size: .93rem;
    background: #fff;
    color: var(--text-dark);
}
.grupo input:focus, .grupo select:focus, .grupo textarea:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(211,47,47,.12);
}
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.captcha-caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--off-white);
    border: 1px dashed var(--gray-border);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.captcha-pregunta { font-weight: 800; font-size: 1.1rem; letter-spacing: 1px; color: var(--dark-red); }
.btn-refrescar {
    background: none;
    border: none;
    color: var(--primary-red);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
    text-decoration: underline;
}

.btn-enviar {
    width: 100%;
    background: var(--primary-red);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    font-family: inherit;
}
.btn-enviar:hover { background: var(--dark-red); }
.btn-enviar:disabled { opacity: .6; cursor: progress; }
.btn-amarillo { background: var(--bright-yellow); color: var(--dark-red); }
.btn-amarillo:hover { background: var(--dark-yellow); }

.aviso {
    padding: 13px 16px;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.5;
}
.aviso.ok { background: #E8F5E9; color: #1B5E20; border-left: 4px solid var(--green); }
.aviso.mal { background: #FDECEA; color: var(--dark-red); border-left: 4px solid var(--primary-red); }
.aviso.info { background: #FFF8E1; color: #795548; border-left: 4px solid var(--bright-yellow); }

/* --------------------------------------- TARJETA CON LOGO */
.tarjeta-logo {
    background: linear-gradient(135deg, var(--dark-red), var(--primary-red));
    border-radius: 12px;
    padding: 34px;
    text-align: center;
    color: #fff;
}
.tarjeta-logo img { margin: 0 auto 18px; max-width: 230px; }
.tarjeta-logo h4 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.tarjeta-logo p { font-size: .88rem; opacity: .92; }

/* -------------------------------------------- EXAMEN (JS) */
.pregunta {
    background: var(--clean-white);
    border: 1px solid var(--gray-border);
    border-left: 5px solid var(--primary-red);
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: 0 3px 12px rgba(0,0,0,.04);
}
.pregunta .enunciado { font-weight: 700; margin-bottom: 14px; font-size: .98rem; }
.opcion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    padding: 11px 14px;
    margin-bottom: 8px;
    font-size: .9rem;
    cursor: pointer;
    transition: .15s;
    background: #fff;
}
.opcion:hover { border-color: var(--primary-red); background: var(--light-red); }
.opcion .letra {
    font-weight: 800;
    color: var(--primary-red);
    min-width: 18px;
}
.opcion.elegida { border-color: var(--primary-red); background: var(--light-red); }
.opcion.correcta { border-color: var(--green); background: #E8F5E9; }
.opcion.correcta .letra { color: var(--green); }
.opcion.errada { border-color: var(--primary-red); background: #FDECEA; }
.pregunta.resuelta .opcion { cursor: default; }

.sustento {
    margin-top: 12px;
    background: var(--off-white);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: .88rem;
    border-left: 3px solid var(--bright-yellow);
}
.sustento strong { color: var(--dark-red); }

.marcador {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    background: var(--dark-red);
    color: #fff;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    font-weight: 700;
    font-size: .92rem;
    z-index: 500;
}
.marcador .barra {
    flex: 1;
    min-width: 140px;
    height: 8px;
    background: rgba(255,255,255,.25);
    border-radius: 5px;
    overflow: hidden;
}
.marcador .barra i { display: block; height: 100%; background: var(--bright-yellow); width: 0; transition: width .3s; }
.marcador button {
    background: var(--bright-yellow);
    color: var(--dark-red);
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
}

/* ------------------------------------------------- FUENTES */
.caja-fuentes {
    background: var(--clean-white);
    border: 1px solid var(--gray-border);
    border-top: 5px solid var(--dark-red);
    border-radius: 10px;
    padding: 28px;
    max-width: 1250px;
    margin: 0 auto;
}
.fuente h4 { color: var(--dark-red); font-size: 1rem; margin-bottom: 6px; }
.fuente p { font-size: .87rem; color: var(--text-muted); margin-bottom: 8px; }
.fuente a { color: var(--primary-red); font-weight: 700; font-size: .85rem; text-decoration: none; }
.fuente a:hover { text-decoration: underline; }

/* -------------------------------------------- WEB|BEAM
   La pantalla que ve el asistente: fondo oscuro para que la imagen
   mande, con la barra roja de la casa arriba. */
.beam {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #121212;
    display: flex;
    flex-direction: column;
}
.beam-barra {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: var(--dark-red);
    color: var(--clean-white);
    font-size: .85rem;
    font-weight: 600;
}
.beam-barra .nombre { font-weight: 800; }
.beam-barra .vivo {
    background: var(--bright-yellow);
    color: var(--dark-red);
    padding: 3px 11px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .5px;
}
.beam-barra .vivo.libre { background: rgba(255,255,255,.2); color: var(--clean-white); }
.beam-barra .posicion { color: rgba(255,255,255,.72); }
.beam-barra .botones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.beam-barra button {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    color: var(--clean-white);
    border-radius: 5px;
    padding: 7px 13px;
    font-family: inherit;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
}
.beam-barra button:hover { background: rgba(255,255,255,.24); }

.beam-escena {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}
.beam-escena img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 6px; }

.beam-texto { color: #F2F2F2; max-width: 950px; width: 100%; }
.beam-texto h3 {
    color: var(--bright-yellow);
    font-size: clamp(1.4rem, 3.6vw, 2.2rem);
    margin-bottom: 18px;
}
.beam-texto h4 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin: 18px 0 8px; color: #FFE082; }
.beam-texto p { font-size: clamp(1rem, 2.1vw, 1.3rem); margin-bottom: 14px; }
.beam-texto ul { margin-left: 24px; font-size: clamp(1rem, 2.1vw, 1.25rem); }
.beam-texto li { margin-bottom: 8px; }
.beam-pie { padding: 10px 18px 16px; text-align: center; color: #9E9E9E; font-size: .8rem; }

/* Material de apoyo dentro de la sala */
.beam-soportes {
    position: absolute;
    top: 58px; right: 16px;
    z-index: 20;
    width: min(330px, calc(100vw - 32px));
    max-height: 60vh;
    overflow-y: auto;
    background: var(--clean-white);
    border-top: 4px solid var(--primary-red);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.beam-soportes h4 {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.beam-soportes a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-dark);
    border: 1px solid var(--gray-border);
    margin-bottom: 8px;
}
.beam-soportes a:hover { background: var(--off-white); border-color: var(--primary-red); }
.beam-soportes a span { font-weight: 700; font-size: .9rem; }
.beam-soportes a em { font-style: normal; font-size: .76rem; color: var(--text-muted); }

/* ------------------------------------------------- FOOTER */
footer.sitio {
    background: var(--primary-red);
    color: #fff;
    text-align: center;
    padding: 34px 5%;
    font-size: .88rem;
}
footer.sitio .lema { margin-top: 8px; font-size: .8rem; color: var(--bright-yellow); font-weight: 700; }
footer.sitio .enlaces { margin-top: 14px; font-size: .78rem; opacity: .85; }
footer.sitio .enlaces a { color: #fff; text-decoration: none; margin: 0 8px; }
footer.sitio .enlaces a:hover { color: var(--bright-yellow); }

.cargando { text-align: center; color: var(--text-muted); padding: 40px 0; font-size: .9rem; }

/* -------------------------------------------------- MÓVIL */
@media (max-width: 900px) {
    .dos-columnas { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    nav ul {
        position: fixed;
        top: var(--alto-header);
        left: 0;
        width: 100%;
        background: var(--dark-red);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 5%;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease, padding .3s ease;
    }
    nav ul.abierto { max-height: 420px; padding: 14px 5% 22px; }
    nav ul li { width: 100%; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .btn-login { display: inline-block; margin-top: 8px; }
    .logo-container h1 { font-size: 1rem; }
    .hero-carousel { height: 78vh; }
    section.bloque { padding: 48px 5%; }
    .caja { padding: 22px; }
}

/* --- Registrar el resultado del examen --- */
.registro {
    background: var(--clean-white);
    border: 1px solid var(--gray-border);
    border-top: 4px solid var(--bright-yellow);
    border-radius: 10px;
    padding: 24px;
    margin-top: 18px;
}
.registro h4 { font-size: 1.05rem; font-weight: 800; color: var(--dark-red); margin-bottom: 6px; }
.registro > p { font-size: .88rem; color: var(--text-muted); margin-bottom: 16px; }
.registro .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.registro .btn-enviar { margin-top: 6px; }

@media (max-width: 700px) {
    .registro .dos { grid-template-columns: 1fr; }
}

/* ==========================================================
   Certificado: resultado de la verificación
   ==========================================================
   El tipo de certificado y el cargo los pone la seccional desde el panel, no
   el trabajador: aquí solo queda lo que se muestra al verificar un código.
*/

/* El periodo de afiliación dentro del resultado. */
.periodo-cert {
    display: inline-block;
    background: #FFF8E1;
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 700;
}

/* Variante plana del botón de envío: para la acción secundaria de una
   tarjeta, cuando ya hay un botón rojo que manda. */
.btn-enviar.plano {
    background: var(--clean-white);
    color: var(--dark-red);
    border: 2px solid var(--gray-border);
}
.btn-enviar.plano:hover { background: var(--off-white); border-color: var(--primary-red); }

/* El campo trampa contra robots.

   Se esconde SIN display:none ni hidden: un robot bien hecho ignora lo que
   está oculto de la manera evidente. Así queda fuera de la pantalla, sin
   ocupar sitio y sin que el teclado pueda llegar a él, pero presente en el
   HTML para quien lo lea con un programa. */
.trampa {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- PIN de formación --- */
.campo-pin {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 1.3rem;
    letter-spacing: .3em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}
.nota-pin { font-size: .78rem; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.registro .sin-pin {
    font-size: .82rem;
    background: var(--off-white);
    border-left: 3px solid var(--gray-border);
    padding: 9px 12px;
    border-radius: 0 5px 5px 0;
    margin-bottom: 14px;
}

/* «Empezar de nuevo» se quedaba en 31 px de alto: por debajo del mínimo
   cómodo para el dedo, y está en una página que se usa sobre todo en el
   teléfono durante una capacitación. */
.marcador button { min-height: 38px; padding: 9px 16px; }