/* ==================================================================
   GUERBET · Simposio TM 2026 — hoja de estilo del sitio de inscripción
   Paleta tomada directamente de la pieza aprobada (web-guerbert.pdf):
   rosado corporativo #e5348b sobre azul noche #171825, con la franja
   de cuatro colores de la marca.
   ================================================================== */

:root {
    --gb-rosa: #e5348b;
    --gb-rosa-claro: #f36ba9;
    --gb-azul: #171825;
    --gb-azul-oscuro: #101019;
    --gb-franja-1: #002f53;
    --gb-franja-2: #fbba00;
    --gb-franja-3: #29b8ce;
    --gb-franja-4: #e5348b;
    /* 'DIN 2014' va primero: si algún día se copian sus .otf a wwwroot/fonts
       y se declaran en din.css, el sitio la toma sin tocar esta hoja. */
    --gb-font: 'DIN 2014', 'Barlow', system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--gb-font);
    background: var(--gb-azul);
    color: #fff;
}

h1:focus {
    outline: none;
}

a {
    color: inherit;
}

/* ====================== Página del formulario ====================== */

.evento-page {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--gb-azul);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 34px 16px 60px;
}

/* Imagen clave (el cañón) en la mitad superior. Se enmascara con un degradado
   vertical para que se funda con el azul noche del fondo, tal como en la pieza
   original, en lugar de cortarse con un borde recto. */
.evento-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1600px;
    /* Proporción algo más alta que la de la imagen (4018×2691 ≈ 1.49): con "cover"
       recorta unos pocos píxeles por abajo —justo donde empieza el fundido— en vez
       de ampliarla, que era lo que agrandaba de más el cañón. */
    aspect-ratio: 4 / 3;
    max-height: 900px;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    /* Dos declaraciones a propósito: la primera es el respaldo para navegadores sin
       image-set(); la segunda entrega WebP (≈250 KB frente a los 6 MB del PNG original)
       a todo navegador moderno. El que no entienda image-set() descarta esa línea y
       se queda con el JPEG. */
    background-image: url('/img/kv.jpg');
    background-image: image-set(url('/img/kv.webp') type('image/webp'),
                                url('/img/kv.jpg') type('image/jpeg'));
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.45) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.45) 80%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

/* Trama de puntos degradada del pie. */
.evento-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    min-height: 260px;
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url('/img/puntos.png');
    background-image: image-set(url('/img/puntos.webp') type('image/webp'),
                                url('/img/puntos.png') type('image/png'));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
    z-index: 0;
    pointer-events: none;
}

.evento-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 610px;
}

/* Lockup Guerbet · 100 years / SIMPOSIO TM 2026 */
.evento-logo {
    text-align: center;
    margin: 6px 0 14px;
}

/* <picture> es inline por defecto: en bloque, el centrado del logo se mantiene. */
.evento-logo picture,
.login-card picture {
    display: block;
}

.evento-logo img {
    width: 400px;
    max-width: 82%;
    height: auto;
}

/* Franja de cuatro colores bajo el logo */
.evento-franja {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 4px auto 24px;
    width: 104px;
}

.evento-franja .fr {
    height: 4px;
    flex: 1 1 0;
}

.evento-franja .fr-1 { background: var(--gb-franja-1); }
.evento-franja .fr-2 { background: var(--gb-franja-2); }
.evento-franja .fr-3 { background: var(--gb-franja-3); }
.evento-franja .fr-4 { background: var(--gb-franja-4); }

/* Tarjeta translúcida que contiene el formulario: deja ver la imagen clave
   por detrás, igual que en el diseño aprobado. */
.evento-card {
    position: relative;
    background: rgba(9, 5, 14, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 30px;
    padding: 30px 32px 36px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Barra de fecha / hora / lugar dentro de la tarjeta */
.evento-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: 26px;
}

.evento-datos .dato {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gb-rosa);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.evento-datos .dato img {
    height: 17px;
    width: auto;
    display: block;
}

.campo {
    margin-bottom: 19px;
}

.campo label.campo-label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 8px;
    color: #fff;
}

.campo .req {
    color: var(--gb-rosa);
    margin-left: 3px;
}

.campo input:not([type="radio"]):not([type="checkbox"]),
.campo select,
.campo textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.55);
    padding: 13px 15px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* La flecha del desplegable, replicada del diseño (chevron blanco). */
.campo select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px 18px;
    padding-right: 44px;
}

.campo select option {
    background: #1c1426;
    color: #fff;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    background: rgba(0, 0, 0, 0.72);
    border-color: var(--gb-rosa);
    box-shadow: 0 0 0 3px rgba(229, 52, 139, 0.22);
}

.campo-otra {
    margin-top: 9px;
}

/* Opciones tipo radio */
.campo-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    padding-top: 2px;
}

.campo-radios label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 400;
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

/* Radio dibujado a mano: aro fino sobre fondo oscuro con punto rosa al marcar,
   como en el diseño (el control nativo se ve blanco macizo sobre este fondo). */
.campo-radios input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: transparent;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: border-color 0.12s ease;
}

.campo-radios input[type="radio"]::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gb-rosa);
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
}

.campo-radios input[type="radio"]:checked {
    border-color: var(--gb-rosa);
}

.campo-radios input[type="radio"]:checked::before {
    transform: scale(1);
}

.campo-radios input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 52, 139, 0.28);
}

/* Botón enviar — va fuera de la tarjeta, centrado sobre el fondo. */
.evento-enviar {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.btn-enviar {
    background: var(--gb-rosa);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 15px 62px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    font-size: 0.98rem;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 10px 26px rgba(229, 52, 139, 0.32);
}

.btn-enviar:hover:not(:disabled) {
    background: var(--gb-rosa-claro);
    transform: translateY(-1px);
}

.btn-enviar:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Mensajes de validación */
.validation-message,
.campo .field-error {
    color: #ff8fb8;
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 6px;
    display: block;
}

/* ====================== Pantalla de agradecimiento ====================== */

.gracias-box {
    text-align: center;
    padding: 44px 34px 40px;
}

.gracias-box h2 {
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #fff;
}

.gracias-box h2 .rosa {
    color: var(--gb-rosa);
}

.gracias-box > p {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 auto;
    max-width: 400px;
}

.gracias-box > p strong {
    font-weight: 600;
}

.gracias-datos {
    margin: 30px auto 6px;
    max-width: 340px;
    text-align: left;
}

.gracias-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(229, 52, 139, 0.35);
    font-size: 1.02rem;
    font-weight: 500;
}

.gracias-item:last-child {
    border-bottom: none;
}

.gracias-item img {
    height: 34px;
    width: auto;
    flex: 0 0 auto;
}

.gracias-item .lbl {
    display: block;
    color: var(--gb-rosa);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.gracias-item small {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 300;
    font-size: 0.88rem;
}

.nos-vemos {
    color: var(--gb-rosa);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 26px 0 0;
}

@media (max-width: 560px) {
    .evento-card {
        padding: 24px 20px 30px;
        border-radius: 24px;
    }
    .evento-datos {
        gap: 8px 16px;
    }
    .evento-datos .dato {
        font-size: 0.78rem;
    }
    .gracias-box h2 {
        font-size: 1.6rem;
    }
    /* En móvil se sirven las versiones de 800 px: el fondo baja de ~250 KB a ~60 KB
       y la trama de ~280 KB a ~110 KB, sin diferencia visible a ese tamaño. */
    .evento-page::before {
        aspect-ratio: 3 / 4;
        background-image: url('/img/kv-800.jpg');
        background-image: image-set(url('/img/kv-800.webp') type('image/webp'),
                                    url('/img/kv-800.jpg') type('image/jpeg'));
    }
    .evento-page::after {
        background-image: url('/img/puntos-800.png');
        background-image: image-set(url('/img/puntos-800.webp') type('image/webp'),
                                    url('/img/puntos-800.png') type('image/png'));
    }
}

/* ====================== Panel interno (admin) ====================== */

.admin-page {
    min-height: 100vh;
    background: #f4f5f7;
    color: #1a1a22;
    padding: 0;
}

.admin-topbar {
    background: var(--gb-azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 26px;
    border-bottom: 3px solid var(--gb-rosa);
}

.admin-topbar .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
}

.admin-topbar .brand .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gb-rosa);
    flex: 0 0 auto;
}

.admin-topbar form {
    margin: 0;
}

.admin-logout {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: 18px;
    padding: 6px 18px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.admin-logout:hover {
    background: rgba(255, 255, 255, 0.12);
}

.admin-body {
    padding: 26px;
}

.admin-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    min-width: 165px;
    border-left: 4px solid var(--gb-rosa);
}

.stat-card .num {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.stat-card .lbl {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
}

/* La tarjeta de la papelera se distingue del resto con un gris neutro. */
.stat-card--papelera {
    border-left-color: #9aa1ac;
}

.stat-card--papelera .num {
    color: #6b7280;
}

/* Pestañas Inscritos / Papelera */
.admin-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e2e5ea;
}

.admin-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
}

.admin-tab:hover {
    color: var(--gb-azul);
}

.admin-tab.activa {
    color: var(--gb-rosa);
    border-bottom-color: var(--gb-rosa);
}

.admin-tab .cuenta {
    background: #eceef2;
    color: #4b5563;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.76rem;
    font-weight: 700;
}

.admin-tab.activa .cuenta {
    background: rgba(229, 52, 139, 0.14);
    color: var(--gb-rosa);
}

.admin-aviso {
    background: #fff;
    border-left: 4px solid #9aa1ac;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 0.84rem;
    color: #4b5563;
    margin: 0 0 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-toolbar input[type="search"] {
    flex: 1 1 280px;
    border: 1px solid #d0d3d9;
    border-radius: 8px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 0.9rem;
}

.admin-toolbar input[type="search"]:focus {
    outline: none;
    border-color: var(--gb-rosa);
    box-shadow: 0 0 0 3px rgba(229, 52, 139, 0.2);
}

.resultado-count {
    font-size: 0.82rem;
    color: #666;
    white-space: nowrap;
}

.btn-export {
    background: var(--gb-rosa);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-export:hover {
    background: var(--gb-rosa-claro);
    color: #fff;
}

.tabla-wrap {
    background: #fff;
    border-radius: 12px;
    overflow: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

table.tabla th,
table.tabla td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid #eef0f3;
    white-space: nowrap;
}

table.tabla th {
    background: #fafbfc;
    font-weight: 700;
    color: #444;
    position: sticky;
    top: 0;
}

table.tabla tbody tr:hover {
    background: #fdeef5;
}

.badge-si {
    background: #d6f5d6;
    color: #1e7d1e;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.badge-no {
    background: #f5d6d6;
    color: #a12222;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.empty-row {
    text-align: center;
    color: #888;
    padding: 30px;
}

.codigo-acceso {
    font-family: "Consolas", "Courier New", monospace;
    letter-spacing: 2px;
    font-weight: 700;
    background: #f3f4f6;
    color: #222;
    padding: 3px 8px;
    border-radius: 6px;
}

.btn-reenviar {
    background: #fff;
    color: var(--gb-azul);
    border: 1px solid #d0d4da;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
}

.btn-reenviar:hover:not(:disabled) {
    background: var(--gb-rosa);
    border-color: var(--gb-rosa);
    color: #fff;
}

.btn-reenviar:disabled {
    opacity: 0.6;
    cursor: default;
}

.reenvio-ok {
    margin-left: 8px;
    color: #1e7d1e;
    font-weight: 700;
    font-size: 0.78rem;
}

.reenvio-error {
    margin-left: 8px;
    color: #a12222;
    font-weight: 700;
    font-size: 0.78rem;
}

.reenvio-na {
    color: #bbb;
}

/* --- Acciones por fila: eliminar (papelera) y restaurar --- */

.celda-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-eliminar,
.btn-restaurar,
.btn-confirmar-si,
.btn-confirmar-no {
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-eliminar {
    background: #fff;
    color: #a12222;
    border-color: #e6c9c9;
}

.btn-eliminar:hover {
    background: #a12222;
    border-color: #a12222;
    color: #fff;
}

.btn-restaurar {
    background: #fff;
    color: #1e7d1e;
    border-color: #c6e2c6;
}

.btn-restaurar:hover:not(:disabled) {
    background: #1e7d1e;
    border-color: #1e7d1e;
    color: #fff;
}

.btn-restaurar:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Confirmación en dos pasos, para que un clic accidental no elimine a nadie. */
.confirmar-borrado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #a12222;
    white-space: nowrap;
}

.btn-confirmar-si {
    background: #a12222;
    color: #fff;
    border-color: #a12222;
    padding: 5px 12px;
}

.btn-confirmar-si:disabled {
    opacity: 0.6;
    cursor: default;
}

.btn-confirmar-no {
    background: #fff;
    color: #4b5563;
    border-color: #d0d4da;
    padding: 5px 12px;
}

.btn-confirmar-no:hover {
    background: #f3f4f6;
}

tr.fila-confirmando {
    background: #fdf3f3;
}

/* ====================== Login interno ====================== */

.login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--gb-azul);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('/img/kv.jpg');
    background-image: image-set(url('/img/kv.webp') type('image/webp'),
                                url('/img/kv.jpg') type('image/jpeg'));
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    z-index: 0;
}

.login-card {
    position: relative;
    z-index: 1;
    background: rgba(11, 6, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 22px;
    padding: 34px 34px 38px;
    width: 100%;
    max-width: 390px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.login-card .login-logo {
    display: block;
    width: 200px;
    max-width: 70%;
    height: auto;
    margin: 0 auto 22px;
}

.login-card h1 {
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0 0 4px;
    color: #fff;
}

.login-card .sub {
    color: var(--gb-rosa);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}

.login-card label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: #fff;
}

.login-card input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 9px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    margin-bottom: 16px;
    outline: none;
}

.login-card input:focus {
    border-color: var(--gb-rosa);
    box-shadow: 0 0 0 3px rgba(229, 52, 139, 0.22);
}

.login-card .btn-login {
    width: 100%;
    background: var(--gb-rosa);
    color: #fff;
    border: none;
    border-radius: 26px;
    padding: 13px;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.16em;
    cursor: pointer;
    margin-top: 6px;
}

.login-card .btn-login:hover {
    background: var(--gb-rosa-claro);
}

.login-error {
    background: rgba(229, 52, 139, 0.15);
    border: 1px solid rgba(229, 52, 139, 0.4);
    color: #ff9ec5;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.82rem;
    margin-bottom: 16px;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error."
}