/* ========================================================================== */
/* 1. VARIABLES Y ESTILOS GLOBALES                                            */
/* ========================================================================== */

:root {
    /* Colores */
    --color-primary: rgba(128, 128, 128, 0.3);
    --text-primary: #e0e0e0;
    --button-action: #4a6bd5;
    --text-accent: #cfdeeaeb;

    --glass-bg: rgba(35, 35, 35, 0.5);
    --glass-bg-hover: rgba(45, 45, 45, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);


    --border-radius: 45px;
    --transition-speed: 0.3s;
    --glass-input-bg: rgba(255, 255, 255, 0.1);
    --glass-input-border: rgba(255, 255, 255, 0.2);
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800"><defs><filter id="bbblurry-filter" x="-100%" y="-100%" width="400%" height="400%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="111" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" edgeMode="none" result="blur"></feGaussianBlur></filter></defs><g filter="url(%23bbblurry-filter)"><ellipse rx="169" ry="159.5" cx="389.7014512024268" cy="301.9875055216577" fill="hsla(0, 88%, 51%, 1.00)"></ellipse></g></svg>') no-repeat center center fixed,

        linear-gradient(rgba(18, 18, 18, 0.9), rgb(18, 18, 18));

    background-size: cover;
    min-height: 100vh;
}

/* ========================================================================== */
/* 2. LAYOUT PRINCIPAL              INDEX ---------                                          */
/* ========================================================================== */

.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.main-logo {
    margin-bottom: 30px;
}

.main-logo img {
    width: 100%;
    max-width: 180px;
    height: auto;
}




/* 3. COMPONENTES EN EL INDEX                                                 */

.titulo-formulario {

    font-size: clamp(0.5rem, 2.5vw, 1rem);
    font-weight: 900;
    text-align: left;
    margin-bottom: 8px;
    margin-bottom: 1px;
}


.titulo-formulario .titulo-rojo {
    color: #E10600;

}


.titulo-formulario .titulo-blanco {
    color: #FFFFFF;
}



.subtitulo-formulario {

    font-style: italic;
    color: #CCCCCC;
    text-align: left;
    margin-bottom: 24px;
    font-size: clamp(0.4rem, 2.5vw, 1rem);
}


.glass-box {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border-radius);
    padding: clamp(25px, 5vw, 40px);
    width: 100%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.167);
}


.glass-box p {
    font-style: italic;
    font-size: clamp(0.4rem, 2.5vw, 1rem);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* --- ESTILOS DE LISTA --- */
.glass-box ul {
    font-style: italic;
    list-style: none;
    text-align: left;
    padding: 0;
    margin-bottom: 0;
}

.glass-box li {
    margin-bottom: 5px;
    line-height: 1.6;
    font-size: clamp(0.2rem, 2.5vw, 1rem);
}


/* 1. ESTILO PARA EL SEPARADOR <hr>         */

.glass-box hr {
    border: none;
    height: 2px;
    margin: 30px 0;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.4),
            rgba(255, 255, 255, 0));
}









/* ======================================= */
/* 1.2. ESTILO PARA EL TEXTO "INICIA SESIÓN" */
/* ======================================= */
.auth-prompt {
    font-size: 0.8rem;
    font-style: italic;
    color: #c5c5c5;
    text-align: center;
    margin-top: -15px;
    margin-bottom: 20px;
}


/* --- ESTILOS DE BOTÓN MODIFICADOS --- */

.auth-button-container {
    display: flex;
    justify-content: center;
    gap: 15px;

}

/* Estilo base para AMBOS botones */
.auth-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-decoration: none;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
    box-sizing: border-box;

    flex: 1;
    min-width: 0;
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* Estilo para los ICONOS SVG dentro de los botones */
.auth-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Estilo específico para el icono de Apple (lo hacemos blanco) */
.btn-apple svg {
    fill: #ffffff;
}

/* Estilo específico para Google */
.btn-google {
    background: #ffffff;
    color: #333333;
    border: 1px solid var(--glass-border);
}

.btn-google:hover {
    background: #f1f1f1;
}

/* Estilo específico para Apple */
.btn-apple {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.btn-apple:hover {
    background: #333333;
}















/* ========================================================================== */
/* 2. PÁGINA DASHBOARD DE USUARIO (Nuevo Diseño BENTO GRID)                   */
/* ========================================================================== */

/* Contenedor principal que centra la tarjeta (Sin cambios) */
.dashboard-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* ================== */
/* LAYOUT MÓVIL (Por defecto)
/* ================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Una sola columna en móvil */
    gap: 20px;
    /* Espacio entre las tarjetas */
    width: 100%;
    max-width: 550px;
    /* Ancho máximo en móvil */
}

/* 1. Estilo base para TODAS las tarjetas bento */
.bento-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* El padding que tendrán las tarjetas vacías (Form y QR) */
    padding: clamp(6px, 5vw, 10px);
    text-align: left;
}

/* 2. Modificador para la TARJETA DE PERFIL (Quita el padding) */
.bento-card.profile-card {
    padding: 2px;
    /* <-- Los 2px de borde que querías */
    overflow: hidden;
    /* Importante para redondear el banner */
    text-align: center;
    /* Mantenemos el centrado para esta tarjeta */
}

/* 3. Orden en móvil (Coincide con el HTML, pero lo forzamos) */
.profile-card {
    order: 1;
}

.form-card {
    order: 2;
}

.qr-card {
    order: 3;
}


/* ================== */
/* LAYOUT DESKTOP (Bento Grid Corregido) */
/* ================== */
@media (min-width: 768px) {
    .dashboard-grid {
        max-width: 1100px;
        /* Cambiamos a 2 columnas con alturas explícitas */
        grid-template-columns: 350px 1fr;
        /* Columna izquierda fija, derecha flexible */
        grid-template-rows: auto auto;
        grid-template-areas:
            "profile form"
            "qr form";
        gap: 20px;
        align-items: start;
    }

    /* Aseguramos que las tarjetas pequeñas tengan altura automática */
    .profile-card {
        grid-area: profile;
        height: fit-content;
        min-height: 280px;
    }

    /* ESTA ES LA CLAVE: El formulario debe ocupar AMBAS filas */
    /* ESTA ES LA CLAVE: El formulario y TODAS las tarjetas de contenido principal
       deben ocupar AMBAS filas */
    .form-card,
    .admin-actions-card,
    .evento-activo-card,
    .event-management-card,
    .event-details-card,
    .user-list-card {
        grid-area: form;
        grid-row: span 2;
        align-self: stretch;
        /* Ocupa 2 filas */
        min-height: 600px;
        /* Altura mínima suficiente */
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .qr-card {
        grid-area: qr;
        height: fit-content;
        min-height: 280px;
    }

    /* Aseguramos que el formulario activo ocupe todo el espacio */
    .bento-card.form-card.evento-activo {
        min-height: 600px;
        height: 100%;
    }

    /* Si hay contenido dentro del form-card, debe expandirse */
    #form-reserva {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}













/* ============================================================= */
/* --- ESTILOS DE LA TARJETA DE PERFIL (Sin cambios, solo copiados) --- */
/* ============================================================= */

/* 2. Cabecera de Perfil */
.profile-card .profile-header {
    position: relative;
    width: 100%;
    padding-top: 32%;
}

/* 3. Banner de Perfil */
.profile-card .profile-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2b. Superposición oscura para el banner */
.profile-card .profile-header::after {
    content: '';
    border-radius: var(--border-radius);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* 4. Avatar */
.profile-card .profile-pic {
    position: absolute;
    left: clamp(20px, 8vw, 40px);
    bottom: 0;
    transform: translateY(50%);
    width: clamp(75px, 20vw, 100px);
    height: clamp(75px, 20vw, 100px);
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--glass-border);
    margin: 0;
    z-index: 2;
}

/* 5. Contenido de Tarjeta */
.profile-card .profile-content {
    padding: clamp(30px, 5vw, 40px);
    padding-top: calc(clamp(37.5px, 10vw, 50px) + 20px);
    /* Padding responsivo */
    text-align: left;
}

/* 6. Estilos de contenido */
.profile-card .profile-name-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.profile-card .profile-name {
    font-size: clamp(1.3rem, 4vw, 1.5rem);
    font-weight: 700;
    color: var(--text-accent);
    margin-top: 0;
    margin-bottom: 0;
}

.profile-card .profile-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.profile-card .profile-rating svg {
    width: clamp(16px, 4vw, 18px);
    height: clamp(16px, 4vw, 18px);
}

.profile-card .profile-rating span {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    font-weight: 700;
    color: #fbbf18;
}

.profile-card .profile-email {
    font-size: clamp(0.85rem, 2.5vw, 0.9rem);
    font-style: italic;
    color: #c5c5c5;
    margin-bottom: 5px;
}

.profile-card p {
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 7. Botón de Salir */
.profile-logout-btn {
    position: absolute;
    right: clamp(20px, 8vw, 40px);
    bottom: 0;
    transform: translateY(50%);
    z-index: 2;
    display: inline-block;
    padding: clamp(6px, 1.5vw, 8px) clamp(14px, 3vw, 18px);
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    font-weight: bold;
    text-decoration: none;
    background: rgba(207, 22, 22, 0.693);
    color: #cccccc;
    border-radius: 50px;
    transition: all var(--transition-speed) ease;
}

.profile-logout-btn:hover {
    background: rgba(100, 100, 100, 0.5);
    transform: translateY(calc(50% - 2px));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 8. Píldora de Estado */
.profile-status-pill {
    display: block;
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    text-align: center;
    padding: 14px 20px;
    border-radius: 50px;
    transition: all var(--transition-speed) ease;
    margin: 0 clamp(20px, 5vw, 40px) clamp(20px, 5vw, 40px);
}



/* 9. BOTÓN DE "ADMIN" (TIPO PÍLDORA PEQUEÑA) */
.profile-admin-btn {
    display: inline-block;
    /* Para que no ocupe toda la línea */
    text-decoration: none;

    /* Tus peticiones: */
    font-style: italic;
    /* Letras cursivas */
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    /* Pequeño, como "Salir" */
    font-weight: bold;

    /* Tamaño, como "Salir" */
    padding: clamp(6px, 1.5vw, 8px) clamp(14px, 3vw, 18px);
    border-radius: 50px;
    /* Forma de píldora */

    /* Color (el rojo que ya tenías) */
    background: rgba(245, 66, 66, 0.3);
    color: #f88a8a;

    transition: all var(--transition-speed) ease;
}

.profile-admin-btn:hover {
    background: rgba(245, 66, 66, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-admin {
    background: rgba(245, 66, 66, 0.3);
    color: #f88a8a;
}

.profile-status-pill.is-inactive {
    background: rgba(0, 0, 0, 0.834);
    color: #555555;
}

.profile-status-pill.is-inactive:hover {
    background: rgba(1, 18, 31, 0.6);
    color: #ccc;
    cursor: pointer;
}

.profile-status-pill.is-active {
    background: #0bfa0f99;
    color: #dadada;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 15px var(--text-accent);
}

.profile-status-pill.is-active:hover {
    background: #358e37;
    box-shadow: 0 0 20px var(--text-accent);
}


/* ============================================================= */
/* Estilos para ESTADO =  evento Programado en curso */
/* ============================================================= */

/* --- 4.1. Estado: Placeholder (No hay eventos) --- */
.evento-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Damos un padding extra para que se centre verticalmente */
    padding: 40px 20px;
    /* Asegura que ocupe el espacio de la tarjeta en el grid */
    height: 100%;
    min-height: 250px;
    /* Altura mínima para que no se colapse */
    box-sizing: border-box;
}

.evento-placeholder .placeholder-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reutilizamos el fondo de los inputs */
    background: var(--glass-input-bg);
    border-radius: 50%;
    border: 1px solid var(--glass-input-border);
    margin-bottom: 25px;
}

.evento-placeholder .placeholder-icon svg {
    width: 40px;
    /* Tamaño del icono SVG */
    height: 40px;
    stroke: var(--text-primary);
    /* Color del icono */
    opacity: 0.6;
    /* Un poco sutil */
}

.evento-placeholder h2 {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    color: var(--text-accent);
    /* Tu color de acento */
    margin: 0 0 10px 0;
}

.evento-placeholder p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    /* Usamos el color de párrafo secundario */
    color: #c5c5c5;
    font-style: italic;
    line-height: 1.6;
    max-width: 350px;
    /* Para que el texto no sea muy ancho */
    margin: 0;
    /* Reseteamos el margen */
}






/* ============================================================= */
/* Estilos para ESTADO =  evento programado pero no reservas habiertas */
/* ============================================================= */




/* --- 4.2. Estado: Evento Programado (Próximamente) --- */
.evento-programado-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    /* Mismo padding que el otro placeholder */
    height: 100%;
    min-height: 250px;
    box-sizing: border-box;
}

/* Reutilizamos el estilo de icono que ya tenemos */
.evento-programado-placeholder .placeholder-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-input-bg);
    border-radius: 50%;
    border: 1px solid var(--glass-input-border);
    margin-bottom: 25px;
}

.evento-programado-placeholder .placeholder-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--text-primary);
    opacity: 0.6;
}

.evento-programado-placeholder h2 {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    color: var(--text-accent);
    /* Color de acento */
    margin: 0 0 10px 0;
}

/* Estilo para el nombre del evento */
.evento-programado-placeholder .evento-nombre {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    color: var(--text-primary);
    /* Color primario, más destacado */
    font-weight: 600;
    margin: 0 0 15px 0;
    line-height: 1.4;
    max-width: 400px;
}

/* Estilo para la fecha (en forma de píldora) */
.evento-programado-placeholder .evento-fecha-apertura {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: #c5c5c5;
    /* Color secundario */
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    background: var(--glass-input-bg);
    /* Fondo sutil */
    padding: 8px 15px;
    border-radius: 50px;
    /* Píldora */
    border: 1px solid var(--glass-input-border);
}










/* ============================================================= */
/* Estilos para ESTADO =  evento Abierto para recerba pero antes del (Formulario de reserva) */
/* ============================================================= */





/* --- 4.3. Estado: Evento Abierto (¡Formulario!) --- */
/* 1. Eliminar el padding de .form-card cuando hay evento abierto */
.bento-card.form-card.evento-activo {
    /* 1. APILAMOS LOS FONDOS
      Capa 1 (superior): Tu color de cristal (para mantener el efecto).
      Capa 2 (inferior): La URL de tu nueva imagen (Max).
    */
    background:
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        url('/static/IMAGES/max_bento.webp');

    /* 2. REGLAS PARA LA IMAGEN (Responsividad) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* 3. Mantenemos el resto de tus estilos originales */

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 0;
}

/* 2. Rediseñar la burbuja para que se pegue a los bordes */
/* Revisa esta regla (línea 112 aprox) */
.evento-abierto-info {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    /* <-- ASEGÚRATE DE ESTO */
    align-items: center;
    /* <-- Y DE ESTO */
    gap: 4px 15px;

    /* El resto de tus estilos (margin, padding, etc.) */
    margin: 0.5rem 1rem 40px 1rem;
    background: var(--glass-input-bg);
    padding-top: clamp(10px, 2vw, 12px);
    padding-bottom: clamp(10px, 2vw, 12px);
    padding-left: clamp(20px, 4vw, 30px);
    padding-right: clamp(20px, 4vw, 30px);
    border-radius: 30px;
    position: relative;
}

/* 3. Ajustar el contenedor del botón de reservar */
.inicio-reserva {
    text-align: center;
    margin-top: 15px;
}

/* 4. Asegurar que el formulario de reserva también tenga padding cuando se muestre */
#form-reserva {
    padding: clamp(20px, 4vw, 30px);
    padding-top: 20px;
}

/* Corregido */
.evento-abierto-info h2 {
    font-size: clamp(1.3rem, 3.5vw, 1.6rem);
    color: var(--text-accent);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    text-align: right;
    padding-right: clamp(10px, 4vw, 15px);
    margin-right: 0;
    /* Asegúrate que no tenga margen derecho */
    grid-column: 2;
    grid-row: 1;
    /* <-- ASEGÚRATE DE ESTO */
}

/* Contenedor para los detalles (ubicación y fecha) */
/* Contenedor para los detalles (ubicación y fecha) */
/* Corregido */
.evento-detalles-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0;
    grid-column: 1;
    /* <-- ASEGÚRATE DE ESTO */
}

/* Ítem individual (Icono + Texto) */
/* Ítem individual (Icono + Texto) */
.evento-detalle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Reducido de 12px */
    padding: 0;
}


.evento-detalle-item svg {
    width: 18px;
    /* Reducido de 24px */
    height: 18px;
    /* Reducido de 24px */
    flex-shrink: 0;
    opacity: 0.8;
}

.evento-detalle-item span {
    font-size: clamp(0.75rem, 2vw, 0.85rem);
    /* Reducido significativamente */
    color: var(--text-primary);
    font-weight: 500;
    font-style: italic;
    line-height: 1.2;
    /* Más compacto */
}


/* Píldora de ESTADO DE CUPOS (el "no-botón") */
.cupos-estado-pill {
    /* --- REGLA TOTALMENTE REESCRITA --- */

    /* 1. Posicionamiento (IDÉNTICO a .profile-logout-btn) */
    position: absolute;
    right: clamp(20px, 8vw, 40px);
    /* Misma distancia a la derecha */
    bottom: 0;
    /* Pegado al borde inferior */
    transform: translateY(50%);
    /* "Colgando" la mitad hacia afuera */
    z-index: 2;
    /* Asegura que esté por encima de otros elementos */

    /* 2. Estilo (IDÉNTICO a .profile-logout-btn) */
    display: inline-block;
    /* Ya no ocupa el 100% del ancho */
    width: auto;
    /* Ancho basado en su contenido */
    text-align: center;
    font-weight: 700;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    padding: clamp(6px, 1.5vw, 8px) clamp(14px, 3vw, 18px);
    border-radius: 50px;

    transition: all var(--transition-speed) ease;
}

/* --- Modificadores de color para la píldora --- */

/* Verde: Cupos Disponibles */
.status-disponible {
    background-color: rgba(17, 251, 21, 0.2);
    color: #11fb15;
    border-color: rgba(17, 251, 21, 0.4);
}

/* Naranja: Pocos Cupos */
.status-pocos {
    background-color: rgba(255, 165, 0, 0.2);
    color: #ffd28a;
    border-color: rgba(255, 165, 0, 0.4);
}

/* Rojo: Cupos Agotados */
.status-agotado {
    background-color: rgba(245, 66, 66, 0.2);
    color: #f88a8a;
    border-color: rgba(245, 66, 66, 0.4);
}

/* Contenedor para centrar el botón de reservar */
.inicio-reserva {
    text-align: center;
    margin-top: 20px;
}

/* El nuevo botón de RESERVAR (VISTOSO) */
.btn-reservar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
    gap: 10px;
    /* Reducido de 12px */

    background-color: #ffd60a;
    color: #1a1a1a;
    font-size: clamp(1rem, 2.8vw, 1.15rem);
    /* Reducido */
    font-weight: 700;
    text-decoration: none;
    border: none;

    padding: 12px 30px;
    /* Reducido de 15px 35px */
    border-radius: var(--border-radius);

    cursor: pointer;
    transition: all var(--transition-speed) ease;

    box-shadow: 0 5px 15px rgba(255, 214, 10, 0.2),
        0 2px 5px rgba(0, 0, 0, 0.3);
}

.btn-reservar-cta svg {
    width: 20px;
    /* Reducido de 24px */
    height: 20px;
    /* Reducido de 24px */
    fill: #1a1a1a;
}

.btn-reservar-cta:hover {
    background-color: #ffe04b;
    transform: translateY(-3px);
    /* Efecto de levantar */
    box-shadow: 0 8px 25px rgba(255, 214, 10, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Cuando el evento está AGOTADO, desactivamos el botón */
.btn-reservar-cta:disabled {
    background-color: rgba(80, 80, 80, 0.5);
    color: #aaaaaa;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-reservar-cta:disabled svg {
    fill: #aaaaaa;
}










/* ============================================================= */
/* 4.4. ESTILOS PARA EL FORMULARIO DE RESERVA (FASE 4) - V5      */
/* ============================================================= */






.lista-personas {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
    /* ✅ SOLUCIÓN CORREGIDA: Usamos margin en lugar de padding */
    margin-left: clamp(20px, 4vw, 30px);
    margin-right: clamp(20px, 4vw, 30px);
}

/* 3. Fila individual de persona (SIN BURBUJA) (Sin cambios) */
.persona-item {
    display: flex;
    align-items: center;
    gap: 10px;
}



/* 4. Contenedor de los inputs (Nombre, Apellido) (Sin cambios) */
.persona-inputs {
    display: flex;
    flex: 1;
    gap: 10px;
    width: 0;
}

.controles-agregar-persona {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-left: clamp(20px, 4vw, 30px);
    margin-right: clamp(20px, 4vw, 30px);
}


/* ============================================================= */
/* IMPUT RESERVA ACTIVA PERO PUEDE AÑADIR OTRA PERSONA      */
/* ============================================================= */


/* 5. Estilo de los inputs (Sin cambios) */
.persona-inputs input[type="text"] {
    width: 100%;
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: var(--border-radius);
    padding: 12px 20px;
    color: var(--text-accent);
    font-size: clamp(0.70rem, 2vw, 1rem);
    transition: all var(--transition-speed) ease;
}

.persona-inputs input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.persona-inputs input[type="text"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(122, 182, 123, 0.3);
    border-color: var(--text-accent);
}



.btn-icon.btn-borrar:hover svg {
    stroke: #ffacac;
}


/* 7.b. Estilo específico del botón EDITAR (Circular) */
.btn-icon.btn-editar {
    /* Mismo tamaño y forma que .btn-borrar */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;

    /* Colores neutros (estilo glass "blanco") */
    background: #c6cacf;
    /* rgba(255, 255, 255, 0.1) */
    border: 1px solid var(--glass-input-border);
    /* rgba(255, 255, 255, 0.2) */

    /* Aseguramos que el SVG use el color de texto primario */
    color: var(--text-primary);
    transition: all var(--transition-speed) ease;
}

/* Estilo del SVG dentro del botón de editar */
.btn-icon.btn-editar svg {
    stroke: #000000;
    /* Color del lápiz */
    transition: stroke var(--transition-speed) ease;
}

/* Efecto Hover para el botón de editar */
.btn-icon.btn-editar:hover {
    background: rgba(255, 255, 255, 0.2);
    /* Fondo más claro */
    border-color: var(--text-accent);
    /* Borde acentuado */
    transform: scale(1.1);
    /* Mismo zoom que .btn-borrar */
}

.btn-icon.btn-editar:hover svg {
    stroke: var(--text-accent);
    /* Lápiz en color acentuado */
}














/* ============================================================= */
/* 9. FORMULARIO AGREGAR RÁPIDO (FASE 5 - RESERVA ACTIVA)       */
/* ============================================================= */

/* 1. El <form> se comporta como un "hijo flexible" de su padre
   (.controles-agregar-persona). Crece (flex: 1) y puede 
   encogerse (min-width: 0) para evitar overflow. */
.form-agregar-rapido {
    display: flex !important;
    flex-direction: row !important;
    /* Asegura que sea horizontal */
    align-items: right !important;
    /* Centra verticalmente */
    gap: 20px !important;
    margin-top: 25px;

}

/* 2. El <div> que contiene los inputs
   (Traducción de 'nuclear code' B3) */
.form-agregar-rapido__inputs {
    flex: 1 1 auto;
    /* Crece y encógete */
    width: auto;
    /* Ancho automático */

    /* Y también es un "padre flexible" para los inputs */
    display: flex;
    gap: 10px;

    /* ¡¡LA LÍNEA QUE FALTABA!! */
    /* Le decimos a ESTE div que también puede encogerse a cero,
       para que sus hijos (los inputs) no lo desborden. */
    min-width: 0;
}

/* 3. Estilo de los <input> dentro del div
   (Traducción del estilo base de .persona-inputs input) */
.form-agregar-rapido__inputs input[type="text"] {
    width: 100%;
    /* El estilo base, que ahora funcionará */

    /* Estilos visuales copiados */
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: var(--border-radius);
    padding: 12px 20px;
    color: var(--text-accent);
    font-size: 1rem;
    transition: all var(--transition-speed) ease;
}

.form-agregar-rapido__inputs input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-agregar-rapido__inputs input[type="text"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(122, 182, 123, 0.3);
    border-color: var(--text-accent);
}

/* 4. Estilo del botón "Agregar"
   (Traducción de 'nuclear code' B4) */
.form-agregar-rapido__boton {
    flex: 0 0 auto;
    /* NO crezcas, NO te encojas */

    /* Estilos visuales copiados */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: clamp(12px, 3vw, 15px) clamp(10px, 4vw, 25px);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    gap: 10px;
    border: none !important;
    background: #FFEB3B !important;
    color: #333 !important;
}

.form-agregar-rapido__boton:hover {
    background: #FFF176 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 235, 59, 0.3);
}

.form-agregar-rapido__boton svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #333;
}












/* ========================================================================== */
/* BOTONES  EN DESKTOP - FORMULARIO RESERVA                     */
/* ========================================================================== */




/* Eliminar bordes de botones principales */
.btn,
.btn-primary,
.btn-outline,
.btn-reservar-cta,
.btn-icon,
.admin-btn,
.admin-pill-btn,
.profile-admin-btn,
.profile-logout-btn {
    border: none !important;
}


.btn-outline {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-accent) !important;
}


/* Botón Agregar Persona - Amarillo Pastel */
.btn-outline#btn-agregar-persona,
.btn-outline#btn-agregar-persona-activa {
    background: #FFEB3B !important;
    /* Amarillo pastel */
    color: #333 !important;
}

.btn-outline#btn-agregar-persona:hover {
    background: #FFF176 !important;
    /* Amarillo pastel más claro al hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 235, 59, 0.3);
}


/* Botón Cancelar Reserva - Rojo Pastel */
.btn-outline#btn-cancelar-reserva {
    background: #df3434 !important;
    /* Rojo pastel */
    color: #fbf7f7 !important;
}

.btn-outline#btn-cancelar-reserva:hover {
    background: #E57373 !important;
    /* Rojo pastel más intenso al hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 154, 154, 0.3);
}








/* 6. Estilos del botón de icono (Base) (Sin cambios) */
.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 7. Estilo específico del botón BORRAR (Circular) (Sin cambios) */
.btn-icon.btn-borrar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(245, 66, 66, 0.2);
    border: 1px solid rgba(245, 66, 66, 0.4);
}

/* 8. Estilo del SVG dentro del botón (Sin cambios) */
.btn-icon.btn-borrar svg {
    stroke: #f88a8a;
    transition: stroke var(--transition-speed) ease;
}

/* 9. Efecto Hover para el botón de borrar (Sin cambios) */
.btn-icon.btn-borrar:hover {
    background: rgba(245, 66, 66, 0.4);
    border-color: #f88a8a;
    transform: scale(1.1);
}

.btn-icon.btn-borrar:hover svg {
    stroke: #ffacac;
}



.controles-reserva {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    /* ✅ SOLUCIÓN CORREGIDA: Usamos margin en lugar de padding */
    margin-left: clamp(20px, 4vw, 30px);
    margin-right: clamp(20px, 4vw, 30px);
    margin-bottom: clamp(20px, 4vw, 30px);
}

.reserva-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    width: 100%;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    gap: 10px;
    /* <-- ¡AÑADE ESTA LÍNEA! */
}

/* 11.b. Estilos para SVGs dentro de botones */
.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* Evita que el icono se encoja */
    /* El color se hereda automáticamente (currentColor) */
}

.btn-primary {
    background: #3f90f499;
    color: #dadada;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    border-color: #0bfa0f99;
}

.btn-primary:hover {
    background: #358e37;
    box-shadow: 0 0 20px rgba(46, 230, 51, 0.7);
}

.btn-primary:disabled {
    background-color: rgba(80, 80, 80, 0.5);
    color: #aaaaaa;
    text-shadow: none;
    box-shadow: none;
    border-color: transparent;
    cursor: not-allowed;
}

.btn-outline {
    background: transparent;
    border-color: var(--glass-input-border);
    color: var(--text-primary);
}


/* 12. Responsividad (Sin cambios, mantiene el V4) */
@media (max-width: 600px) {
    .persona-item {
        gap: 10px;
    }

    .persona-inputs {
        flex-grow: 1;
    }


}







/* ========================================================================== */
/* BOTON CANCELAR SIEMPRE ABAJO EN DESKTOP - FORMULARIO RESERVA FIXED               */
/* ========================================================================== */

@media (min-width: 768px) {
    .bento-card.form-card.evento-activo {
        position: relative;
        min-height: 600px;
    }

    #form-reserva {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .controles-reserva {
        position: absolute;
        bottom: 30px;
        left: 30px;
        right: 30px;
        margin-top: 0;
    }
}





















/* ============================================================= */
/* 5. ESTILOS DE LA TARJETA QR (NUEVO)                          */
/* ============================================================= */

/* --- 5.1. Estado: Placeholder (No hay QR) --- */
.qr-placeholder {
    /* Centramos el contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* Margen superior para separarlo del H2 */
    margin-top: 20px;
    min-height: 150px;
    /* Altura mínima en móvil */
}

/* Reutilizamos los estilos del icono que ya definimos */
.qr-placeholder .placeholder-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-input-bg);
    border-radius: 50%;
    border: 1px solid var(--glass-input-border);
    margin-bottom: 25px;
}

.qr-placeholder .placeholder-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--text-primary);
    opacity: 0.6;
}

.qr-placeholder p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: #c5c5c5;
    /* Mismo color de párrafo secundario */
    font-style: italic;
    line-height: 1.6;
    max-width: 350px;
    margin: 0;
    /* Reseteamos margen */
}










/* ============================================
   ESTILOS PARA QR CODE EN DASHBOARD
   Agregar al final de styles.css
   ============================================ */

.qr-container {
    text-align: center;
    padding: 0.4rem;
}

.qr-titulo {
    font-size: clamp(0.40rem, 2vw, 0.90rem);
    font-weight: 600;
    color: #dabc5f;
    margin-bottom: 0.2rem;
}

.qr-code-display {
    display: inline-block;
    padding: 1rem;
    background: white;
    border-radius: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

/* Ajustar el tamaño del QR generado por la librería */
.qr-code-display canvas,
.qr-code-display img {
    display: block;
    margin: 0 auto;
    border-radius: 8px;

    /* --- LÍNEAS AÑADIDAS --- */
    max-width: 100%;
    height: auto;
    /* ------------------------ */
}

.qr-info-details {
    margin-top: 1rem;
}


.qr-instruccion {
    font-size: clamp(0.60rem, 2vw, 0.80rem);
    color: #666;
    font-style: italic;
}



/* ============================================
   ESTILOS PARA PLACEHOLDER (cuando no hay QR)
   Ya existentes - verificar que estén presentes
   ============================================ */

.qr-placeholder {
    text-align: center;
    padding: 2rem 1rem;
    color: #666;
}

.qr-placeholder .placeholder-icon {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.qr-placeholder .placeholder-icon svg {
    width: 64px;
    height: 64px;
}

.qr-placeholder p {
    font-size: 0.95rem;
    line-height: 1.5;
}












/* ========================================================================== */
/* 3. ESTILOS DEL PANEL DE ADMINISTRACIÓN (BENTO)                             */
/* ========================================================================== */





/* --- 5.2. Estilos para Navegación Rápida en Admin Layout --- */
.admin-nav-group {
    display: flex;
    flex-direction: column;
    /* Botones apilados */
    gap: 15px;
    /* Espacio entre botones */
    margin-top: 0;
    /* Sin margen superior */
}

/* Estilo base para los nuevos botones de navegación */
.admin-nav-btn {
    display: inline-flex;
    /* Cambiado a inline-flex para alinear el icono */
    align-items: center;
    /* Centra el icono y el texto verticalmente */
    justify-content: center;
    /* Centra el contenido (para que el texto esté centrado) */
    gap: 10px;
    /* Espacio entre icono y texto */

    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 13px 20px;
    border-radius: 50px;
    transition: all var(--transition-speed) ease;
}

.admin-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Color Primario (Azul) - copiado de admin-primary */
.admin-nav-btn.nav-primary {
    background: var(--color-home, rgba(66, 135, 245, 0.3));
    color: #8ab4f8;
}

.admin-nav-btn.nav-primary:hover {
    background: rgba(66, 135, 245, 0.5);
    box-shadow: 0 0 20px rgba(66, 135, 245, 0.4);
}

/* Color Success (Verde) - copiado de admin-success */
.admin-nav-btn.nav-success {
    background: var(--color-primary, rgba(122, 182, 123, 0.3));
    color: var(--text-accent, #7ab67b);
}

.admin-nav-btn.nav-success:hover {
    background: rgba(122, 182, 123, 0.5);
    box-shadow: 0 0 20px rgba(122, 182, 123, 0.4);
}



/* Color Sysadmin (Rojo) - copiado de admin-sysadmin */
.admin-nav-btn.nav-sysadmin {
    background: rgba(245, 66, 66, 0.3);
    color: #f88a8a;
}

.admin-nav-btn.nav-sysadmin:hover {
    background: rgba(245, 66, 66, 0.5);
    box-shadow: 0 0 20px rgba(245, 66, 66, 0.4);
}



/* 10. GRID DE BOTONES EN PERFIL ADMIN     */
/* ======================================= */
.profile-admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* 4 columnas */
    gap: 8px;
    /* Espacio más pequeño para que quepan */
    margin-top: 20px;
}

/* Estilo para los 4 botones nuevos */
.admin-pill-btn {
    display: inline-block;
    text-decoration: none;
    font-style: italic;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    font-weight: bold;
    text-align: center;

    /* Padding horizontal ajustado para que quepan 4 */
    padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 14px);
    border-radius: 50px;

    /* Color base eliminado (se define por clase) */

    transition: all var(--transition-speed) ease;
}

/* Hover genérico (sin color) */
.admin-pill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- Colores Específicos de Píldoras --- */

/* 1. Crear (Verde) */
/* 1. Crear (Verde Fosfo) */
.admin-pill-btn.btn-crear {
    /* Usamos tu color "fosfo" directamente */
    background: rgba(17, 251, 21, 0.3);

    /* Un color de texto "fosfo" que combine */
    color: #11fb15;
}

.admin-pill-btn.btn-crear:hover {
    /* Usamos el "fosfo" más intenso en el hover */
    background: rgba(17, 251, 21, 0.5);
}

/* 2. Eventos (Azul) */
.admin-pill-btn.btn-eventos {
    background: var(--color-home, rgba(66, 135, 245, 0.3));
    color: var(--text-home, #8ab4f8);
}

.admin-pill-btn.btn-eventos:hover {
    background: rgba(66, 135, 245, 0.5);
}

/* 3. Usuarios (Naranja) */
.admin-pill-btn.btn-usuarios {
    background: var(--color-register, rgba(255, 165, 0, 0.3));
    color: var(--color-register-hover, #ffd28a);
}

.admin-pill-btn.btn-usuarios:hover {
    background: rgba(255, 165, 0, 0.5);
}

/* 4. Checkin (Negro Carbón) */
.admin-pill-btn.btn-checkin {
    background: rgba(0, 0, 0, 0.4);
    color: #999;
}

.admin-pill-btn.btn-checkin:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #ccc;
}



/* 1. La tarjeta de acciones (la de la derecha, grande) */
.admin-actions-card {
    text-align: left;
    /* Alineamos el texto a la izquierda */
}

.admin-actions-card h1 {
    color: var(--color-register-hover, #ffd28a);
    /* Tono naranja/ámbar */
    margin-bottom: 10px;
    font-size: clamp(1.6rem, 4vw, 2rem);
}

.admin-actions-card p {
    font-size: 1rem;
    color: #c5c5c5;
    margin-bottom: 25px;
}

/* 2. Contenedor de botones de admin */
.admin-button-group {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    /* Botones apilados */
    gap: 15px;
    /* Espacio entre botones */
}

/* 3. Estilo base para los nuevos botones de admin (tipo píldora) */
.admin-btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 13px 20px;
    /* Botones más grandes */
    border-radius: 50px;
    /* Forma de píldora */
    transition: all var(--transition-speed) ease;
}

.admin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 4. Colores específicos de los botones */

/* Sysadmin (Rojo) */
.admin-btn.admin-sysadmin {
    background: rgba(245, 66, 66, 0.3);
    color: #f88a8a;
}

.admin-btn.admin-sysadmin:hover {
    background: rgba(245, 66, 66, 0.5);
    box-shadow: 0 0 20px rgba(245, 66, 66, 0.4);
}

/* Primary (Azul) */
.admin-btn.admin-primary {
    background: var(--color-home, rgba(66, 135, 245, 0.3));
    color: #8ab4f8;
}

.admin-btn.admin-primary:hover {
    background: rgba(66, 135, 245, 0.5);
    box-shadow: 0 0 20px rgba(66, 135, 245, 0.4);
}

/* Success (Verde) */
.admin-btn.admin-success {
    background: var(--color-primary, rgba(122, 182, 123, 0.3));
    color: var(--text-accent, #7ab67b);
}

.admin-btn.admin-success:hover {
    background: rgba(122, 182, 123, 0.5);
    box-shadow: 0 0 20px rgba(122, 182, 123, 0.4);
}


/* Estilos para el dashboard de evento activo */
.evento-activo-card {
    text-align: center;
    /* 1. APILAMOS LOS FONDOS
      Capa 1 (superior): Un gradiente lineal con tu color de cristal.
      Capa 2 (inferior): La URL de tu imagen.
    */
    background:
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        url('/static/IMAGES/senna_bento.webp');

    /* 2. REGLAS PARA LA IMAGEN (Responsividad)
      'cover' hace que la imagen siempre rellene el 'box', 
      recortándose si es necesario pero manteniendo la proporción.
    */
    background-size: cover;

    /* 'center' asegura que la imagen esté centrada en el 'box' */
    background-position: center center;

    /* Evita que la imagen se repita si es más pequeña que el 'box' */
    background-repeat: no-repeat;

    /* Esta regla ya la tenías y la mantenemos */
    text-align: center;

}





.evento-info h2 {
    color: var(--text-accent);
    margin-bottom: 40px;
    margin-top: 1rem;
}

.evento-ubicacion,
.evento-fecha {
    color: var(--text-secondary);
    margin: 5px 0;
}

.estado-abierto {
    color: #4CAF50;
    font-weight: bold;
}

.estado-programado {
    color: #FF9800;
    font-weight: bold;
}

.estado-cerrado {
    color: #f44336;
    font-weight: bold;
}

.reservas-progress {
    margin: 25px 0;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.progress-bar {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}




/* Botones de acción */
.evento-actions {
    /* <-- CORREGIDO */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* Botones específicos para gestión de eventos (CORREGIDOS) */
.evento-actions .btn {
    /* <-- CORREGIDO */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
    border: none;
    cursor: pointer;
}

.evento-actions .btn:hover {
    /* <-- CORREGIDO */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Verde: Abrir Reservas */
.evento-actions .btn-success {
    /* <-- CORREGIDO */
    background: rgba(17, 251, 21, 0.3);
    color: #11fb15;
}

.evento-actions .btn-success:hover {
    /* <-- CORREGIDO */
    background: rgba(17, 251, 21, 0.5);
    box-shadow: 0 0 20px rgba(17, 251, 21, 0.4);
}

/* Naranja: Cerrar Reservas */
.evento-actions .btn-warning {
    /* <-- CORREGIDO */
    background: rgba(255, 165, 0, 0.3);
    color: var(--color-register-hover, #ffd28a);
}

.evento-actions .btn-warning:hover {
    /* <-- CORREGIDO */
    background: rgba(255, 165, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

/* Azul: Activar Check-in */
.evento-actions .btn-info {
    /* <-- CORREGIDO */
    background: rgba(66, 135, 245, 0.3);
    color: #8ab4f8;
}

.evento-actions .btn-info:hover {
    /* <-- CORREGIDO */
    background: rgba(66, 135, 245, 0.5);
    box-shadow: 0 0 20px rgba(66, 135, 245, 0.4);
}

/* Gris: Finalizar / Archivar */
.evento-actions .btn-secondary {
    /* <-- CORREGIDO */
    background: rgba(128, 128, 128, 0.3);
    color: #cccccc;
}

.evento-actions .btn-secondary:hover {
    /* <-- CORREGIDO */
    background: rgba(128, 128, 128, 0.5);
    box-shadow: 0 0 20px rgba(128, 128, 128, 0.4);
}

/* Rojo: Eliminar */
.evento-actions .btn-danger {
    /* <-- CORREGIDO */
    background: rgba(245, 66, 66, 0.3);
    color: #f88a8a;
}

.evento-actions .btn-danger:hover {
    /* <-- CORREGIDO */
    background: rgba(245, 66, 66, 0.5);
    box-shadow: 0 0 20px rgba(245, 66, 66, 0.4);
}




























/* ========================================================================== */
/* AQUI ESTAS TRABAJANDO  */
/* ========================================================================== */




/* Estilo para el icono SVG del evento activo */
.evento-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: var(--text-accent);
    /* Heredará el color del texto del h1 */
}

.evento-activo-card h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 10px;
}






/* Estilo para el icono SVG de ubicación */
.ubicacion-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: var(--text-secondary);
    /* Heredará el color del texto secundario */
}

.evento-ubicacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}




/* Estilo para el icono SVG de fecha */
.fecha-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    color: var(--text-secondary);
    /* Heredará el color del texto secundario */
}

.evento-fecha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}





/* Estilo para la flecha SVG del estado */
.estado-arrow {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px;
    color: var(--text-secondary);
    /* Color gris para la flecha */
}

.evento-estado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}









@media (max-width: 600px) {
    .evento-actions {
        flex-direction: column;
    }
}


@media (max-width: 767px) {
    .admin-actions-card {
        order: 2;
        /* Perfil es 1, esta es 2, y QR/Stats es 3 */
    }
}





/* ========================================================================== */
/* ESTILOS ESPECÍFICOS PARA PÁGINAS DE ADMINISTRACIÓN */
/* ========================================================================== */



/* En mobile: orden específico para páginas admin */
@media (max-width: 767px) {
    .profile-card {
        order: 1;
    }

    .admin-actions-card,
    .evento-activo-card,
    .form-card,
    .event-management-card,
    .user-list-card {
        order: 2;
    }

    .qr-card {
        order: 3;
    }
}





/* ============== ESTADO NO HAY EVENTO EN DASHBOARD DE ADMINISTRACION======================================== */




.evento-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    height: 100%;
    min-height: 250px;
    box-sizing: border-box;
}

.evento-placeholder .placeholder-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-input-bg);
    border-radius: 50%;
    border: 1px solid var(--glass-input-border);
    margin-bottom: 25px;
}

.evento-placeholder .placeholder-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--text-primary);
    opacity: 0.6;
}

.evento-placeholder h2 {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    color: var(--text-accent);
    margin: 0 0 10px 0;
}

.evento-placeholder p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: #c5c5c5;
    font-style: italic;
    line-height: 1.6;
    max-width: 350px;
    margin: 0 0 25px 0;
}


















/* ========================================================================== */
/* 6. PÁGINA CREAR EVENTO (FORMULARIO ADMIN)                                  */
/* ========================================================================== */

/* Tarjeta de cristal para el formulario (Sin cambios) */
.form-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: clamp(10px, 5vw, 40px);
    width: 100%;
    max-width: 700px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}


/* ========================================================================== */
/* AJUSTES PARA admin_crear_evento.html - Burbuja de Encabezado */
/* ========================================================================== */

.form-header-box {
    /* Fondo de cristal similar al de los inputs, más sutil que el form-card */
    background: var(--glass-input-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Borde sutil */
    border-radius: 30px;

    /* Espacio interno para el contenido */
    padding: clamp(10px, 4vw, 15px);

    /* Centra el texto de este contenedor (el párrafo) */
    text-align: center;
    /* <--- ¡ESTE ES EL ARREGLO! */

    /* Margen: Lo separamos de la parte superior del .form-card y del <form> */
    margin: 0 0 30px 0;
}

/* 1. Ajustar el h1 dentro de la burbuja (Se mantienen los estilos flexibles) */
.form-header-box h1 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    font-size: clamp(0.75rem, 2vw, 1rem);
}

/* 2. Ajustar el párrafo dentro de la burbuja */
.form-header-box p {
    /* Eliminamos las reglas de margen de antes */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-style: italic !important;
    font-size: clamp(0.45rem, 2vw, 0.60rem);

}

/* Regla obsoleta eliminada: .form-card > p */








/* --- 1. TITULO H1 CON ICONO Y ESTILO MODERNO --- */
.form-card h1 {
    /* Sobrescribir el color y añadir sombra para hacerlo más moderno */
    color: var(--text-accent, #ffffffeb);
    text-shadow: 0 0 10px rgba(177, 206, 239, 0.5);
    text-transform: uppercase;
    letter-spacing: 4px;

    /* REAJUSTES DE ALINEACIÓN SIN ICONO: */
    text-align: center;
    /* Vuelve a centrar el texto */
    display: block;
    /* Elimina el comportamiento flex */
    gap: 0;
    /* Elimina el espacio que había para el icono */

    margin-bottom: 5px;
    /* Reducimos el margen, ya que el párrafo lo maneja */
}

/* Nota: Para añadir el SVG exacto sin tocar el HTML, se requiere encodearlo
   y usar content: url(...). Usaremos el pseudo-elemento para insertar el icono
   de 'usuario/admin' que pediste. */


.form-card>p {
    font-style: italic;
    /* <-- Tu petición de cursiva */
    font-size: clamp(0.5rem, 2.5vw, 1rem);
    /* <-- Tu petición de texto pequeño */
    color: #c5c5c5;
    /* Un color grisáceo para que sea secundario */
    text-align: center;
    /* Lo centramos igual que el título */
    margin-top: 15px;
    /* Sube el párrafo para que esté más cerca del H1 */
    margin-bottom: 30px;
    /* Le da espacio antes de que comience el formulario */
}





.form-card form {
    display: flex;
    flex-direction: column;
}

/* ======================================== */
/* --- ¡ESTOS SON LOS ESTILOS QUE FALTABAN PARA LOS INPUTS! --- */
/* ======================================== */

.glass-input {
    width: 100%;
    padding: 12px 20px;
    background: var(--glass-input-bg);
    /* Fondo de cristal */
    border: 1px solid var(--glass-input-border);
    /* Borde sutil */
    border-radius: var(--border-radius);
    /* Esquinas redondeadas */
    color: var(--text-accent);
    /* Color del texto (verde) */
    font-size: 1rem;
    transition: all var(--transition-speed) ease;
}

/* Estilo para el texto de ejemplo (placeholder) */
.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Efecto al hacer clic (focus) */
.glass-input:focus {
    outline: none;
    /* Quitamos el borde azul por defecto */
    background: rgba(255, 255, 255, 0.15);
    /* Un poco más claro */
    box-shadow: 0 0 15px rgba(122, 182, 123, 0.3);
    /* Brillo verde */
    border-color: var(--text-accent);
    /* Borde verde */
}

.form-group {
    /* 1. Convertimos el grupo en una cuadrícula (grid) */
    display: grid;
    /* 2. Definimos dos columnas: 1fr para la etiqueta, 2.5fr para el input */
    grid-template-columns: 1fr 2.5fr;
    align-items: center;
    /* Centra la etiqueta verticalmente con el input */
    gap: 15px;
    /* Espacio entre etiqueta e input */
    margin-bottom: 20px;
    /* Un poco más de espacio entre filas */
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
    /* 3. Alineamos la etiqueta a la derecha, para que quede pegada al input */
    text-align: right;
    margin-bottom: 0;
    /* Quitamos el margen inferior que tenía */
    transition: color 0.3s ease;
}

/* Pequeño efecto interactivo */
.form-group:focus-within label {
    color: var(--text-accent);
    /* Resalta la etiqueta cuando el input está activo */
}

/* Estilo para inputs de fecha/hora (Sin cambios, lo mantenemos) */
.glass-input[type="datetime-local"] {
    color-scheme: dark;
}

/* Contenedor para los botones al final (Sin cambios) */
.form-button-group {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}



/* --- 2. ESTILO PARA EL BOTÓN CANCELAR (sin .btn-primary) --- */
.form-button-group .btn:not(.btn-primary) {
    /* CAMBIOS PARA EL ROJO BASE: Usamos un rojo semitransparente oscuro */
    background: rgba(185, 45, 45, 0.7) !important;
    /* Rojo oscuro semi-transparente */
    color: #f88a8a !important;
    /* El color de texto rojo claro que usas en alerts */
    /* Borde rojo sutil */
    text-shadow: none !important;
}

.form-button-group .btn:not(.btn-primary):hover {
    /* CAMBIOS PARA EL ROJO EN HOVER: Hacemos el color más sólido y claro */
    background: rgba(220, 60, 60, 0.9) !important;
    /* Rojo más intenso al hacer hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 66, 66, 0.5);
    /* Sombra roja */
    color: #fff !important;
    /* Texto blanco en hover para contraste */
}


/* --- RESPONSIVIDAD --- */
/* Esto es crucial para que se vea bien en móviles */

@media (max-width: 600px) {
    .form-group {
        /* 1. En pantallas pequeñas, volvemos a una sola columna */
        grid-template-columns: 1fr;
        gap: 8px;
        /* Espacio más pequeño */
    }

    .form-group label {
        /* 2. Devolvemos la etiqueta a la alineación izquierda */
        text-align: left;
    }

    .form-button-group {
        /* Los botones también se apilan */
        flex-direction: column-reverse;
        /* "Crear" queda arriba */
    }

    .form-button-group .btn,
    .form-button-group button {
        width: 100%;
        box-sizing: border-box;
        /* Asegura que el padding no rompa el ancho */
    }
}

























/* ========================================================================== */
/* 7. PÁGINA GESTIÓN DE EVENTOS                 (admin)                              */
/* ========================================================================== */


/* Tarjeta principal de gestión de eventos */
.event-management-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: clamp(30px, 5vw, 40px);
    width: 100%;
    max-width: 900px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Título principal */
.event-management-card h1 {
    color: var(--text-accent);
    font-size: clamp(0.6rem, 4vw, 1.5rem);
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Icono del título */
.event-management-card h1 svg {
    width: 28px;
    height: 28px;
    color: var(--text-accent);
}

/* Separador */
.event-management-card hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0));
    margin: 30px 0;
}

/* Tarjeta individual de evento */
.event-management-item {
    background: rgba(181, 180, 180, 0.185);
    backdrop-filter: blur(8px);
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 20px;
    transition: all var(--transition-speed) ease;
}

.event-management-item:hover {
    background: rgba(50, 50, 50, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Información del evento */
.event-management-item h3 {
    color: var(--text-accent);
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Contenedor de detalles del evento */
.event-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* Ítems de detalle */
.event-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.event-detail-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Estados del evento - NUEVOS ESTILOS */
.event-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 10px;
}

.status-programado-new {
    background: rgba(255, 165, 0, 0.2);
    color: var(--color-register-hover, #ffd28a);
    border: 1px solid rgba(255, 165, 0, 0.4);
}

.status-abierto-new {
    background: rgba(122, 182, 123, 0.2);
    color: var(--text-accent, #7ab67b);
    border: 1px solid rgba(122, 182, 123, 0.4);
}

.status-cerrado-new {
    background: rgba(245, 66, 66, 0.2);
    color: #f88a8a;
    border: 1px solid rgba(245, 66, 66, 0.4);
}

.status-checkin-new {
    background: rgba(66, 135, 245, 0.2);
    color: #8ab4f8;
    border: 1px solid rgba(66, 135, 245, 0.4);
}

.status-finalizado-new {
    background: rgba(128, 128, 128, 0.2);
    color: #9e9e9e;
    border: 1px solid rgba(128, 128, 128, 0.4);
}







/* Botones de acción */
.event-management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* Botones específicos para gestión de eventos */
.btn-event-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--transition-speed) ease;
    border: none;
    cursor: pointer;
}

.btn-event-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-event-success {
    background: rgba(17, 251, 21, 0.3);
    color: #11fb15;
}

.btn-event-success:hover {
    background: rgba(17, 251, 21, 0.5);
    box-shadow: 0 0 20px rgba(17, 251, 21, 0.4);
}

.btn-event-warning {
    background: rgba(255, 165, 0, 0.3);
    color: var(--color-register-hover, #ffd28a);
}

.btn-event-warning:hover {
    background: rgba(255, 165, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
}

.btn-event-info {
    background: rgba(66, 135, 245, 0.3);
    color: #8ab4f8;
}

.btn-event-info:hover {
    background: rgba(66, 135, 245, 0.5);
    box-shadow: 0 0 20px rgba(66, 135, 245, 0.4);
}

.btn-event-secondary {
    background: rgba(128, 128, 128, 0.3);
    color: #cccccc;
}

.btn-event-secondary:hover {
    background: rgba(128, 128, 128, 0.5);
    box-shadow: 0 0 20px rgba(128, 128, 128, 0.4);
}

.btn-event-danger {
    background: rgba(245, 66, 66, 0.3);
    color: #f88a8a;
}

.btn-event-danger:hover {
    background: rgba(245, 66, 66, 0.5);
    box-shadow: 0 0 20px rgba(245, 66, 66, 0.4);
}





/* Botón volver al final */
.event-management-card>.btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 25px;
    background: var(--glass-bg-hover, rgba(45, 45, 45, 0.7));
    color: var(--text-primary);
}

/* Mensaje cuando no hay eventos */
.event-management-card>p {
    text-align: center;
    margin-top: 30px;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-style: italic;
}

.status-archivado {
    color: #9e9e9e;
    /* Gris */
    font-weight: bold;
}

.status-archivado {
    color: #9e9e9e;
    /* Gris */
    font-weight: bold;
}















/* ========================================================================== */
/* 9. PÁGINA DETALLE DE EVENTO (ADMIN) - v2 (Compacto)                      */
/* ========================================================================== */

/* 1. Layout principal de la tarjeta (Sin cambios) */
@media (min-width: 768px) {
    .event-details-card {
        grid-area: form;
        grid-row: span 2;
        align-self: stretch;
        min-height: 600px;
        height: auto;
    }
}

/* 2. Contenedor de información resumida (Flexbox) */
.info-resumida {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Alinea las píldoras verticalmente */
    gap: 5px;
    /* Espacio entre píldoras */
    margin: 20px 0;
}

/* 3. Píldora de "Grupos Registrados" (AJUSTADA) */
/* Ahora se ve como una píldora, igual que el estado */
.info-item {
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: 20px;
    /* Misma forma de píldora que el estado */
    padding: 6px 12px;
    /* Mismo padding que el estado */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Espacio entre "Grupos:" y el número */
    flex: 0 1 auto;
    /* No crece, solo ocupa su contenido */
}

/* Texto "Grupos Registrados:" (AJUSTADO) */
.info-item strong {
    font-size: 0.85rem;
    /* Mismo tamaño que el estado */
    font-weight: 700;
    color: var(--text-primary);
    opacity: 0.8;
    margin-bottom: 0;
    /* Sin margen */
}

/* Número de grupos (AJUSTADO) */
.info-item p {
    font-size: 0.85rem;
    /* Mismo tamaño que el estado */
    font-weight: 700;
    color: var(--text-accent);
    /* Color de acento para el número */
    margin: 0;
    /* Sin margen */
}


/* 4. Píldoras de Estado (Perfectas, sin cambios) */
.status-programado,
.status-abierto,
.status-cerrado,
.status-checkin,
.status-finalizado,
.status-archivado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid transparent;
}

.status-programado {
    background: rgba(255, 165, 0, 0.2);
    color: var(--color-register-hover, #ffd28a);
    border-color: rgba(255, 165, 0, 0.4);
}

.status-abierto {
    background: rgba(122, 182, 123, 0.2);
    color: var(--text-accent, #7ab67b);
    border-color: rgba(122, 182, 123, 0.4);
}

.status-cerrado {
    background: rgba(245, 66, 66, 0.2);
    color: #f88a8a;
    border-color: rgba(245, 66, 66, 0.4);
}

.status-checkin {
    background: rgba(66, 135, 245, 0.2);
    color: #8ab4f8;
    border-color: rgba(66, 135, 245, 0.4);
}

.status-finalizado {
    background: rgba(128, 128, 128, 0.2);
    color: #9e9e9e;
    border-color: rgba(128, 128, 128, 0.4);
}

.status-archivado {
    background: rgba(128, 128, 128, 0.2);
    color: #9e9e9e;
    border-color: rgba(128, 128, 128, 0.4);
}


/* 5. Grid de Botones de Acciones (AJUSTADO) */
.action-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* Ancho mínimo reducido */
    gap: 5px;
    /* Espacio reducido */
    margin-top: 15px;
}

/* 6. Botón de Acción individual (TOTALMENTE AJUSTADO) */
/* Ahora es una píldora horizontal compacta */
.btn-action {
    display: inline-flex;
    flex-direction: row;
    /* Horizontal: [Icono] [Texto] */
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Espacio entre icono y texto */

    /* Estilo de píldora compacta (como .admin-pill-btn) */
    padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 14px);
    border-radius: 50px;
    /* Forma de píldora */
    font-weight: bold;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    /* Fuente pequeña con clamp */

    text-decoration: none;
    transition: all var(--transition-speed) ease;
    border: none;
    cursor: pointer;
    background: var(--glass-input-bg);
    color: var(--text-primary);
    min-height: 0;
    /* Eliminamos la altura mínima */
}

.btn-action:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: var(--text-accent);
}

/* Icono dentro del botón (AJUSTADO) */
.btn-action .icon {
    font-size: 1.1em;
    /* Tamaño relativo a la fuente del botón */
    line-height: 1;
    /* Asegura que no añada espacio extra */
}

/* Modificador de peligro (Sin cambios) */
.btn-danger-action {
    background: rgba(245, 66, 66, 0.2);
    color: #f88a8a;
}

.btn-danger-action:hover {
    background: rgba(245, 66, 66, 0.4);
    color: #ffacac;
}

/* 7. Estilo para el separador HR (Reutilizando el estilo principal) */
.event-details-card hr {
    border: none;
    height: 2px;
    margin: 25px 0;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.4),
            rgba(255, 255, 255, 0));
}




/* ========================================== */
/* SECCIÓN DE GRUPOS (Nueva)                */
/* ========================================== */

.grupos-section {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 15px;
    margin: 20px 0;
    min-height: 400px;
    overflow: hidden;
}

/* LISTA DE GRUPOS (Izquierda) */
.grupos-lista {
    display: flex;
    flex-direction: column;
}

.grupos-scroll {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Scrollbar personalizado */
.grupos-scroll::-webkit-scrollbar {
    width: 6px;
}

.grupos-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.grupos-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.grupos-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* PÍLDORA DE GRUPO */
.grupo-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.grupo-pill:hover {
    background: var(--glass-bg-hover);
    border-color: var(--text-accent);
    transform: translateX(5px);
}

.grupo-pill.active {
    background: rgba(122, 182, 123, 0.2);
    border-color: var(--text-accent);
    box-shadow: 0 0 15px rgba(122, 182, 123, 0.3);
}

.grupo-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--glass-input-border);
    flex-shrink: 0;
}

.grupo-pill-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.grupo-email {
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grupo-id {
    font-size: 0.7rem;
    opacity: 0.6;
    font-weight: 500;
}

/* PANEL DE DETALLES (Derecha) */
.grupo-detalle-panel {
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.detalle-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
}

.detalle-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.detalle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.detalle-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.personas-badge {
    background: rgba(122, 182, 123, 0.2);
    color: var(--text-accent);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(122, 182, 123, 0.4);
}

.detalle-usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.detalle-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--text-accent);
}

.detalle-usuario strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.detalle-usuario p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* LISTA DE ASISTENTES */
.asistentes-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asistente-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid var(--text-accent);
}

.asistente-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #f4a33f99;
    color: var(--bg-primary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.asistente-nombre {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.detalle-footer {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}







/* SECCIÓN LISTA DE ASISTENTES */
.lista-section {
    margin: 20px 0;
    background: var(--glass-input-bg);
    border: 1px solid var(--glass-input-border);
    border-radius: 15px;
    padding: 20px;

}

.lista-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.total-badge {
    background: rgba(122, 182, 123, 0.2);
    color: var(--text-accent);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(122, 182, 123, 0.4);
}

.lista-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 8px;
}

.lista-scroll::-webkit-scrollbar {
    width: 6px;
}

.lista-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.lista-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.lista-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ITEM DE ASISTENTE EN LISTA */
.lista-item {
    display: grid;
    grid-template-columns: 50px 80px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border-left: 3px solid var(--text-accent);
    transition: all 0.2s ease;
}

.lista-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.lista-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f4a33f99, #f4a33fcc);
    color: var(--bg-primary);
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.lista-grupo-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lista-grupo-id strong {
    font-size: 0.75rem;
    opacity: 0.6;
    font-weight: 600;
}

.lista-grupo-id span {
    font-size: 0.85rem;
    color: var(--text-accent);
    font-weight: 700;
}

.lista-nombre {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lista-reservado-por {
    display: block;
    font-size: 0.65rem;
    font-style: italic;
    opacity: 0.5;
    font-weight: 400;
    line-height: 1;
    margin-top: 2px;
}



.btn-action.btn-active {
    background: rgba(122, 182, 123, 0.3);
    border-color: var(--text-accent);
    color: var(--text-accent);
}

@media (max-width: 768px) {
    .lista-item {
        grid-template-columns: 45px 70px 1fr;
        gap: 8px;
        padding: 10px;
    }

    .lista-numero {
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }

    .lista-nombre {
        font-size: 0.85rem;
    }
}



/* RESPONSIVE */
@media (max-width: 768px) {
    .grupos-section {
        grid-template-columns: 1fr;
        overflow-x: hidden;
        /* ✅ AGREGA ESTA LÍNEA */
    }

    .grupos-scroll {
        max-height: 250px;
    }

    /* ✅ AGREGA ESTO */
    .grupos-lista {
        max-width: 100%;
    }

    .grupo-pill {
        max-width: 100%;
    }
}

























/* ========================================================================== */
/* 8. PÁGINA PANEL SUPERADMIN (GESTIÓN DE USUARIOS)                       */
/* ========================================================================== */

/* Usamos una tarjeta de lista, similar a la de "Gestión de Eventos" */
.user-list-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: clamp(30px, 5vw, 40px);
    width: 100%;
    max-width: 900px;
    /* Ancha para la lista de usuarios */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.user-list-card h1 {
    color: var(--color-register-hover, #ffd28a);
    /* Tono ámbar/admin */
    text-align: center;
    margin-bottom: 10px;
}

/* Párrafo de descripción debajo del título */
.user-list-card>p {
    font-style: italic;
    font-size: 0.9rem;
    color: #c5c5c5;
    text-align: center;
    margin-top: -5px;
    margin-bottom: 25px;
}

.user-list-card h2 {
    color: var(--text-primary);
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}

/* --- Mensajes Flash --- */
.alert {
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    border: 1px solid;
    font-weight: 500;
}

/* Reemplazamos los nombres de categoría por los de Flask (success, error) */
.alert-success {
    background: rgba(122, 182, 123, 0.2);
    color: var(--text-accent);
    border-color: var(--text-accent);
}

.alert-danger {
    /* Flask usa 'danger' o 'error', cubrimos 'danger' */
    background: rgba(245, 66, 66, 0.2);
    color: #f88a8a;
    border-color: #f88a8a;
}

.alert-warning {
    background: rgba(255, 165, 0, 0.2);
    color: var(--color-register-hover, #ffd28a);
    border-color: var(--color-register-hover, #ffd28a);
}


/* --- Tarjeta individual para CADA usuario --- */
.user-card {
    background: rgba(57, 56, 56, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 15px 0;
}

/* El div que contiene info y acciones */
.user-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Para que en móvil se apilen las acciones */
    gap: 20px;
}

/* Bloque de información (izquierda) */
.user-info strong {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.user-info .email-text {
    /* Email del usuario */
    color: #c5c5c5;
    font-size: 0.9rem;
}

.user-info small {
    /* Fecha de registro */
    display: block;
    color: #c5c5c5;
    line-height: 1.5;
    margin-top: 5px;
}

.user-stats {
    font-size: 0.85rem;
    color: var(--text-accent);
    /* Verde para las stats */
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 8px;
    margin-top: 8px !important;
    display: inline-block;
    /* Para que el fondo no ocupe todo */
}

.user-blocked-status {
    color: #f88a8a;
    /* Rojo */
    font-weight: bold;
    margin-left: 10px;
}

/* --- Insignias de Rol --- */
.role-badge {
    padding: 5px 10px;
    border-radius: var(--border-radius);
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-top: 8px;
    display: inline-block;
}

.role-superadmin {
    background: rgba(245, 66, 66, 0.4);
    color: #f88a8a;
}

.role-admin {
    background: var(--color-register, rgba(255, 165, 0, 0.3));
    color: var(--color-register-hover, #ffd28a);
}

.role-usuario {
    background: rgba(80, 80, 80, 0.5);
    color: #cccccc;
}

/* Bloque de acciones (derecha) */
.user-actions {
    flex-shrink: 0;
    /* Evita que los botones se encojan */
    text-align: right;
}

/* Nuevo modificador de botón pequeño */
.btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
    margin: 0 5px;
}

/* Botón "Volver" (apuntamos al .btn que es hijo directo) */
.user-list-card>.btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    box-sizing: border-box;
    background: var(--glass-bg-hover, rgba(45, 45, 45, 0.7));
    color: var(--text-primary);
}