/* ==================================================================
   GUERBET · Conferencia 100 — hoja de estilo del sitio de inscripción
   Paleta de marca entregada por el cliente:
       rosado  #e5348b
       amarillo #ffcc00
       azul de fondo #171825
       tipografía DIN
   Respecto del Simposio TM 2026 cambian tres cosas: la barra de datos pasa
   de rosa a amarillo, el botón se invierte (pastilla blanca con texto rosa)
   y la trama de puntos del pie termina en rosa macizo.

   Nota sobre el arte: la pieza entregada (30 agosto/Web Conferencia 100.pdf)
   trae un azul marino #002f53 en el pie y como color al que funde la imagen
   clave por abajo. Aquí manda la paleta de marca, así que el fondo de la
   página es #171825 y la imagen clave se funde con una máscara para que el
   empalme no se note. Si se quiere el azul del arte, basta cambiar
   --gb-azul por --gb-marino en html/body y en .evento-page.
   ================================================================== */

:root {
    --gb-rosa: #e5348b;
    --gb-rosa-claro: #f36ba9;
    --gb-amarillo: #ffcc00;
    /* Azul noche: fondo de la página y del panel interno. */
    --gb-azul: #171825;
    --gb-azul-oscuro: #101019;
    /* Azul marino del arte entregado (el pie de la pieza original). No se usa
       como fondo; queda declarado por si se decide volver a él. */
    --gb-marino: #002f53;
    /* '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;
    /* dvh y no vh: en el móvil la barra del navegador se retrae al bajar y con vh
       el fondo quedaba con una franja vacía al final. */
    min-height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: var(--gb-azul);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 16px 64px;
}

/* Imagen clave (terraza al atardecer) en la parte superior. La pieza termina abajo
   en el azul marino del arte (#002f53), que no es el azul de fondo de la página, así
   que se enmascara con un degradado vertical para que se funda con el azul noche en
   vez de cortarse con una línea recta.
   El alto se limita a 780 px para que en pantallas anchas la tarjeta siga cayendo
   sobre el fondo y la trama, como en el diseño, en vez de flotar toda sobre la foto. */
.evento-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1600px;
    aspect-ratio: 8036 / 5382;
    max-height: 780px;
    /* "bottom" y no "top": cuando hay que recortar, se sacrifica cielo por arriba
       y se conserva el borde inferior, que es el que funde con el azul marino. */
    background-position: center bottom;
    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 (94 KB frente a los 56 MB del PNG
       original). El que no entienda image-set() descarta esa línea y usa 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 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

/* Trama de puntos del pie, anclada abajo y a todo el ancho.
   El alto va por viewport y no por proporción de la imagen: la pieza original está
   compuesta sobre un lienzo vertical (8000 × 9284), así que a escala natural la trama
   ocuparía casi novecientos píxeles y en una pantalla apaisada treparía por encima de
   la imagen clave. Con clamp() ocupa siempre la misma franja de pantalla que en el
   diseño, sea cual sea el ancho.
   La entrada la hace la máscara y no el degradado de opacidad de la propia pieza,
   porque al recortarse el borde superior ese degradado se pierde. */
.evento-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: clamp(320px, 48vh, 620px);
    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%, rgba(0, 0, 0, 0.55) 42%, #000 76%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 42%, #000 76%);
    z-index: 0;
    pointer-events: none;
}

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

/* Lockup Conferencia · 100 years / Guerbet */
.evento-logo {
    text-align: center;
    margin: 6px 0 26px;
}

/* <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;
}

/* El título real de la página vive en el logo: se deja accesible para lectores de
   pantalla y buscadores sin alterar el diseño. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 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.70);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 30px;
    padding: 34px 32px 38px;
    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. En amarillo, como en la
   pieza nueva. Los textos se escriben con normalidad en appsettings.json y se
   pasan a mayúsculas aquí, para no guardar dos versiones de cada dato. */
.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-amarillo);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    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;
}

/* El asterisco de obligatorio también pasa a amarillo en esta pieza. */
.campo .req {
    color: var(--gb-amarillo);
    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 la trama de puntos.
   En esta pieza va al revés que en la anterior: pastilla blanca con texto rosa. */
.evento-enviar {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.btn-enviar {
    background: #fff;
    color: var(--gb-rosa);
    border: none;
    border-radius: 30px;
    padding: 16px 64px;
    font-family: inherit;
    font-weight: 700;
    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 12px 30px rgba(0, 0, 0, 0.30);
}

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

.btn-enviar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 12px 30px rgba(0, 0, 0, 0.30);
}

.btn-enviar:disabled {
    opacity: 0.6;
    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 h1,
.gracias-box h2 {
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #fff;
}

.gracias-box .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(255, 204, 0, 0.32);
    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-amarillo);
    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 h1,
    .gracias-box h2 {
        font-size: 1.6rem;
    }
    .btn-enviar {
        padding: 15px 52px;
    }
    /* En móvil se sirven las versiones de 800 px: la imagen clave baja de 94 KB a
       33 KB y la trama de 198 KB a 71 KB, sin diferencia visible a ese tamaño. */
    .evento-page::before {
        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'));
    }
}

/* Quien haya pedido menos animación en su sistema no ve las transiciones. */
@media (prefers-reduced-motion: reduce) {
    .btn-enviar,
    .campo input,
    .campo select,
    .campo textarea,
    .campo-radios input[type="radio"],
    .campo-radios input[type="radio"]::before {
        transition: none;
    }
    .btn-enviar:hover:not(:disabled) {
        transform: none;
    }
}

/* ====================== 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;
}

.topbar-acciones {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-link {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 1px;
}

.admin-link:hover {
    color: var(--gb-rosa);
    border-bottom-color: var(--gb-rosa);
}

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

/* Aforo completo: el formulario dejó de aceptar inscripciones. */
.stat-card--lleno {
    border-left-color: #a12222;
    background: #fdf3f3;
}

.stat-card--lleno .num {
    color: #a12222;
}

.stat-card--lleno .lbl strong {
    color: #a12222;
    display: block;
}

/* 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;
}

/* ====================== Envío de invitaciones ====================== */

.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.panel {
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.panel-ancho {
    grid-column: 1 / -1;
}

.panel h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--gb-azul);
}

.panel-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.panel-encabezado h2 {
    margin: 0;
}

.campo-titulo {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: #374151;
    margin-bottom: 4px;
}

.ayuda {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 8px;
    line-height: 1.5;
}

.ayuda code,
.descartados code {
    background: #f3f4f6;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.94em;
}

.inv-textarea,
.inv-input {
    width: 100%;
    border: 1px solid #d0d3d9;
    border-radius: 8px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #1a1a22;
}

.inv-textarea {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    resize: vertical;
}

.inv-textarea:focus,
.inv-input:focus {
    outline: none;
    border-color: var(--gb-rosa);
    box-shadow: 0 0 0 3px rgba(229, 52, 139, 0.18);
}

.inv-buscar {
    max-width: 280px;
}

.inv-file {
    display: block;
    font-size: 0.85rem;
    margin-top: 4px;
}

.archivo-ok {
    margin-top: 8px;
    font-size: 0.82rem;
    color: #1e7d1e;
}

.inv-acciones {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.analisis {
    margin-top: 16px;
    padding: 12px 14px;
    background: #f8fafc;
    border-left: 4px solid var(--gb-rosa);
    border-radius: 8px;
    font-size: 0.86rem;
    line-height: 1.7;
}

.analisis .aviso {
    color: #92600a;
}

.descartados {
    margin-top: 8px;
}

.descartados summary {
    cursor: pointer;
    color: #a12222;
    font-weight: 600;
}

.descartados ul {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 0.8rem;
    color: #6b7280;
}

.fila-prueba {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.fila-prueba .inv-input {
    flex: 1 1 220px;
}

.separador {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 22px 0 18px;
}

.resultado-ok,
.resultado-error {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.resultado-ok {
    background: #e8f6e8;
    color: #1e7d1e;
}

.resultado-error {
    background: #fdecec;
    color: #a12222;
}

.btn-enviar-masivo {
    background: var(--gb-rosa);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;
}

.btn-enviar-masivo:hover:not(:disabled) {
    background: var(--gb-rosa-claro);
}

.btn-enviar-masivo:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

.confirmar-envio {
    background: #fdf3f3;
    border: 1px solid #f0d0d0;
    border-radius: 8px;
    padding: 14px 16px;
}

.confirmar-envio p {
    margin: 0 0 12px;
    font-size: 0.87rem;
    color: #a12222;
    font-weight: 600;
}

/* Barra de progreso del envío */
.envio-progreso {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--gb-rosa);
}

.envio-progreso .barra {
    height: 8px;
    background: #eceef2;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

.envio-progreso .relleno {
    height: 100%;
    background: var(--gb-rosa);
    transition: width 0.25s ease;
}

.envio-progreso .detalle {
    font-size: 0.85rem;
    color: #374151;
}

.envio-progreso .detalle .ok {
    color: #1e7d1e;
    font-weight: 600;
}

.envio-progreso .detalle .err {
    color: #a12222;
    font-weight: 600;
}

.envio-progreso .detalle .ultimo {
    color: #6b7280;
}

.btn-cancelar {
    margin-top: 10px;
    background: #fff;
    color: #a12222;
    border: 1px solid #e6c9c9;
    border-radius: 8px;
    padding: 6px 14px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
}

.celda-detalle {
    max-width: 380px;
    white-space: normal;
    color: #6b7280;
    font-size: 0.8rem;
}

/* --- Selección de destinatarios del recordatorio --- */

.seleccion-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.col-check {
    width: 42px;
    text-align: center;
}

.col-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--gb-rosa);
    cursor: pointer;
}

tr.fila-marcada {
    background: #fdeef5;
}

tr.fila-marcada:hover {
    background: #fce0ec;
}

.recordado {
    color: #1e7d1e;
    font-weight: 600;
    font-size: 0.8rem;
}

.aviso-repetido {
    color: #92600a;
    font-weight: 600;
}

/* ====================== 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."
}