/* ========================================
   IMPORTAR GOOGLE FONTS Y MATERIAL ICONS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ========================================
   VARIABLES CSS
   ======================================== */
:root {
    /* Color principal */
    --invdig-primary-color: #2563eb;
    --invdig-primary-hover: #1d4ed8;
    
    /* Colores de estado */
    --invdig-confirmado: #10b981;
    --invdig-confirmado-bg: #d4edda;
    --invdig-sin-respuesta: #f59e0b;
    --invdig-sin-respuesta-bg: #fff3cd;
    --invdig-rechazado: #ef4444;
    --invdig-rechazado-bg: #f8d7da;
    
    /* Colores neutrales */
    --invdig-gray-50: #f8fafc;
    --invdig-gray-100: #f1f5f9;
    --invdig-gray-200: #e2e8f0;
    --invdig-gray-300: #cbd5e1;
    --invdig-gray-400: #94a3b8;
    --invdig-gray-500: #64748b;
    --invdig-gray-600: #475569;
    --invdig-gray-700: #334155;
    --invdig-gray-800: #1e293b;
    --invdig-gray-900: #0f172a;
    
    /* Espaciado */
    --invdig-spacing-xs: 0.25rem;
    --invdig-spacing-sm: 0.5rem;
    --invdig-spacing-md: 1rem;
    --invdig-spacing-lg: 1.5rem;
    --invdig-spacing-xl: 2rem;
    --invdig-spacing-2xl: 3rem;
    
    /* Border radius */
    --invdig-radius-sm: 0.375rem;
    --invdig-radius-md: 0.5rem;
    --invdig-radius-lg: 0.75rem;
    --invdig-radius-xl: 1rem;
    
    /* Sombras */
    --invdig-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --invdig-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --invdig-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

html, body{
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--invdig-gray-50);
}


/* ========================================
   ESTILOS BASE DEL PLUGIN (PRESERVADOS)
   ======================================== */
.invdig-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 1em;
    font-family: sans-serif;
}

.invdig-wrapper h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.invdig-wrapper p {
    margin: 0.5em 0;
}

.invdig-wrapper form {
    margin-top: 1em;
}

.invdig-wrapper input[type="text"],
.invdig-wrapper input[type="email"],
.invdig-wrapper input[type="number"],
.invdig-wrapper select {
    width: 100%;
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.invdig-wrapper input[type="submit"],
.invdig-wrapper button {
    background-color: #2271b1;
    color: #fff;
    padding: 0.6em 1.2em;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.invdig-wrapper input[type="submit"]:hover,
.invdig-wrapper button:hover {
    background-color: #135e96;
}

/* ========================================
   LOADING SPINNER (PRESERVADO)
   ======================================== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Loading spinner */
.invdig-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}

.invdig-loading-overlay.show {
    display: flex;
}

.invdig-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ffffff40;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   ICONOS MATERIAL
   ======================================== */
.invdig-icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
}

/* ========================================
   DASHBOARD CLIENTE - CONTENEDOR PRINCIPAL
   ======================================== */
/*.cliente-dashboard-container{
    background-color: var(--invdig-gray-50);
}*/
.invdig-dashboard-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--invdig-gray-50);
    padding: var(--invdig-spacing-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.invdig-nav-secciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.invdig-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.625rem 1.25rem;
    border-radius: var(--invdig-radius-md);
    background-color: var(--invdig-gray-200);
    color: var(--invdig-gray-700);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.invdig-nav-btn:hover {
    background-color: var(--invdig-gray-300);
    color: var(--invdig-gray-700);
}

.invdig-nav-activo {
    background-color: var(--invdig-primary-color);
    color: white;
    cursor: default;
    pointer-events: none;
}

.invdig-nav-activo:hover {
    background-color: var(--invdig-primary-color);
    color: white;
}

/* ========================================
   MENSAJES (MEJORADOS)
   ======================================== */
.invdig-message,
.dashboard-message {
    padding: var(--invdig-spacing-md);
    margin-bottom: var(--invdig-spacing-lg);
    border-radius: var(--invdig-radius-md);
    font-weight: 500;
}

.invdig-message-success,
.dashboard-message.success {
    background-color: var(--invdig-confirmado-bg);
    color: #155724;
    border-left: 4px solid var(--invdig-confirmado);
}

.dashboard-message.error {
    background-color: var(--invdig-rechazado-bg);
    color: #721c24;
    border-left: 4px solid var(--invdig-rechazado);
}

.invdig-no-eventos {
    background: white;
    padding: var(--invdig-spacing-2xl);
    border-radius: var(--invdig-radius-md);
    text-align: center;
    box-shadow: var(--invdig-shadow-md);
}

/* ========================================
   SECCIÓN 1: HEADER
   ======================================== */
.invdig-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--invdig-spacing-lg);
    margin-bottom: var(--invdig-spacing-xl);
    flex-wrap: wrap;
    gap: var(--invdig-spacing-md);
}

.invdig-titulo-principal {
    font-family: inherit;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--invdig-gray-800);
    margin: 0;
}
.invdig-seccion-subtitulo{
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--invdig-gray-600);
    margin: 0;
}

.invdig-selector-evento-wrapper,
.event-selector {
    position: relative;
    display: inline-block;
}

/* Mantener compatibilidad con selector antiguo */
.event-selector {
    background: #f1f1f1;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.event-selector label {
    font-weight: bold;
    color: #333;
}

.invdig-selector-evento,
.event-selector select {
    appearance: none;
    background-color: white;
    border: 1px solid var(--invdig-gray-300);
    border-radius: var(--invdig-radius-md);
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--invdig-gray-700);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 250px;
}

.invdig-selector-evento:hover,
.event-selector select:hover {
    background-color: var(--invdig-gray-50);
    border-color: var(--invdig-gray-400);
}

.invdig-selector-evento:focus,
.event-selector select:focus {
    outline: none;
    border-color: var(--invdig-primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.invdig-selector-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--invdig-gray-700);
    font-family: 'Material Icons';
    font-size: 20px;
}

/* ========================================
   SECCIÓN 2: RESUMEN GENERAL
   ======================================== */
.invdig-resumen-general,
.sect-invdig-dashboard {
    margin-bottom: var(--invdig-spacing-2xl);
}

.invdig-resumen-titulo {
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--invdig-gray-700);
    margin-bottom: var(--invdig-spacing-md);
}

.invdig-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--invdig-spacing-lg);
    margin-bottom: var(--invdig-spacing-md);
}

.invdig-stat-card {
    background: white;
    padding: var(--invdig-spacing-lg);
    border-radius: var(--invdig-radius-xl);
    box-shadow: var(--invdig-shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
}

.invdig-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--invdig-shadow-lg);
}

.invdig-stat-label {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--invdig-gray-500);
    margin: 0 0 var(--invdig-spacing-sm) 0;
}

.invdig-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--invdig-gray-800);
    margin: var(--invdig-spacing-sm) 0;
}

.invdig-progress-bar {
    width: 100%;
    height: 10px;
    background-color: var(--invdig-gray-200);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: var(--invdig-spacing-md);
}

.invdig-progress-fill {
    height: 100%;
    background-color: var(--invdig-primary-color);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.invdig-stats-notas {
    font-size: 0.875rem;
    color: var(--invdig-gray-600);
    line-height: 1.6;
}

.invdig-stats-notas p {
    margin: var(--invdig-spacing-sm) 0;
}

.invdig-estado-dentro-limite {
    color: var(--invdig-primary-color);
    font-weight: 600;
}

.invdig-estado-fuera-limite {
    color: var(--invdig-rechazado);
    font-weight: 600;
}

/* ========================================
   SECCIÓN 3: INVITADOS
   ======================================== */
/*.invdig-seccion-invitados,
.sec-dashboard-invitados {
    background: white;
    padding: var(--invdig-spacing-xl);
    border-radius: var(--invdig-radius-xl);
    box-shadow: var(--invdig-shadow-md);
}*/

.invdig-seccion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-bottom: var(--invdig-spacing-md);*/
    flex-wrap: wrap;
    gap: var(--invdig-spacing-md);
}

.invdig-seccion-titulo,
.sec-dashboard-invitados h3 {
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--invdig-gray-700);
    margin: 0;
    padding-bottom: 10px;
}

.invdig-evento-nombre {
    color: var(--invdig-primary-color);
}

.invdig-btn-primary,
#btn-agregar-invitado {
    background-color: var(--invdig-primary-color);
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: var(--invdig-radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--invdig-spacing-sm);
    transition: background-color 0.2s, transform 0.1s;
    font-size: 0.875rem;
}

.invdig-btn-primary:hover,
#btn-agregar-invitado:hover {
    background-color: var(--invdig-primary-hover);
    transform: translateY(-1px);
}

.invdig-btn-primary:active,
#btn-agregar-invitado:active {
    transform: translateY(0);
}

.invdig-btn-cancel{
    background-color: var(--invdig-gray-400);
}
.invdig-btn-cancel:hover{
    background-color: var(--invdig-gray-500);
}

/* ========================================
   FILTROS
   ======================================== */
.invdig-filtros-container,
.filter-cont {
    display: flex;
    gap: var(--invdig-spacing-md);
    /*margin-bottom: var(--invdig-spacing-sm);*/
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    background: var(--invdig-gray-50);
    padding-bottom: var(--invdig-spacing-md);
    padding-top: var(--invdig-spacing-md);
    z-index: 2;
}

.invdig-select-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.invdig-select,
.filter-cont select {
    appearance: none;
    width: 100%;
    background-color: white;
    border: 1px solid var(--invdig-gray-300);
    border-radius: var(--invdig-radius-md);
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--invdig-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.invdig-select:hover {
    background-color: var(--invdig-gray-50);
    border-color: var(--invdig-gray-400);
}

.invdig-select:focus {
    outline: none;
    border-color: var(--invdig-primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.invdig-select-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--invdig-gray-700);
    font-family: 'Material Icons';
    font-size: 20px;
}

/* Scanner: en desktop los 3 filtros en una fila, mismo alto */
.invdig-scanner-container .invdig-filtros-container {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.invdig-scanner-container .invdig-filtros-container .invdig-select-wrapper {
    flex: 1;
}

.invdig-scanner-container .invdig-filtros-container .invdig-search-wrapper {
    flex: 1;
    min-width: unset;
}

.invdig-scanner-container .invdig-filtros-container .invdig-select,
.invdig-scanner-container .invdig-filtros-container .invdig-search-wrapper input {
    height: 100%;
    box-sizing: border-box;
}

.invdig-scanner-container .invdig-filtros-container .invdig-btn-secondary {
    white-space: nowrap;
    align-self: stretch;
    height: auto;
    font-size: 0.875rem;
}

/* Scanner: en móvil, 2 filas con orden personalizado */
@media (max-width: 768px) {
    .invdig-scanner-container .invdig-filtros-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Buscar nombre — fila 1, ocupa toda la fila */
    .invdig-scanner-container .invdig-filtros-container .invdig-search-wrapper {
        grid-column: 1 / -1;
        order: 1;
        min-width: unset;
    }

    /* Dropdown Todos — fila 2, columna 1 */
    .invdig-scanner-container .invdig-filtros-container .invdig-select-wrapper {
        grid-column: 1 / 2;
        order: 2;
        min-width: unset;
    }

    /* Botón descargar — fila 2, columna 2 */
    .invdig-scanner-container .invdig-filtros-container .invdig-btn-secondary {
        grid-column: 2 / 3;
        order: 3;
        justify-content: center;
        align-items: center;
        min-width: unset;
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
}
/* ========================================
   TABLA DE INVITADOS
   ======================================== */
.invdig-tabla-container {
    overflow-x: auto;
    border-radius: var(--invdig-radius-md);
    border: 1px solid var(--invdig-gray-200);
}

.invdig-tabla,
#tabla-invitados {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: white;
}

.invdig-tabla thead,
#tabla-invitados thead {
    background-color: var(--invdig-gray-50);
    border-bottom: 2px solid var(--invdig-gray-200);
}

.invdig-tabla th,
#tabla-invitados th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--invdig-gray-700);
}

.invdig-tabla tbody tr,
#tabla-invitados tbody tr {
    border-bottom: 1px solid var(--invdig-gray-200);
    transition: background-color 0.15s;
}

.invdig-tabla tbody tr:hover,
#tabla-invitados tbody tr:hover {
    background-color: var(--invdig-gray-50);
}

.invdig-tabla tbody tr:last-child,
#tabla-invitados tbody tr:last-child {
    border-bottom: none;
}

.invdig-tabla td,
#tabla-invitados td {
    padding: 1rem 1.5rem;
    color: var(--invdig-gray-600);
}

.invdig-td-nombre {
    font-weight: 600;
    color: var(--invdig-gray-700) !important;
    white-space: nowrap;
    position: relative;
}

.invdig-nombre-principal {
    display: inline-block;
}

/* Botón toggle para móvil (oculto en desktop) */
.invdig-toggle-acciones {
    display: none;
    background: none;
    border: none;
    color: var(--invdig-gray-500);
    cursor: pointer;
    padding: 0.25rem;
    margin-left: var(--invdig-spacing-sm);
    vertical-align: middle;
    transition: color 0.2s, transform 0.2s;
}

.invdig-toggle-acciones:hover {
    color: var(--invdig-gray-700);
}

.invdig-toggle-acciones .invdig-icon {
    font-size: 20px;
    transition: transform 0.2s;
}

.invdig-fila-invitado.acciones-visible .invdig-toggle-acciones .invdig-icon {
    transform: rotate(180deg);
}

/* Por defecto: OCULTAR la fila expandible en TODOS los tamaños */
.invdig-fila-acciones-expandible {
    display: none;
}


/* ========================================
   ESTADOS DE INVITADOS (COLORES)
   ======================================== */
.invitado-confirmado {
    background-color: var(--invdig-confirmado-bg) !important;
}

.invitado-sin-respuesta,
.invitado-sin_respuesta {
    background-color: var(--invdig-sin-respuesta-bg) !important;
}

.invitado-rechazado {
    background-color: var(--invdig-rechazado-bg) !important;
}

.invitado-confirmado:hover {
    background-color: #bbf7d0 !important;
}

.invitado-sin-respuesta:hover,
.invitado-sin_respuesta:hover {
    background-color: #fde68a !important;
}

.invitado-rechazado:hover {
    background-color: #fecaca !important;
}

/* ========================================
   ACCIONES
   ======================================== */
.invdig-acciones-wrapper,
.acciones {
    display: flex;
    gap: var(--invdig-spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

.acciones {
    white-space: nowrap;
}

.invdig-btn-accion,
.acciones .button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--invdig-radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 5px;
    margin-bottom: 3px;
}

.invdig-btn-accion .invdig-icon {
    font-size: 16px;
}

.invdig-btn-ver {
    color: #059669;
}

.invdig-btn-ver:hover {
    background-color: #d1fae5;
}

.invdig-btn-editar {
    color: var(--invdig-primary-color);
}

.invdig-btn-editar:hover {
    background-color: #dbeafe;
}

.invdig-btn-eliminar {
    color: var(--invdig-rechazado);
}

.invdig-btn-eliminar:hover {
    background-color: var(--invdig-rechazado-bg);
}

.invdig-btn-whatsapp {
    color: #16a34a;
}

.invdig-btn-whatsapp:hover {
    background-color: #dcfce7;
}

.invdig-btn-copiar {
    color: var(--invdig-gray-600);
}

.invdig-btn-copiar:hover {
    background-color: var(--invdig-gray-100);
}

/* ========================================
   MODALES (PRESERVADOS Y MEJORADOS)
   ======================================== */
.modal-invitado {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.modal-invitado .modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 30px;
    border-radius: var(--invdig-radius-md);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--invdig-shadow-lg);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-invitado .modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--invdig-gray-800);
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-invitado .modal-content form p {
    margin-bottom: 15px;
}

.modal-invitado .modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--invdig-gray-700);
    font-size: 0.875rem;
}

.modal-invitado .modal-content input,
.modal-invitado .modal-content select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--invdig-gray-300);
    border-radius: var(--invdig-radius-md);
    font-size: 14px;
    transition: all 0.2s;
}

.modal-invitado .modal-content input:focus,
.modal-invitado .modal-content select:focus {
    outline: none;
    border-color: var(--invdig-primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.modal-invitado .modal-content .button {
    margin-right: 10px;
    padding: 10px 20px;
    font-weight: 600;
}

/* Botón cerrar modal */
.modal-invitado .close {
    color: var(--invdig-gray-400);
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 20px;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-invitado .close:hover,
.modal-invitado .close:focus {
    color: var(--invdig-gray-800);
}

.cont-editar {
    background: var(--wp--preset--color--base);
    margin: 10% auto;
    padding: 30px 40px 20px;
    border-radius: var(--invdig-radius-md);
    width: min(80%, 500px);
    font-family: inherit;
    color: var(--invdig-gray-600);
}
.cont-editar :is(input, select){
    appearance: none;
    background-color: white;
    border: 1px solid var(--invdig-gray-300);
    border-radius: var(--invdig-radius-md);
    padding: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--invdig-gray-700);
    cursor: pointer;
    transition: all 0.2s;
    width: clamp(200px, 95%, 500px) !important;
}
.cont-editar form p {
    margin-bottom: var(--invdig-spacing-md);
}
.cont-login {
    border: solid 1px var(--invdig-gray-200);
    padding: 50px 40px;
    box-sizing: border-box;
    margin: 20px auto;
}
.cont-login h2{
    margin-bottom: 20px;
}
.title-login{
    margin: 16% auto 30px;
    width: min(80%, 500px);
    text-align: center;
}
.title-login img {
    width: min(50%, 230px);
}
.footer-login{
    background-color: var(--invdig-gray-100);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.footer-login p {
    font-family: inherit;
    font-size: 12px;
    color: var(--invdig-gray-400);
}
.footer-login img {
    height: 1.5em;
    filter: contrast(0.0);
    margin: 0 5px;
    trasnsform: translateY(4px);
}
.footer-login a:hover img {
    filter: contrast(1);
    filter: drop-shadow(#d2d2d2 0 0 4px);
}

/* ========================================
   TOAST (PRESERVADO Y MEJORADO)
   ======================================== */
.invdig-toast,
#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--invdig-gray-800);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--invdig-radius-md);
    box-shadow: var(--invdig-shadow-lg);
    min-width: 250px;
    text-align: center;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
}

.invdig-toast.show,
#toast.show {
    visibility: visible;
    animation: fadein 0.5s forwards, fadeout 0.5s 2.5s forwards;
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 2rem;
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        bottom: 2rem;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

/* Toast variants */
.invdig-toast.success {
    background: #10b981 !important;
}

.invdig-toast.warning {
    background: #f59e0b !important;
}

.invdig-toast.error {
    background: #ef4444 !important;
}

.invdig-toast.info {
    background: #3b82f6 !important;
}


/* ========================================
   MODAL OVERLAY (FRONTEND)
   ======================================== */
.invdig-modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* ========================================
   BOTÓN GHOST (DISCRETO)
   ======================================== */
.invdig-btn-ghost {
    background: none;
    border: 1px solid var(--invdig-gray-300);
    border-radius: var(--invdig-radius-md);
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    color: var(--invdig-gray-500);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s;
    font-family: inherit;
}

.invdig-btn-ghost:hover {
    background: var(--invdig-gray-100);
    border-color: var(--invdig-gray-400);
    color: var(--invdig-gray-700);
}

.invdig-btn-ghost .invdig-icon {
    font-size: 16px;
}

/* Header de sección mesas con botón */
.invdig-seccion-mesas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--invdig-spacing-md);
}



/* ========================================
   RESPONSIVE: TABLET
   ======================================== */
@media (max-width: 1024px) {
    .invdig-dashboard-container {
        padding: var(--invdig-spacing-md);
    }
    
    .invdig-titulo-principal {
        font-size: 1.8rem;
    }
    
    .invdig-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--invdig-spacing-md);
    }
    
   /* .invdig-seccion-invitados,
    .sec-dashboard-invitados {
        padding: var(--invdig-spacing-lg);
    }*/
    
    .invdig-tabla th,
    .invdig-tabla td,
    #tabla-invitados th,
    #tabla-invitados td {
        padding: 0.75rem 1rem;
    }
}


/* ========================================
   ESCÁNER QR - ESTILOS
   ======================================== */

/* Contenedor del escáner */
.invdig-scanner-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--invdig-spacing-xl);
    margin-bottom: var(--invdig-spacing-xl);
}

.invdig-scanner-area {
    background: white;
    padding: var(--invdig-spacing-xl);
    border-radius: var(--invdig-radius-xl);
    box-shadow: var(--invdig-shadow-md);
}

/* Área del lector QR */
.invdig-qr-reader {
    width: 100%;
    max-width: 400px;
    margin: 0 auto var(--invdig-spacing-lg);
    border-radius: var(--invdig-radius-md);
    overflow: hidden;
    background: var(--invdig-gray-100);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invdig-qr-reader video {
    border-radius: var(--invdig-radius-md);
}

/* Controles del escáner */
.invdig-scanner-controls {
    display: flex;
    justify-content: center;
    gap: var(--invdig-spacing-md);
    margin-bottom: var(--invdig-spacing-lg);
}

/* Input manual */
.invdig-manual-input {
    text-align: center;
    padding-top: var(--invdig-spacing-lg);
    border-top: 1px solid var(--invdig-gray-200);
}

.invdig-manual-input p {
    color: var(--invdig-gray-500);
    margin-bottom: var(--invdig-spacing-sm);
    font-size: 0.875rem;
}

.invdig-input-group {
    display: flex;
    gap: var(--invdig-spacing-sm);
    max-width: 400px;
    margin: 0 auto;
}

.invdig-input-group input {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--invdig-gray-300);
    border-radius: var(--invdig-radius-md);
    font-size: 0.875rem;
}

.invdig-input-group input:focus {
    outline: none;
    border-color: var(--invdig-primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Panel de resultado */
.invdig-panel-resultado {
    background: white;
    padding: var(--invdig-spacing-xl);
    border-radius: var(--invdig-radius-xl);
    box-shadow: var(--invdig-shadow-lg);
    border: 4px solid var(--invdig-primary-color);
}

.invdig-resultado-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--invdig-spacing-lg);
    padding-bottom: var(--invdig-spacing-md);
    border-bottom: 1px solid var(--invdig-gray-200);
}

.invdig-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--invdig-gray-500);
    transition: color 0.2s;
}

.invdig-btn-icon:hover {
    color: var(--invdig-gray-800);
}

/* Información del invitado */
.invdig-info-invitado {
    margin-bottom: var(--invdig-spacing-lg);
}

.invdig-info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--invdig-spacing-sm) 0;
    border-bottom: 1px solid var(--invdig-gray-100);
}

.invdig-info-row:last-of-type {
    border-bottom: none;
}

.invdig-info-label {
    color: var(--invdig-gray-500);
    font-size: 0.875rem;
}

.invdig-info-value {
    font-weight: 600;
    color: var(--invdig-gray-800);
}

.invdig-info-nombre .invdig-info-value {
    font-size: 1.125rem;
    color: var(--invdig-primary-color);
}

.invdig-info-pases {
    font-size: 1.5rem;
    color: var(--invdig-confirmado);
}

/* Alerta de ya validado */
.invdig-alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--invdig-spacing-md);
    padding: var(--invdig-spacing-md);
    border-radius: var(--invdig-radius-md);
    margin-top: var(--invdig-spacing-md);
}

.invdig-alerta-warning {
    background-color: var(--invdig-sin-respuesta-bg);
    border: 1px solid var(--invdig-sin-respuesta);
}

.invdig-alerta-warning .invdig-icon {
    color: var(--invdig-sin-respuesta);
    font-size: 24px;
}

/* Botones de acción */
.invdig-resultado-acciones {
    display: flex;
    gap: var(--invdig-spacing-md);
    justify-content: center;
}

.invdig-btn-validar {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.invdig-btn-warning {
    background-color: var(--invdig-sin-respuesta);
    color: white;
    font-weight: 600;
    font-size: 13px;
    padding: 0.625rem 1.25rem;
    border-radius: var(--invdig-radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--invdig-spacing-sm);
    transition: background-color 0.2s;
    text-decoration: none;
}

.invdig-btn-warning:hover {
    background-color: #d97706;
}

.invdig-btn-secondary {
    background-color: var(--invdig-gray-200);
    color: var(--invdig-gray-700);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--invdig-radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--invdig-spacing-sm);
    transition: background-color 0.2s;
    text-decoration: none;
}

.invdig-btn-secondary:hover {
    background-color: var(--invdig-gray-300);
}

/* Estados en tabla */
.invdig-estado-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.invdig-estado-badge.invitado-validado {
    background-color: var(--invdig-confirmado-bg);
    color: #166534;
}

.invdig-estado-badge.invitado-pendiente {
    background-color: var(--invdig-gray-100);
    color: var(--invdig-gray-600);
}

.invdig-fecha-acceso {
    display: block;
    font-size: 0.75rem;
    color: var(--invdig-gray-500);
    margin-top: 0.25rem;
}

/* Fila validada */
tr.invitado-validado {
    background-color: var(--invdig-confirmado-bg) !important;
}

tr.invitado-validado:hover {
    background-color: #bbf7d0 !important;
}

/* Stat sub texto */
.invdig-stat-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--invdig-gray-500);
    margin-top: 0.25rem;
}

/* Buscador */
.invdig-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
    display: flex;
}

.invdig-search-wrapper input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 1px solid var(--invdig-gray-300);
    border-radius: var(--invdig-radius-md);
    font-size: 0.875rem;
}

.invdig-search-wrapper .invdig-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--invdig-gray-400);
}

/* ========================================
   ESCÁNER - RESPONSIVE MÓVIL
   ======================================== */
@media (max-width: 1024px) {
    .invdig-scanner-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .invdig-scanner-area {
        padding: var(--invdig-spacing-md);
    }
    
    .invdig-qr-reader {
        min-height: 250px;
    }
    
    .invdig-scanner-controls {
        flex-direction: column;
    }
    
    .invdig-scanner-controls button {
        width: 100%;
    }
    
    .invdig-input-group {
        flex-direction: column;
    }
    
    .invdig-panel-resultado {
        padding: var(--invdig-spacing-lg);
    }
    
    .invdig-resultado-acciones {
        flex-direction: column;
    }
    
    .invdig-resultado-acciones button {
        width: 100%;
    }
    
    /* Tabla de accesos en móvil */
    #tabla-accesos th:nth-child(2),
    #tabla-accesos td:nth-child(2) {
        display: none;
    }
}

/* Modal flotante en móvil - SOLO posición */
@media (max-width: 768px) {
    #panel-resultado {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
        width: 70%
    }
    
    /* Overlay oscuro detrás */
    #panel-resultado::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: var(--invdig-gray-50);
        z-index: -1;
    }
}


/* ========================================
   ASIGNACIÓN DE MESAS - ESTILOS
   ======================================== */

/* Sección de mesas visual */
.invdig-seccion-mesas-visual {
    margin-bottom: var(--invdig-spacing-2xl);
}

.invdig-mesas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--invdig-spacing-lg);
}

/* Card de mesa */
.invdig-mesa-card {
    background: white;
    padding: var(--invdig-spacing-lg);
    border-radius: var(--invdig-radius-xl);
    box-shadow: var(--invdig-shadow-md);
    transition: all 0.3s;
    border: 3px solid transparent;
}

.invdig-mesa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--invdig-shadow-lg);
}

/* Estados de mesa */
.invdig-mesa-card.mesa-disponible {
    border-color: var(--invdig-confirmado);
}

.invdig-mesa-card.mesa-casi-llena {
    border-color: var(--invdig-sin-respuesta);
}

.invdig-mesa-card.mesa-llena {
    border-color: var(--invdig-rechazado);
    background-color: var(--invdig-rechazado-bg);
}

/* Header de mesa */
.invdig-mesa-header {
    margin-bottom: var(--invdig-spacing-md);
    text-align: center;
}

.invdig-mesa-header h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--invdig-gray-600);
    margin: 0 0 var(--invdig-spacing-xs) 0;
}

.invdig-mesa-nombre {
    display: block;
    font-size: 0.875rem;
    color: var(--invdig-gray-500);
    font-style: italic;
}

/* Ocupación de mesa */
.invdig-mesa-ocupacion {
    margin-bottom: var(--invdig-spacing-md);
}

.invdig-ocupacion-num {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--invdig-gray-700);
    margin-bottom: var(--invdig-spacing-sm);
}

.invdig-mesa-card.mesa-llena .invdig-ocupacion-num {
    color: var(--invdig-rechazado);
}

.invdig-mesa-card.mesa-casi-llena .invdig-ocupacion-num {
    color: var(--invdig-sin-respuesta);
}

.invdig-mesa-card.mesa-disponible .invdig-ocupacion-num {
    color: var(--invdig-confirmado);
}

/* Botón editar mesa */
.invdig-btn-mesa-editar {
    width: 100%;
    padding: 0.5rem;
    background: var(--invdig-gray-100);
    border: none;
    border-radius: var(--invdig-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--invdig-gray-700);
    transition: all 0.2s;
}

.invdig-btn-mesa-editar:hover {
    background: var(--invdig-gray-200);
    border-color: var(--invdig-gray-400);
}

.invdig-btn-mesa-editar .invdig-icon {
    font-size: 16px;
}

/* Badge de mesa en tabla */
.invdig-badge-mesa {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--invdig-primary-color);
    color: white;
}

.invdig-badge-mesa.sin-asignar {
    background-color: var(--invdig-gray-300);
    color: var(--invdig-gray-700);
}

/* Tabla con checkboxes */
.invdig-tabla input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.invdig-mesa-actual {
    text-align: center;
}

/* ========================================
   RESPONSIVE - MESAS
   ======================================== */
@media (max-width: 1024px) {
    .invdig-mesas-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--invdig-spacing-md);
    }
}

@media (max-width: 768px) {
    /* Ocultar vista de mesas en móvil */
    .invdig-seccion-mesas-visual {
        display: none !important;
    }
    
    .invdig-mesas-grid {
        grid-template-columns: 1fr;
    }
    
    .invdig-filtros-container {
        flex-direction: column;
    }
    
    .invdig-select-wrapper,
    #btn-asignar-seleccionados {
        width: 100%;
    }
    
    /* Ocultar columna "Tipo" en móvil */
    .invdig-tabla#tabla-invitados-mesas th:nth-child(3),
    .invdig-tabla#tabla-invitados-mesas td:nth-child(3) {
        display: none;
    }
}

@media (max-width: 480px) {
    .invdig-ocupacion-num {
        font-size: 1.25rem;
    }
    
    .invdig-mesa-header h3 {
        font-size: 1.125rem;
    }
}



/* ========================================
   DESKTOP: Acciones visibles en columna
   ======================================== */
@media (min-width: 769px) {
    /* Mantener fila expandible OCULTA en desktop */
    .invdig-fila-acciones-expandible {
        display: none !important;
    }
    
    /* Mantener botón toggle OCULTO en desktop */
    .invdig-toggle-acciones {
        display: none !important;
    }
    
    /* Columna de acciones VISIBLE en desktop */
    .invdig-th-acciones {
        display: table-cell;
    }
    
    .invdig-td-acciones {
        display: table-cell;
    }
    
    /* Acciones en línea horizontal */
    .invdig-acciones-wrapper {
        display: flex;
        gap: var(--invdig-spacing-sm);
        flex-wrap: wrap;
        align-items: center;
    }
}

/* ========================================
   MÓVIL: Sistema de accordion
   ======================================== */
@media (max-width: 768px) {
    /* Ocultar columna de acciones en móvil */
    .invdig-th-acciones {
        display: none;
    }
    
    .invdig-td-acciones {
        display: none !important;
    }
    
    /* MOSTRAR botón toggle en móvil */
    .invdig-toggle-acciones {
        display: inline-block;
    }
    
    .invdig-toggle-acciones:hover {
        color: var(--invdig-gray-700);
    }
    
    /* Animación de la flecha cuando está abierto */
    .invdig-toggle-acciones .invdig-icon {
        font-size: 20px;
        transition: transform 0.2s;
    }
    
    /* Rotar flecha cuando el accordion está abierto */
    .invdig-fila-invitado.accordion-activo .invdig-toggle-acciones .invdig-icon {
        transform: rotate(180deg);
    }
    
    /* Fila expandible: por defecto oculta */
    .invdig-fila-acciones-expandible {
        display: none;
    }
    
    /* Fila expandible: MOSTRAR cuando tiene clase 'acciones-visible' */
    .invdig-fila-acciones-expandible.acciones-visible {
        display: table-row;
    }
    
    /* Contenedor de acciones expandidas */
    .invdig-fila-acciones-expandible td {
        padding: 0;
        border-top: 1px solid var(--invdig-gray-200);
    }
    
    .invdig-acciones-expandidas {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: var(--invdig-spacing-sm);
        width: 100%;
    }
    
    /* Botones de acción en modo móvil */
    .invdig-acciones-expandidas .invdig-btn-accion {
        width: fit-content;%;
        justify-content: flex-start;
        padding: 0.625rem 1rem;
        font-size: 0.75rem;
        margin-right: 0;
        margin-bottom: 0;
        box-sizing: border-box;
    }
    
    .invdig-acciones-expandidas .invdig-btn-accion .invdig-icon {
        font-size: 1rem;
    }
    
    /* Ajustar anchos de columnas en móvil */
    .invdig-td-nombre {
        width: 60%;
    }
    
    .invdig-td-pases {
        width: 20%;
    }
    
    /* Ocultar columnas Tipo y Pases Confirmados en móvil */
    .invdig-tabla#tabla-invitados-lista th:nth-child(2),
    .invdig-tabla#tabla-invitados-lista td:nth-child(2),
    .invdig-tabla#tabla-invitados-lista th:nth-child(4),
    .invdig-tabla#tabla-invitados-lista td:nth-child(4){
        display: none;
    }
}

/* ========================================
   RESPONSIVE: MÓVIL PEQUEÑO
   ======================================== */
@media (max-width: 480px) {
    .invdig-titulo-principal {
        font-size: 1.5rem;
    }
    
    .invdig-resumen-titulo, .invdig-seccion-titulo, {
        font-size: 1.3rem;
    }
    
    .invdig-stat-value {
        font-size: 1.5rem;
    }
    
    .sec-dashboard-invitados h3 {
        font-size: 1rem;
    }
    
    .invdig-tabla,
    #tabla-invitados {
        font-size: 0.75rem;
    }
    
    .invdig-tabla thead th,
    #tabla-invitados thead th {
        font-size: 0.65rem;
        padding: 0.375rem;
    }
    
    .invdig-tabla tbody td,
    #tabla-invitados tbody td {
        padding: 0.625rem 0.375rem;
    }
}