/* Portal público del CCLM — embudo estilo historias.
   Mobile-first real: en pantallas grandes el embudo mantiene proporción
   de teléfono, centrado sobre un fondo con gradiente. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --emb-ink: #14181f;
    --emb-blanco: #ffffff;
    --emb-velo: rgba(10, 14, 18, .38);
    --emb-velo-fuerte: rgba(10, 14, 18, .62);
    --emb-verde: #1d7a46;
    --emb-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--emb-fuente);
    color: var(--emb-blanco);
    /* Gradiente que rodea el marco móvil en pantallas grandes: siempre
       el primario del branding oscurecido (nunca a intensidad plena).
       --emb-brand-* las define el template inline desde el branding
       único del sistema (administracion.ConfiguracionVisual). */
    background: linear-gradient(160deg,
        var(--emb-brand-oscuro, #0b0f0d) 0%,
        var(--emb-brand-medio, #1c3327) 45%,
        var(--emb-brand-oscuro, #0b0f0d) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Marco: siempre proporción de teléfono ────────────────────── */
#embudo {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: var(--emb-ink);
}

@media (min-width: 520px) {
    #embudo {
        width: min(430px, 92vw);
        height: min(880px, 94dvh);
        border-radius: 28px;
        box-shadow: 0 40px 120px rgba(0, 0, 0, .55),
                    0 0 0 1px rgba(255, 255, 255, .08);
    }
}

/* ── Volver al inicio ─────────────────────────────────────────── */
.emb-volver {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    z-index: 10;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(10, 14, 18, .35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--emb-blanco);
    font-family: inherit;
    font-size: .88rem;
    padding: .45rem 1rem .45rem .8rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: background .2s ease;
}

.emb-volver:hover { background: rgba(10, 14, 18, .55); }

.emb-volver span[aria-hidden] {
    font-size: 1.15rem;
    line-height: 1;
}

/* ── Slides ───────────────────────────────────────────────────── */
.emb-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

.emb-slide.activa {
    visibility: visible;
    opacity: 1;
    z-index: 2;
    transition: opacity .55s ease;
}

.emb-slide.saliendo {
    visibility: visible;
    opacity: 0;
    z-index: 1;
    transition: opacity .55s ease;
}

/* Fondos fotográficos con Ken Burns */
.emb-slide::before {
    content: '';
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center;
    z-index: -2;
    /* Tratamiento: levantar luz y color de las fotos */
    filter: brightness(1.16) saturate(1.1) contrast(1.02);
}

.emb-slide.activa::before {
    animation: emb-kenburns 18s ease-out forwards;
}

@keyframes emb-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}

/* Velo para legibilidad del texto */
.emb-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
        rgba(10, 14, 18, .52) 0%,
        rgba(10, 14, 18, .26) 45%,
        rgba(10, 14, 18, .06) 100%);
}

/* Las imágenes de fondo (data-fondo-idx="0".."3") las inyecta el
   template en un <style> inline, tomadas de ImagenEmbudo (panel de
   Configuración) o de las fotos de demostración como fallback. Así
   este archivo queda genérico y portable a cualquier centro/actividad. */

/* Pase verde de aprobación: SIN fotografía, verde pleno. */
.emb-slide.emb-pase {
    background: linear-gradient(170deg,
        #23904f 0%,
        var(--emb-verde) 55%,
        #10552f 100%);
}

.emb-slide.emb-pase::before,
.emb-slide.emb-pase::after {
    content: none;
    display: none;
    background-image: none;
    animation: none;
}

/* ── Contenido ────────────────────────────────────────────────── */
.emb-contenido {
    position: relative;
    width: 100%;
    padding: 1.75rem 1.6rem
             calc(2.2rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.emb-kicker {
    text-transform: uppercase;
    letter-spacing: .35em;
    font-size: .78rem;
    opacity: .85;
}

.emb-titulo-display {
    font-size: clamp(3rem, 14vw, 4.2rem);
    font-weight: 200;
    letter-spacing: -.02em;
    line-height: 1.02;
}

.emb-titulo {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.emb-sub {
    font-size: 1rem;
    line-height: 1.5;
    opacity: .92;
}

/* Revelado escalonado del contenido al entrar */
.emb-slide.activa .emb-reveal > * {
    animation: emb-sube .6s cubic-bezier(.2, .7, .3, 1) both;
}

.emb-slide.activa .emb-reveal > :nth-child(1) { animation-delay: .10s; }
.emb-slide.activa .emb-reveal > :nth-child(2) { animation-delay: .20s; }
.emb-slide.activa .emb-reveal > :nth-child(3) { animation-delay: .30s; }
.emb-slide.activa .emb-reveal > :nth-child(4) { animation-delay: .40s; }
.emb-slide.activa .emb-reveal > :nth-child(5) { animation-delay: .50s; }

@keyframes emb-sube {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Botones y opciones ───────────────────────────────────────── */
.emb-opciones {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.emb-opciones.emb-vertical { flex-direction: column; }

.emb-idiomas { flex-direction: column; }

.emb-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--emb-blanco);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease, background .2s ease;
    flex: 1 1 auto;
}

.emb-btn:active { transform: scale(.97); }

.emb-btn-primario {
    background: var(--emb-blanco);
    border-color: var(--emb-blanco);
    color: var(--emb-ink);
    font-weight: 600;
}

/* Link de escape (cafetería) */
.emb-escape {
    appearance: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .85);
    font-family: inherit;
    font-size: .92rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    align-self: center;
    padding: .4rem;
}

.emb-escape-destacado {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffd9a0;
}

/* ── Formularios ──────────────────────────────────────────────── */
.emb-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.emb-input {
    appearance: none;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    color: var(--emb-blanco);
    font-family: inherit;
    font-size: 1.05rem;
    padding: .85rem 1rem;
}

.emb-input::placeholder { color: rgba(255, 255, 255, .65); }

.emb-input:focus {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 1px;
}

select.emb-input { color: var(--emb-blanco); }
select.emb-input option { color: var(--emb-ink); }

textarea.emb-input { resize: none; }

.emb-campo-fecha { display: flex; flex-direction: column; gap: .3rem; }
.emb-campo-fecha label { font-size: .78rem; color: rgba(255, 255, 255, .75); padding-left: .2rem; }
input[type="date"].emb-input { color-scheme: dark; }

.emb-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.emb-radio:checked + .emb-btn {
    background: var(--emb-blanco);
    color: var(--emb-ink);
    font-weight: 600;
}

.emb-radio:focus-visible + .emb-btn {
    outline: 2px solid var(--emb-blanco);
    outline-offset: 2px;
}

.emb-error {
    color: #ffc2c2;
    font-size: .9rem;
}

/* ── Pase verde ───────────────────────────────────────────────── */
.emb-pase .emb-contenido {
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.emb-check {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid var(--emb-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    line-height: 1;
}

.emb-slide.activa .emb-check {
    animation: emb-pop .5s cubic-bezier(.3, 1.5, .5, 1) both;
    animation-delay: .15s;
}

@keyframes emb-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.emb-pase-nombre {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.emb-pase-hora {
    font-size: .95rem;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

/* Fin centrado */
#s-fin .emb-contenido {
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

/* ── Accesibilidad: sin animaciones si el usuario las redujo ──── */
@media (prefers-reduced-motion: reduce) {
    .emb-slide.activa::before,
    .emb-slide.activa .emb-reveal > *,
    .emb-slide.activa .emb-check {
        animation: none !important;
    }
    .emb-slide.activa,
    .emb-slide.saliendo {
        transition: none;
    }
    .emb-slide.activa .emb-reveal > * { opacity: 1; transform: none; }
}