/* ============================================================================
   Bienestar — jornadas de salud del hospital.

   Usa la LÍNEA GRÁFICA del sitio: tokens de app.css (--navy #262161, --navy-2,
   --green #6fb43f, --green-2, --canvas, --paper, --warm, --warm-line, --line,
   --muted, --ink-2). NO define tokens propios ni paleta fría.

   Reutiliza .dir-section-shell / .dir-section-head / .section-label / .btn.
   El hero se replica aquí como `.bien-hero` porque `.dir-hero` está SCOPED a
   `.directory-page` y fuera de ahí el titular sale invisible — misma trampa que
   ya costó un rediseño en /empleos.
   ============================================================================ */

/* ---------- Hero (panel navy dividido) ---------- */
.bien-hero { position: relative; overflow: hidden; color: #fff; background: #1d1957; }
.bien-hero::before { content: ''; position: absolute; inset: auto auto -12rem -8rem; width: 34rem; height: 34rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.bien-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(420px, .85fr); }
.bien-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 480px; width: min(100%, 820px); margin-left: auto; padding: 3.5rem clamp(2rem, 6vw, 7rem) 4.25rem 2rem; }
.bien-hero-crumbs { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .58); font-size: .78rem; font-weight: 700; }
.bien-hero-crumbs a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.bien-hero-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bien-hero-copy h1 { margin-top: 1.25rem; max-width: 16ch; color: #fff; font-family: "Outfit", "Plus Jakarta Sans", Inter, system-ui, sans-serif; font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.bien-hero-lema { margin-top: .9rem; color: #b6f0a3; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-style: italic; font-weight: 600; }
.bien-hero-copy > p { margin-top: 1.1rem; max-width: 54ch; color: rgba(255, 255, 255, .78); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.65; }
/* El hero es navy: el botón va VERDE. Navy sobre navy es invisible. */
.bien-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.35rem; margin-top: 1.75rem; }
.bien-hero-actions .btn { min-height: 50px; }
.bien-hero-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.bien-hero-summary > div { padding: .95rem .75rem 0 0; }
.bien-hero-summary > div + div { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 1.1rem; }
.bien-hero-summary dt { color: rgba(255, 255, 255, .55); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bien-hero-summary dd { margin: .3rem 0 0; color: #fff; font-size: 1.3rem; font-weight: 800; font-family: "Outfit", "Plus Jakarta Sans", sans-serif; }
.bien-hero-visual { position: relative; min-height: 480px; overflow: hidden; margin: 0; background: #dfe5e7; }
.bien-hero-visual::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 9px; background: var(--green); }
.bien-hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 25, 87, .3), transparent 42%); pointer-events: none; }
.bien-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
@media (max-width: 900px) {
    .bien-hero-grid { grid-template-columns: 1fr; }
    .bien-hero-copy { min-height: 0; width: 100%; margin: 0; padding: 2.75rem 1.35rem 2.5rem; }
    .bien-hero-visual { min-height: 280px; order: -1; }
}

/* ---------- Banda de sensibilización (mes del cáncer de mama) ---------- */
.bien-cinta {
    display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem;
    padding: .5rem 1rem; border-radius: 999px;
    background: rgba(236, 72, 153, .16); color: #ffd6e8;
    font-size: .8rem; font-weight: 800; letter-spacing: .02em;
    border: 1px solid rgba(236, 72, 153, .35);
}
.bien-cinta svg { width: 1rem; height: 1rem; color: #f9a8d4; flex: none; }

/* ---------- Agenda: raíl del día + actividades ------------------------
   Calcada de la estructura del póster oficial: FECHA a la izquierda en un
   bloque de color, y el contenido del día a la derecha. Cada día tiene su
   acento, como en el impreso, pero aplicado solo al raíl: la tipografía y
   las superficies siguen siendo las del sitio (navy + warm). */
.bien-agenda { margin-top: 2rem; }

.bien-dia {
    display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 1.75rem;
    padding: 1.75rem 0;
}
.bien-dia + .bien-dia { border-top: 1px solid var(--warm-line); }

.bien-rail { position: relative; }
/* Guia vertical: sin ella el bloque de la fecha flota suelto y no se lee como
   la cabecera de la fila, que es lo que es en el poster impreso. */
.bien-rail::after {
    content: ''; position: absolute; left: 50%; top: calc(100% + .35rem); bottom: -.4rem;
    width: 1px; background: linear-gradient(var(--dia-linea, var(--warm-line)), transparent);
}
.bien-dia:last-child .bien-rail::after { display: none; }
.bien-rail-inner {
    position: sticky; top: 96px;
    border-radius: 16px; padding: 1.1rem .9rem 1rem;
    background: var(--dia-suave, var(--warm));
    border: 1px solid var(--dia-linea, var(--warm-line));
    text-align: center;
}
.bien-rail-dow {
    display: block; font-size: .72rem; font-weight: 950; letter-spacing: .12em;
    text-transform: uppercase; color: var(--dia, var(--navy)); opacity: .85;
}
.bien-rail-num {
    display: block; margin-top: .1rem;
    font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
    font-size: 2.9rem; font-weight: 800; line-height: 1; letter-spacing: -.04em;
    color: var(--dia, var(--navy));
}
.bien-rail-mes { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 700; color: var(--muted); }
.bien-rail-n {
    display: block; margin-top: .7rem; padding-top: .6rem;
    border-top: 1px solid var(--dia-linea, var(--warm-line));
    font-size: .72rem; font-weight: 700; color: var(--muted);
}
.bien-rail-hoy {
    display: inline-block; margin-top: .55rem; padding: .18rem .55rem; border-radius: 999px;
    background: var(--dia, var(--navy)); color: #fff;
    font-size: .64rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase;
}

.bien-dia-lista { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }

/* ---------- La charla del día: la pieza principal ---------- */
.bien-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--warm-line); border-radius: 16px; background: var(--paper);
    padding: 1.5rem 1.6rem; box-shadow: 0 14px 32px rgba(38, 33, 97, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bien-card::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--dia, var(--green));
}
.bien-card:hover { transform: translateY(-3px); border-color: rgba(111, 180, 63, .5); box-shadow: 0 26px 48px rgba(38, 33, 97, .13); }
.bien-card.is-past { opacity: .55; }
.bien-card.is-past:hover { transform: none; border-color: var(--warm-line); box-shadow: 0 14px 32px rgba(38, 33, 97, .06); }

/* Dos columnas, como la tabla del poster: a la izquierda quien y de que va,
   a la derecha cuando, donde y el boton. Antes la tarjeta ocupaba todo el
   ancho con el texto apelotonado a la izquierda y medio metro de vacio. */
.bien-card-grid { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 1.5rem; align-items: start; }
.bien-card-main { min-width: 0; }
.bien-card-side {
    display: flex; flex-direction: column; gap: .75rem; align-items: flex-start;
    padding-left: 1.5rem; border-left: 1px solid var(--warm-line);
}
.bien-card.is-sec .bien-card-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 1.25rem; }
.bien-card.is-sec .bien-card-side { border-left-color: var(--dia-linea, var(--warm-line)); }
.bien-card-side .btn { width: 100%; justify-content: center; }

.bien-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.bien-tag {
    display: inline-flex; align-items: center; gap: .35rem; background: var(--warm); color: var(--navy);
    font-size: .68rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase;
    padding: .32rem .6rem; border-radius: 999px;
}
.bien-tag svg { width: .8rem; height: .8rem; color: var(--dia, var(--green)); }
.bien-tag.is-green { background: rgba(111, 180, 63, .14); color: var(--green-2); }
.bien-tag.is-muted { background: #f1efeb; color: var(--muted); }
.bien-tag.is-live { background: rgba(111, 180, 63, .16); color: var(--green-2); }
.bien-tag.is-live::before {
    content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--green-2);
    animation: bien-latido 1.6s ease-in-out infinite;
}
@keyframes bien-latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .bien-tag.is-live::before { animation: none; } }

.bien-card h3 {
    margin: 0; font-family: "Outfit", "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-weight: 800; font-size: 1.32rem; line-height: 1.22; color: var(--navy); letter-spacing: -.018em;
    text-wrap: balance;
}
.bien-card.is-sec h3 { font-size: 1.06rem; }

/* Ponentes: el nombre manda, la especialidad acompaña */
.bien-ponentes { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.bien-ponente { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .92rem; }
.bien-ponente b { font-weight: 700; color: var(--ink-2); }
.bien-ponente span { color: var(--muted); font-size: .8rem; }

.bien-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.bien-meta li { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .87rem; }
.bien-meta svg { width: .95rem; height: .95rem; color: var(--dia, var(--green)); flex: none; }
.bien-meta .bien-hora { font-weight: 700; color: var(--ink-2); }

.bien-card-foot { margin-top: .15rem; width: 100%; }
.bien-card-foot .btn { min-height: 44px; }
.bien-cerrada { color: var(--muted); font-size: .86rem; font-weight: 700; }

/* ---------- Estaciones y ferias: fila compacta ---------- */
.bien-card.is-sec { padding: 1.1rem 1.3rem; box-shadow: none; background: var(--warm); border-style: dashed; }
.bien-card.is-sec::before { width: 3px; opacity: .55; }
.bien-card.is-sec:hover { background: #fff; box-shadow: 0 14px 30px rgba(38, 33, 97, .07); }
.bien-card.is-sec .bien-card-foot { margin-top: .85rem; }
.bien-card.is-sec .bien-card-foot .btn { min-height: 40px; font-size: .86rem; }

@media (max-width: 860px) {
    .bien-dia { grid-template-columns: 1fr; gap: .9rem; padding: 1.35rem 0; }
    .bien-rail-inner {
        position: static; display: flex; align-items: center; gap: .75rem;
        text-align: left; padding: .7rem .95rem;
    }
    .bien-rail-num { font-size: 1.75rem; }
    .bien-rail-dow, .bien-rail-mes { font-size: .72rem; }
    .bien-rail-mes { margin-top: 0; }
    .bien-rail-n { margin: 0 0 0 auto; padding: 0; border: 0; text-align: right; }
    .bien-rail-hoy { margin: 0 0 0 .4rem; }
    .bien-card { padding: 1.2rem 1.25rem; }
    .bien-card h3 { font-size: 1.14rem; }
    .bien-card-grid, .bien-card.is-sec .bien-card-grid { grid-template-columns: 1fr; gap: 1rem; }
    .bien-card-side { padding-left: 0; padding-top: .9rem; border-left: 0; border-top: 1px solid var(--warm-line); }
    .bien-meta { flex-direction: row; flex-wrap: wrap; gap: .35rem 1.1rem; }
    .bien-rail::after { display: none; }
}

/* ---------- Patrocinadores ---------- */
.bien-patro { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--warm-line); text-align: center; }
.bien-patro p {
    margin: 0 0 .9rem; font-size: .7rem; font-weight: 900; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.bien-patro ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .7rem; }
.bien-patro li {
    padding: .45rem .95rem; border: 1px solid var(--warm-line); border-radius: 10px;
    background: var(--paper); color: var(--navy); font-size: .85rem; font-weight: 700;
}

/* ---------- Estado vacío ---------- */
.bien-vacio { text-align: center; padding: 4rem 1.5rem; border: 1px dashed var(--line); border-radius: 18px; background: var(--paper); }
.bien-vacio svg { width: 2.5rem; height: 2.5rem; color: var(--green); }
.bien-vacio h2 { margin: 1rem 0 .5rem; font-family: "Outfit", "Plus Jakarta Sans", sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--navy); }
.bien-vacio p { max-width: 46ch; margin: 0 auto; color: var(--muted); line-height: 1.7; }

/* ---------- Nota al pie ---------- */
.bien-nota { margin-top: 2.5rem; border: 1px solid var(--warm-line); border-radius: 16px; background: var(--warm); padding: 1.35rem 1.5rem; color: var(--ink-2); font-size: .92rem; line-height: 1.7; }
.bien-nota strong { color: var(--navy); }

/* ---------- Diálogo de inscripción ---------- */
.bien-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(24, 21, 79, .55); backdrop-filter: blur(3px); }
.bien-modal.is-open { display: flex; }
.bien-modal-card { position: relative; width: min(100%, 540px); max-height: 92vh; overflow-y: auto; background: var(--paper); border-radius: 20px; box-shadow: 0 40px 90px rgba(24, 21, 79, .35); padding: 1.75rem; }
.bien-modal-close { position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.bien-modal-close:hover { background: var(--warm); color: var(--navy); }
.bien-modal-card h2 { margin: 0 1.75rem .25rem 0; font-family: "Outfit", "Plus Jakarta Sans", sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--navy); line-height: 1.25; }
.bien-modal-sub { margin: 0 0 1.35rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }

.bien-field { display: block; margin-bottom: 1rem; }
.bien-field > span { display: block; margin-bottom: .35rem; font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.bien-field input {
    width: 100%; min-height: 48px; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink-2); font: inherit; font-size: .98rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.bien-field input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(111, 180, 63, .18); }
.bien-field small { display: block; margin-top: .3rem; color: var(--muted); font-size: .78rem; }

.bien-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bien-aviso { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; line-height: 1.55; }
.bien-aviso.is-error { background: #fdeceb; color: #9b2c2c; border: 1px solid #f5c6c3; }
.bien-aviso.is-ok { background: rgba(111, 180, 63, .12); color: #2f6a14; border: 1px solid rgba(111, 180, 63, .4); }

.bien-modal-foot { margin-top: 1.25rem; }
.bien-modal-foot .btn { width: 100%; justify-content: center; min-height: 50px; }
.bien-legal { margin: .9rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }

.bien-ok { text-align: center; padding: .5rem 0 0; }
.bien-ok svg { width: 3rem; height: 3rem; color: var(--green); }
.bien-ok h3 { margin: .85rem 0 .4rem; font-family: "Outfit", "Plus Jakarta Sans", sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--navy); }
.bien-ok p { margin: 0 auto; max-width: 40ch; color: var(--muted); font-size: .93rem; line-height: 1.65; }

/* ============================================================================
   /registro/{token} — lo que ve quien escanea el QR del cartel.

   Contexto real: de pie en un pasillo, con el teléfono en una mano, a veces
   con mala señal y con gente esperando detrás. Una sola cosa que hacer, y
   dicha sin rodeos.

   La versión anterior era una tarjeta blanca flotando en medio de la nada y,
   peor, cuando el registro no estaba abierto decía «aún no ha abierto» SIN
   decir a qué hora abría — que es justo lo que uno necesita saber ahí parado.
   ============================================================================ */
/* Dos reglas que parecen de adorno y no lo son:
   - `box-sizing`: sin esto, `width:100%` + padding hace el campo MAS ancho que
     su contenedor. Se veia: el input salia 379px donde el boton media 345 y la
     tarjeta lo recortaba por la derecha.
   - `[hidden]`: un `display:flex` posterior GANA al atributo `hidden`, asi que
     la caja de error se quedaba pintada vacia debajo del campo. */
.registro-page *, .registro-page *::before, .registro-page *::after { box-sizing: border-box; }
.registro-page [hidden] { display: none !important; }

.registro-page {
    min-height: 100dvh; margin: 0; background: var(--canvas); color: var(--ink-2);
    display: flex; flex-direction: column;
    /* La familia va explicita: esta pagina NO carga el bundle de Tailwind, asi
       que la utilidad `font-sans` no existe aqui y el cuerpo caia en el serif
       del navegador. Cargar todo Tailwind por una utilidad seria un lastre en
       un telefono con mala senal, que es justo el escenario de esta pantalla. */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Cabecera de marca ---------- */
.reg-top {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    padding: 1.5rem 1.25rem 3.5rem; text-align: center; position: relative; overflow: hidden;
}
.reg-top::after {
    content: ''; position: absolute; left: 50%; bottom: -18rem; transform: translateX(-50%);
    width: 26rem; height: 26rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07);
}
.reg-logo { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.reg-evento {
    margin: 1rem 0 0; position: relative; z-index: 1;
    font-size: .68rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase;
    color: #b6f0a3;
}
.reg-lema { margin: .3rem 0 0; position: relative; z-index: 1; font-size: .86rem; font-style: italic; color: rgba(255, 255, 255, .72); }

/* ---------- Tarjeta, montada sobre la cabecera ---------- */
.reg-wrap { width: min(100%, 480px); margin: -2.5rem auto 0; padding: 0 1rem 2rem; flex: 1; }
.reg-card {
    position: relative; overflow: hidden;
    background: var(--paper); border: 1px solid var(--warm-line); border-radius: 20px;
    box-shadow: 0 22px 54px rgba(24, 21, 79, .16);
}
.reg-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--dia, var(--green)); }
.reg-card-cuerpo { padding: 1.6rem 1.35rem 1.5rem; }

.reg-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .85rem; }
.reg-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--warm); color: var(--navy); border-radius: 999px;
    padding: .34rem .66rem; font-size: .68rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase;
}
.reg-chip svg { width: .82rem; height: .82rem; color: var(--dia, var(--green)); }
.reg-chip.is-dia { background: var(--dia-suave, var(--warm)); color: var(--dia, var(--navy)); }

.reg-card h1 {
    margin: 0; font-family: "Outfit", "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-size: 1.42rem; font-weight: 800; line-height: 1.22; letter-spacing: -.02em;
    color: var(--navy); text-wrap: balance;
}

/* Ponentes: uno por línea, con su especialidad debajo. En el teléfono, dos
   nombres largos en una sola línea se vuelven ilegibles. */
.reg-ponentes { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.reg-ponentes li { display: flex; align-items: baseline; gap: .5rem; }
.reg-ponentes b { font-weight: 700; font-size: .95rem; color: var(--ink-2); }
.reg-ponentes span { font-size: .78rem; color: var(--muted); }

.reg-meta { list-style: none; margin: 1.15rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--warm-line); display: flex; flex-direction: column; gap: .55rem; }
.reg-meta li { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .95rem; }
.reg-meta svg { width: 1.05rem; height: 1.05rem; color: var(--dia, var(--green)); flex: none; }
.reg-meta .tabular { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Zona de acción: el pie de la tarjeta ---------- */
.reg-accion { padding: 1.35rem; background: var(--warm); border-top: 1px solid var(--warm-line); }

.reg-estado { display: flex; gap: .75rem; align-items: flex-start; }
.reg-estado-ico {
    flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px;
    display: grid; place-items: center; background: #fff; border: 1px solid var(--warm-line);
}
.reg-estado-ico svg { width: 1.2rem; height: 1.2rem; color: var(--muted); }
.reg-estado h2 { margin: 0; font-size: .98rem; font-weight: 800; color: var(--navy); font-family: "Outfit", sans-serif; }
.reg-estado p { margin: .3rem 0 0; font-size: .89rem; line-height: 1.55; color: var(--muted); }
/* La cuenta atrás es el dato que faltaba: de pie en el pasillo, «abre en 6
   minutos» sirve; «aún no ha abierto» no. */
.reg-cuenta {
    display: inline-block; margin-top: .6rem; padding: .35rem .75rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--warm-line);
    font-size: .82rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums;
}
.reg-estado.is-abierta .reg-estado-ico { background: rgba(111, 180, 63, .14); border-color: rgba(111, 180, 63, .34); }
.reg-estado.is-abierta .reg-estado-ico svg { color: var(--green-2); }

/* ---------- Formulario ---------- */
.reg-form { margin: 0; }
.reg-campo { display: block; }
.reg-campo > span { display: block; margin-bottom: .55rem; font-size: .95rem; font-weight: 700; color: var(--ink-2); text-align: center; }
/* Campo grande, centrado y con teclado numérico: se escribe con una mano. */
.reg-campo input {
    width: 100%; min-height: 60px; padding: .7rem 1rem; text-align: center;
    border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
    font: inherit; font-size: 1.4rem; font-weight: 700; letter-spacing: .05em;
    font-variant-numeric: tabular-nums; color: var(--navy);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.reg-campo input::placeholder { font-weight: 500; color: #c3bfb8; letter-spacing: .02em; }
.reg-campo input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px rgba(111, 180, 63, .2); }
.reg-form .btn { width: 100%; justify-content: center; min-height: 56px; margin-top: .85rem; font-size: 1.02rem; }
.reg-ayuda { margin: .7rem 0 0; text-align: center; font-size: .78rem; line-height: 1.5; color: var(--muted); }

.reg-aviso { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 0 0; padding: .8rem .95rem; border-radius: 12px; font-size: .88rem; line-height: 1.55; }
.reg-aviso svg { width: 1rem; height: 1rem; flex: none; margin-top: .12rem; }
.reg-aviso.is-error { background: #fdeceb; color: #9b2c2c; border: 1px solid #f5c6c3; }

/* ---------- Confirmación ---------- */
.reg-ok { text-align: center; }
.reg-ok-ico {
    width: 3.6rem; height: 3.6rem; margin: 0 auto; border-radius: 50%;
    display: grid; place-items: center; background: rgba(111, 180, 63, .15);
}
.reg-ok-ico svg { width: 2rem; height: 2rem; color: var(--green-2); }
.reg-ok h2 { margin: .85rem 0 .4rem; font-family: "Outfit", sans-serif; font-size: 1.28rem; font-weight: 800; color: var(--navy); }
.reg-ok p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
.reg-progreso {
    margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--warm-line);
    font-size: .88rem; color: var(--ink-2); line-height: 1.6;
}
.reg-progreso b { color: var(--navy); }
.reg-barra { height: 7px; border-radius: 99px; background: #e6e1d8; overflow: hidden; margin: .65rem 0 .55rem; }
.reg-barra i { display: block; height: 100%; border-radius: 99px; background: var(--green); transition: width .5s ease; }

/* ---------- Código no reconocido ---------- */
.reg-card-aviso { text-align: center; padding: 2.25rem 1.5rem; }
.reg-card-aviso .reg-estado-ico { margin: 0 auto 1rem; width: 3rem; height: 3rem; }
.reg-card-aviso h1 { font-size: 1.2rem; }
.reg-card-aviso p { margin: .65rem 0 1.3rem; color: var(--muted); font-size: .92rem; line-height: 1.6; }

.reg-pie { margin: 1.35rem 0 0; text-align: center; font-size: .78rem; line-height: 1.75; color: var(--muted); }
.reg-pie a { color: var(--navy); font-weight: 700; }

@media (min-width: 540px) {
    .reg-top { padding-top: 2.25rem; }
    .reg-card h1 { font-size: 1.55rem; }
}

/* ============================================================================
   /encuesta/{token} — encuesta de satisfacción de una charla.

   Se abre desde el correo, casi siempre en el teléfono y casi siempre de pie o
   entre dos cosas. Las estrellas se tocan con el pulgar, lo obligatorio es una
   sola pregunta y todo cabe sin hacer zoom.

   Reutiliza el armazón de `.registro-page` (misma cabecera, misma tarjeta): es
   la misma jornada y debe reconocerse.
   ============================================================================ */
.enc-ponentes { margin: .35rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }

.enc-intro { margin: 0 0 1.1rem; font-size: .94rem; line-height: 1.6; color: var(--ink-2); }
.enc-intro b { color: var(--navy); }

.enc-grupo { margin: 0 0 1.1rem; padding: 0; border: 0; }
.enc-grupo legend {
    padding: 0; margin-bottom: .5rem;
    font-size: .92rem; font-weight: 700; color: var(--ink-2);
}
.enc-req { color: #d6468c; }

/* Cinco cajas iguales que llenan el ancho: no hay que apuntar. */
.enc-estrellas { display: flex; gap: .4rem; }
.enc-estrella {
    flex: 1; min-height: 52px; display: grid; place-items: center;
    background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
    cursor: pointer; transition: border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.enc-estrella svg { width: 1.45rem; height: 1.45rem; color: #d8d3ca; transition: color .15s ease, fill .15s ease; }
.enc-estrella.is-on { border-color: #f0c850; background: #fdf8e8; }
.enc-estrella.is-on svg { color: #e8b230; fill: #e8b230; }

.enc-si-no { display: flex; gap: .5rem; }
.enc-opcion, .enc-motivo {
    background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
    font: inherit; color: var(--ink-2); cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.enc-opcion {
    flex: 1; min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
    gap: .45rem; font-size: .95rem; font-weight: 700;
}
.enc-opcion svg { width: 1.05rem; height: 1.05rem; }
.enc-opcion.is-on { border-color: var(--green); background: rgba(111, 180, 63, .12); color: var(--green-2); }

.enc-motivos { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.enc-motivo { width: 100%; padding: .85rem 1rem; text-align: left; font-size: .95rem; }
.enc-motivo.is-on { border-color: var(--navy); background: var(--warm); font-weight: 700; color: var(--navy); }

.enc-campo { display: block; margin-bottom: 1rem; }
.enc-campo > span { display: block; margin-bottom: .45rem; font-size: .92rem; font-weight: 700; color: var(--ink-2); }
.enc-campo small { font-weight: 500; color: var(--muted); }
.enc-campo textarea {
    width: 100%; padding: .75rem .9rem; resize: vertical;
    border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
    font: inherit; font-size: .95rem; line-height: 1.55; color: var(--ink-2);
}
.enc-campo textarea:focus {
    outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px rgba(111, 180, 63, .18);
}