:root {
    --abbott-amarillo: #ffcc00;
    --abbott-negro: #1a1a1a;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Brandon Text', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--abbott-negro);
}

h1:focus {
    outline: none;
}

a {
    color: inherit;
}

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

.evento-page {
    min-height: 100vh;
    width: 100%;
    /* En pantallas angostas (móvil) la imagen se muestra completa a su proporción
       natural —mariposa sutil arriba a la derecha— en lugar de 'cover', que la
       ampliaba demasiado. El degradado replica el borde inferior de la imagen. */
    background-color: #f4be03;
    background-image: url('/img/fondo.png'),
                      linear-gradient(to right, #e5a906, #f3be04 50%, #ffd201);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, top center;
    background-size: 100% auto, 100% 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 36px 16px 48px;
}

/* En pantallas anchas el ancho del fondo se fija (no escala con el viewport) para
   que la mariposa NO se agigante. Los degradados difuminan los bordes del póster
   hacia el dorado, de modo que el recorte no se note. 900 × 1087 = proporción real
   de la imagen (1920 × 2319). */
@media (min-width: 900px) {
    .evento-page {
        background-image:
            linear-gradient(to bottom, rgba(244, 190, 3, 0) 68%, #f4be03 100%),
            linear-gradient(to right, #f4be03 0%, rgba(244, 190, 3, 0) 20%, rgba(244, 190, 3, 0) 80%, #f4be03 100%),
            url('/img/fondo.png');
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top center, top center;
        background-size: 900px 1087px, 900px 1087px, 900px 1087px;
    }
}

.evento-wrap {
    width: 100%;
    max-width: 500px;
}

/* Logo 10 años */
.evento-logo {
    margin: 8px 0 26px;
}

.evento-logo img {
    width: 220px;
    max-width: 70%;
    height: auto;
    display: block;
}

/* Píldoras de fecha y horario — ocupan el mismo ancho que la tarjeta */
.evento-pills {
    display: flex;
    gap: 14px;
    margin-bottom: 26px;
    width: 100%;
}

.evento-pills img {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: auto;
    display: block;
}

/* Al quedar solo la píldora de fecha (cada sede tiene un horario distinto), se acota
   a la mitad del ancho y se centra para que no se estire a lo largo de toda la tarjeta.
   Cuando la acompaña la píldora de horario, ambas se reparten el ancho a partes iguales. */
.evento-pills .pill-fecha:only-child {
    flex: 0 1 auto;
    max-width: 48%;
    margin: 0 auto;
}

/* Tarjeta translúcida que contiene el formulario */
.evento-card {
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 22px;
    padding: 30px 28px 34px;
    backdrop-filter: blur(2px);
    box-shadow: 0 10px 30px rgba(120, 90, 0, 0.12);
}

.campo {
    margin-bottom: 18px;
}

.campo label.campo-label {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 7px;
    color: var(--abbott-negro);
}

.campo .req {
    color: #c0392b;
    margin-left: 2px;
}

.campo input:not([type="radio"]):not([type="checkbox"]),
.campo select,
.campo textarea {
    width: 100%;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--abbott-negro);
    outline: none;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: rgba(60, 60, 60, 0.45);
    font-style: italic;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.25);
}

/* Opciones tipo radio (Sí / No asistiré) */
.campo-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.campo-radios label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
}

.campo-radios input[type="radio"] {
    accent-color: var(--abbott-negro);
    width: 17px;
    height: 17px;
}

/* Declaración de autorización de datos */
.declaracion-texto {
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
}

.declaracion-texto p {
    margin: 0 0 10px;
}

.declaracion-texto p:last-child {
    margin-bottom: 0;
}

/* Checkbox de autorización */
.campo-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.campo-check label {
    font-size: 0.95rem;
    font-weight: 500;
}

.campo-check input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--abbott-negro);
    flex: 0 0 auto;
}

/* Botón enviar */
.evento-enviar {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.btn-enviar {
    background: var(--abbott-negro);
    color: #fff;
    border: none;
    border-radius: 26px;
    padding: 13px 54px;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

.btn-enviar:hover {
    background: #000;
    transform: translateY(-1px);
}

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

/* Logo Abbott al pie */
.evento-footer {
    text-align: center;
    margin-top: 30px;
}

.evento-footer img {
    height: 76px;
    width: auto;
}

/* Aviso legal de marcas */
.evento-legal {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.5;
    color: #6b6b6b;
    margin: 18px auto 0;
    max-width: 520px;
}

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

/* Pantalla de agradecimiento */
.gracias-box {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 22px;
    padding: 42px 34px;
    text-align: center;
}

.gracias-box h2 {
    font-weight: 900;
    font-size: 1.7rem;
    margin: 0 0 12px;
}

.gracias-box p {
    font-weight: 500;
    font-size: 1rem;
    margin: 0;
}

@media (max-width: 540px) {
    .evento-pills {
        flex-direction: column;
    }
    .evento-card {
        padding: 24px 18px 28px;
    }
}

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

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

.admin-topbar {
    background: var(--abbott-negro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 26px;
}

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

.admin-topbar .brand .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--abbott-amarillo);
}

.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;
}

.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: 150px;
}

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

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

.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(--abbott-negro);
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.5);
}

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

.btn-export {
    background: var(--abbott-amarillo);
    color: var(--abbott-negro);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.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: #fffbe6;
}

.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(--abbott-negro);
    border: 1px solid #d0d4da;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}

.btn-reenviar:hover:not(:disabled) {
    background: var(--abbott-amarillo);
    border-color: var(--abbott-amarillo);
}

.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;
}

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

.login-page {
    min-height: 100vh;
    background-color: #f4be03;
    background-image: url('/img/fondo.png'),
                      linear-gradient(to right, #e5a906, #f3be04 50%, #ffd201);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, top center;
    background-size: 100% auto, 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

@media (min-width: 900px) {
    .login-page {
        background-image:
            linear-gradient(to bottom, rgba(244, 190, 3, 0) 68%, #f4be03 100%),
            linear-gradient(to right, #f4be03 0%, rgba(244, 190, 3, 0) 20%, rgba(244, 190, 3, 0) 80%, #f4be03 100%),
            url('/img/fondo.png');
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, top center, top center;
        background-size: 900px 1087px, 900px 1087px, 900px 1087px;
    }
}

.login-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    padding: 38px 34px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 14px 40px rgba(120, 90, 0, 0.25);
}

.login-card h1 {
    font-weight: 900;
    font-size: 1.4rem;
    margin: 0 0 4px;
}

.login-card .sub {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 22px;
}

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

.login-card input {
    width: 100%;
    border: 1px solid #d0d3d9;
    border-radius: 8px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.login-card .btn-login {
    width: 100%;
    background: var(--abbott-negro);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.login-error {
    background: #f8d7da;
    color: #842029;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.82rem;
    margin-bottom: 16px;
}

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

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