:root {
    --pp-accent: #1296E8;
    --pp-accent-600: #0f7fc7;
    --pp-ink: #0F172A;
    --pp-muted: #64748B;
    --pp-bg: #F7F9FC;
    --pp-border: #E2E8F0;
    --pp-success: #10B981;
    --pp-danger: #DC2626;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--pp-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    background: var(--pp-bg);
    color: var(--pp-ink);
}

/* Imagen de cabecera (hero) del formulario de inscripción: full-width dentro del contenedor, responsive. */
.hero {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 14px;
}

/* El FocusOnNavigate enfoca el <h1> tras navegar; se oculta ese anillo de foco solo en elementos
   enfocados por programa (headings / tabindex=-1). No afecta el foco de teclado en botones/inputs. */
h1:focus, h2:focus, h3:focus,
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Opciones tipo radio (campos de selección Sí/No). */
.opciones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.opciones .radio { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; }
.opciones .radio input { margin: 0; }

.portal-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.portal-header {
    background: var(--pp-ink); color: #fff; padding: 14px 18px;
    font-weight: 800; letter-spacing: .3px;
}
.portal-brand { font-size: 1.05rem; }
.portal-main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 18px; }
.portal-footer { text-align: center; color: var(--pp-muted); font-size: .8rem; padding: 18px; }

.card { background: #fff; border: 1px solid var(--pp-border); border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 0 0 10px; }
.muted { color: var(--pp-muted); font-size: .9rem; }

label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.campo-error { display: block; margin-top: 6px; color: var(--pp-danger); font-size: .82rem; font-weight: 500; }
/* Bloque de datos de salud: se separa visualmente porque tambien se separa legalmente (consentimiento
   expreso y aparte). El borde y el fondo le dicen a la persona «esto es otra cosa, y es opcional». */
.bloque-sensible { border: 1px solid var(--pp-border); border-radius: 12px; padding: 14px 14px 2px; margin: 0 0 14px; background: #f8fafc; }
.bloque-sensible > legend { padding: 0 6px; font-size: .85rem; font-weight: 700; color: var(--pp-ink, #16233E); }
.nota-sensible { margin: 0 0 12px; font-size: .82rem; line-height: 1.5; color: var(--pp-muted); }

.input, select.input { width: 100%; padding: 11px 12px; border: 1px solid var(--pp-border); border-radius: 10px; font-size: 1rem; background: #fff; }
.input:focus, select.input:focus { outline: 2px solid var(--pp-accent); border-color: var(--pp-accent); }

.btn { display: inline-block; width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; }
.btn-primary { background: var(--pp-accent); color: #fff; }
.btn-primary:hover { background: var(--pp-accent-600); }
.btn-ghost { background: transparent; color: var(--pp-muted); width: auto; padding: 8px 0; text-decoration: none; }
/* «¿No eres tú? Cerrar sesión», bajo el saludo del portal de confirmación. Discreto: es una salida, no una
   acción del flujo. El área táctil se agranda con padding sin cambiar cómo se ve. */
.saludo-salir { margin: 0 0 8px; font-size: .875rem; color: var(--pp-muted); }
.link-salir {
    display: inline-flex; align-items: center; gap: 4px; padding: 10px 2px; margin: -10px 0;
    color: var(--pp-ink); font-weight: 600;
    /* Texto oscuro + subrayado del color del evento: el color de marca puede no dar 4.5:1 sobre blanco. */
    text-decoration: underline; text-decoration-color: var(--pp-accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.link-salir:hover { color: var(--pp-accent-600, var(--pp-accent)); }
.link-salir:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; border-radius: 4px; }
.link-salir svg { flex: none; }

.alert { border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin-bottom: 14px; }
.alert-error { background: #fef2f2; border: 1px solid #fecaca; color: var(--pp-danger); }
.alert-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

.persona { border: 1px solid var(--pp-border); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.persona-nombre { font-weight: 700; }
.persona-sub { color: var(--pp-muted); font-size: .85rem; }
.row-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
/* Variante para etiquetas de varias líneas (consentimientos): la casilla se alinea con la PRIMERA línea;
   centrada quedaba flotando a media altura del párrafo. */
.row-check-top { align-items: flex-start; }
.row-check-top input[type=checkbox] { margin-top: 2px; }
/* INTERRUPTOR. La casilla nativa sigue siendo una casilla —mismo elemento, misma semántica, el espacio
   la alterna igual—, solo que se dibuja como interruptor: en una pantalla donde lo que se marca es «¿viene
   esta persona?», un interruptor dice mejor «encendido / apagado» que un tick.
   Solo afecta a .row-check, que existe únicamente en la confirmación; el formulario público de inscripción
   usa .field.checkbox y no se toca. */
.row-check input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 46px;
    height: 27px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #CBD1D4;
    position: relative;
    cursor: pointer;
    transition: background .16s ease;
}

.row-check input[type=checkbox]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform .16s ease;
}

.row-check input[type=checkbox]:checked { background: var(--pp-accent); }
.row-check input[type=checkbox]:checked::after { transform: translateX(19px); }

/* El foco de teclado tiene que verse: es la única forma de usar esto sin ratón. */
.row-check input[type=checkbox]:focus-visible {
    outline: 2px solid var(--pp-accent);
    outline-offset: 3px;
}

/* Un desplegable deshabilitado debe PARECER deshabilitado, no roto. */
.input:disabled, select.input:disabled {
    background: #F1F3F4;
    color: #8A9094;
    cursor: not-allowed;
}

.chip { display: inline-block; background: #eff6ff; color: var(--pp-accent); border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; }
.aforo { font-size: .85rem; color: var(--pp-muted); }

/* Columna de referencia de la confirmación (quién eres, tu fecha, tu QR). En móvil NO existe: sus tarjetas
   se comportan como hijas directas de .portal-main, así que el orden y el aspecto quedan igual que si el
   contenedor no estuviera. Solo cobra forma en escritorio, abajo. */
.pp-columna-lateral { display: contents; }

/* ============================================================================
   ESCRITORIO DE LA PANTALLA DE CONFIRMACIÓN (dos columnas, desde 1100px)

   En una columna de 640px sobre una pantalla de 1440 el portal parece una app
   de teléfono estirada. Acá se parte en dos:

     izquierda  quién eres, tu fecha, el QR y las acciones secundarias
     derecha    la tarea: a quién confirmas

   Aplica SOLO a /e/{slug}/confirmar. El gancho es el campo oculto que Blazor
   le pone al EditForm con FormName="confirmar": `.portal-main` lo comparten
   también Inscribir y Gracias, y el formulario de inscripción está EN VIVO con
   clientes — convertirlo en dos columnas sin que nadie lo pida sería romperlo.

   No hace falta envolver nada en el .razor porque ese <form> es hijo DIRECTO de
   .portal-main: se le fija la columna 2 y todo lo demás cae solo en la 1. Las
   tarjetas que viven DENTRO del form no son ítems de esta grilla.

   Si el evento no tiene fecha asignada no se renderiza el form, el :has() no
   engancha y la pantalla se queda en una columna. Degrada sola. */
@media (min-width: 1100px) {
    .portal-main:has(> form input[name="_handler"][value="confirmar"]) {
        max-width: 1320px;
        padding: 28px 24px 10px;
        display: grid;
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
        column-gap: 24px;
        /* row-gap en 0 a propósito: las dos columnas abarcan muchas filas y, con separación entre filas,
           cada fila vacía sumaría un hueco. El aire vertical lo pone el margin-bottom de cada tarjeta. */
        row-gap: 0;
        align-items: start;
        /* .portal-main es flex:1 dentro de .portal-shell y recibe todo el alto de la ventana. Sin esto, la
           grilla reparte ese sobrante entre las filas y las tarjetas se estiran. */
        align-content: start;
    }

    /* Las dos columnas abarcan las mismas filas. Así la lateral tiene RECORRIDO para quedarse fija: si
       ocupara solo su fila, position:sticky no tendría dónde desplazarse y la columna izquierda quedaría
       vacía apenas se baja un poco — que es justo como se veía antes. */
    .portal-main > .pp-columna-lateral {
        display: block;
        grid-column: 1;
        grid-row: 1 / span 20;
        align-self: start;
        position: sticky;
        top: 20px;
    }

    .portal-main > form:has(input[name="_handler"][value="confirmar"]) {
        grid-column: 2;
        grid-row: 1 / span 20;
    }

    /* «¿Necesitas otra fecha?» y «Mis datos» son cosas que se HACEN, como el formulario: van a su lado. */
    .portal-main:has(> form input[name="_handler"][value="confirmar"]) > .card:has(h2) {
        grid-column: 2;
    }

    /* Los avisos cruzan las dos columnas arriba de todo. Van primeros en el marcado, así que el acomodo
       automático los deja en la fila 1 sin tener que fijarla a mano. */
    .portal-main:has(> form input[name="_handler"][value="confirmar"]) > .alert {
        grid-column: 1 / -1;
    }

    /* Grupo familiar de a dos. Con cuatro integrantes, uno debajo de otro, la tarjeta se hacía larguísima. */
    .portal-main > form .card:has(.persona:nth-of-type(2)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        row-gap: 12px;
    }

    .portal-main > form .card:has(.persona:nth-of-type(2)) > h2,
    .portal-main > form .card:has(.persona:nth-of-type(2)) > p {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .portal-main > form .card:has(.persona:nth-of-type(2)) > .persona {
        margin-bottom: 0;
    }

    /* El titular está solo en su tarjeta: asistencia a la izquierda, alimentación a la derecha, en vez de
       dejar medio ancho vacío. El nombre cruza las dos. */
    .portal-main > form .card:not(:has(.persona:nth-of-type(2))) .persona {
        display: grid;
        grid-template-columns: auto minmax(0, 340px);
        column-gap: 28px;
        align-items: end;
    }

    .portal-main > form .card:not(:has(.persona:nth-of-type(2))) .persona > .persona-nombre {
        grid-column: 1 / -1;
        margin-bottom: 4px;
    }

    .portal-main > form .card:not(:has(.persona:nth-of-type(2))) .persona > .row-check {
        margin-bottom: 0;
    }

    /* Un desplegable que dice «Normal» no necesita 600px, y un párrafo a todo el ancho cansa de leer. */
    .portal-main > form .input,
    .portal-main > form select.input {
        max-width: 460px;
    }

    .portal-main > form .card p,
    .portal-main > form .card .row-check span {
        max-width: 68ch;
    }

    /* El botón que cierra la tarea tampoco necesita 700px de ancho. */
    .portal-main > form .card:has(button.btn-primary:only-child) .btn {
        max-width: 420px;
        margin-inline: auto;
    }
}