/* =========================================
    1. ESTRUCTURA BASE (Mobile First)
    ========================================= */

.sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-strong);
    display: flex;
    justify-content: space-around;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    z-index: 1000;
}

.main-content {
    padding: 25px 20px 120px 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* =========================================
    2. COMPONENTES (Tarjetas y Botones)
    ========================================= */

/* Estilo unificado de Tarjeta Apple Style */
.stat-card,
.link-card,
.config-card,
.servicio-item,
.chart-card,
/* Nueva clase para gráficos */
.table-container {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    /* IMPORTANTE para bordes redondeados */
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card h3 {
    margin: 5px 0 0 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main);
}

/* Navegación */
.nav-item {
    padding: 8px;
    border-radius: 14px;
    color: var(--text-muted);
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.nav-item:hover {
    background: rgba(var(--primary-rgb), 0.05);
    color: var(--primary);
}

.nav-item.active {
    color: var(--primary) !important;
}

.logout {
    color: var(--danger);
    font-size: 11px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Estructura del ítem de servicio en la lista del dashboard */
.servicio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 15px;
    background: var(--bg-card) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-strong) !important;
    border-radius: 16px;
}

/* La info del servicio (nombre, precio, etc.) se queda a la izquierda */
.servicio-item .info-servicio {
    text-align: left;
    flex: 1;
}

/* Los botones se van a la derecha */
.servicio-item .acciones-servicio {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* =========================================
    3. TABLAS Y CONTENEDORES
    ========================================= */

.table-container {
    container-type: inline-size;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Botones en tablas más compactos para PC/Escritorio */
.table-container td button,
.table-container td .btn,
.table-container td .btn-primary,
.table-container td .btn-success,
.table-container td .btn-outline,
.table-container td .btn-danger {
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    min-width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.table-container td button .material-icons,
.table-container td .btn .material-icons {
    font-size: 14px !important;
    margin: 0 !important;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* Cambiado para mejor alineación */
}

th {
    text-align: center;
    /* Centrado por defecto */
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 14px 15px;
    background: rgba(var(--primary-rgb), 0.03);
}

/* Primera columna siempre a la izquierda */
th:first-child,
td:first-child {
    text-align: left;
}

td {
    padding: 16px 15px;
    font-size: 15px;
    vertical-align: middle;
    text-align: center;
    /* Datos centrados */
    border-bottom: 1px solid var(--border-strong);
}

tr:last-child td {
    border-bottom: none;
}

/* Fila separadora de fechas */
.date-separator td {
    padding: 12px 15px !important;
    border-bottom: 2px solid var(--border-strong) !important;
    text-align: left !important;
    background: rgba(var(--primary-rgb), 0.03) !important;
}
.date-separator:hover td {
    background: rgba(var(--primary-rgb), 0.03) !important;
}

/* =========================================
    4. ESCRITORIO (PC)
    ========================================= */

@media (min-width: 768px) {
    .sidebar {
        width: clamp(200px, 22vw, 250px);
        height: 100vh;
        top: 0;
        left: 0;
        border-right: 1px solid var(--border-strong);
        border-top: none;
        flex-direction: column;
        justify-content: flex-start;
        padding: clamp(20px, 3vw, 30px) 20px;
        position: fixed;
    }

    .logo {
        display: block;
        margin-bottom: 35px;
    }

    .sidebar-logo-container {
        padding: 40px 10px;
        /* Más aire en escritorio */
    }

    .sidebar-logo {
        height: 20px;
        /* Un poco más grande en monitores */
    }

    .nav-item {
        flex-direction: row;
        font-size: 15px;
        padding: 30px;
        width: 100%;
        text-align: left;
    }

    .nav-item.active {
        background: rgba(var(--primary-rgb), 0.1) !important;
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        font-weight: 700;
    }

    .main-content {
        margin-left: clamp(200px, 22vw, 250px);
        width: calc(100% - clamp(200px, 22vw, 250px));
        padding: clamp(20px, 4vw, 40px) clamp(2%, 4vw, 5%);
    }

    .header {
        flex-direction: row;
        justify-content: space-between;
    }

    .grid-2-col {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        display: grid;
        gap: 20px;
    }

    .logout {
        margin-top: auto;
        flex-direction: row;
        width: 100%;
        padding: 14px;
        cursor: pointer;
    }

    /* Tamaño fijo para que los gráficos no bailen */
    .chart-wrapper {
        height: 300px;
        width: 100%;
        position: relative;
    }

    .table-container th:first-child,
    .table-container td:first-child {
        text-align: left !important;
        padding-left: 20px;
    }

    /* Centrar modales en pantalla de PC */
    .modal-overlay {
        align-items: center !important;
        justify-content: center;
    }

    .modal-content {
        border-radius: 24px !important;
        margin-bottom: 0;
        padding: 30px;
    }

    .modal-drag-bar {
        display: none;
        /* Ocultamos la barrita táctil de iOS en PC */
    }

    .subscription-container {
        justify-content: center;
        /* Cambiamos a centrado vertical */
        min-height: 85vh;
        /* Ocupamos casi todo el alto */
        padding-top: 0;
        /* Sacamos el padding superior */
    }
}

/* =========================================
    5. MÓVIL (Ajustes de Tarjetas)
    ========================================= */

@media (max-width: 768px) {

    /* Espacio extra abajo para que la nav no tape el último turno */
    .main-content {
        padding: 20px 15px 120px 15px !important;
    }

    /* Navbar estilo iOS/Android */
    .sidebar {
        padding: 5px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        border-top: 1px solid var(--border-strong) !important;
        border-right: none !important;
    }

    /* Oculta el contenedor del logo y el logout viejo si existe */
    .sidebar-logo-container, .logo {
        display: none !important;
    }

    /* Estilo para los botones de la barra inferior */
    .nav-item, .logout {
        flex-direction: column !important;
        font-size: 10px !important;
        gap: 2px !important;
        padding: 5px !important;
        margin: 0 !important;
    }

    /* Botones de navegación más compactos */
    .nav-item {
        flex: 1 !important;
        padding: 8px 2px !important;
        font-size: 10px !important;
        background: transparent !important;
        border: none !important;
        flex-direction: column !important;
    }

    .nav-item .material-icons {
        font-size: 24px !important;
    }

    /* FIX GRÁFICOS: Altura obligatoria para iPhone/Android */
    .chart-wrapper {
        height: 280px !important;
        width: 100% !important;
        display: block !important;
        position: relative !important;
    }
}

/* 
   TRANSFORMACIÓN DINÁMICA DE TABLA A TARJETAS (CONTAINER QUERIES)
   Esto hace que la tabla adopte el formato de tarjetas individuales en función del ancho disponible 
   en su contenedor, en lugar del ancho de pantalla absoluta. ¡Es 100% fluido!
*/
@container (max-width: 850px) {
    /*  TABLA TRANSFORMADA EN TARJETAS (CARDS) */
    .table-container tbody,
    .table-container tr {
        display: block !important;
        width: 100% !important;
    }

    .table-container tr:not(.date-separator) {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-strong) !important;
        border-radius: 20px;
        padding: 12px 15px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        height: auto !important;
    }

    .table-container tr.date-separator {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 20px 0 10px 0 !important;
        padding: 0 !important;
    }

    .table-container tr.date-separator td {
        display: block !important;
        border: none !important;
        padding: 0 5px !important;
        text-align: left !important;
    }
    
    .table-container tr.date-separator td::before {
        display: none !important;
    }

    .table-container td {
        display: flex !important;
        justify-content: space-between !important;
        /* Etiqueta izquierda, Dato derecha */
        align-items: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.05) !important;
        text-align: right !important;
        font-size: 14px;
    }

    .table-container td:last-child {
        border-bottom: none !important;
    }

    /* Inyecta los títulos (CLIENTE, SERVICIO, etc.) */
    .table-container td::before {
        content: attr(data-label);
        font-weight: 800;
        text-transform: uppercase;
        font-size: 10px;
        color: var(--text-muted);
        text-align: left;
    }

    /* Contenedor de botones (WhatsApp / Completar) */
    .table-container td[data-label="Acciones"] {
        display: block !important;
        border-bottom: none !important;
        padding-top: 15px !important;
    }

    .table-container td[data-label="Acciones"] div {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }

    .table-container button {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 90px !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Achicamos los iconos dentro de los botones */
    .table-container button .material-icons {
        font-size: 14px !important;
        margin-right: 4px !important;
    }

    /* Oculta la palabra ACCIONES solo en celulares y tablets */
    .table-container td[data-label="Acciones"]::before {
        display: none !important;
    }

    /* 1. Eliminamos por completo el encabezado fantasma */
    .table-container thead,
    .table-container th {
        display: none !important;
    }

    /* 2. Ajustamos la tabla para que no tenga espacios extra arriba */
    .table-container table {
        border-spacing: 0;
        margin-top: 0 !important;
        display: block !important;
        width: 100% !important;
    }
}

/* Estilos de botones adicionales */
.btn-pdf {
    background: var(--danger);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    height: 45px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* =========================================
   MODALES (Panel de Control)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    /* Clave para centrar */
    justify-content: center;
    align-items: flex-end;
    /* En celulares se pega abajo */
    z-index: 9999;
}

.modal-content {
    background: var(--bg-card) !important;
    backdrop-filter: blur(14px) !important;
    /* Efecto Cristal Apple */
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid var(--border-strong);
    padding: 20px 20px 30px 20px;
    border-radius: 24px 24px 0 0;
    /* Bordes curvos arriba para celu */
    width: 100%;
    max-width: 500px;
    /* Ancho máximo de la tarjeta */
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
}

.modal-drag-bar {
    width: 40px;
    height: 5px;
    background: var(--border-strong);
    border-radius: 5px;
    margin: 0 auto 15px auto;
}

/* Contenedor de la lista de excepciones */
#listaExcepciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* El ítem individual (la tarjeta que pasaste en la foto) */
.excepcion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-input) !important;
    /* Fondo sutil que reacciona al modo oscuro */
    border-radius: 16px;
    border-left: 5px solid var(--danger);
    /* El borde rojo que ya tenías, pero más firme */
}

/* Texto dentro de la excepción */
.excepcion-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.excepcion-fecha {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    /* Arregla el texto blanco que no se ve */
}

.excepcion-estado {
    font-size: 12px;
    color: var(--danger);
    font-weight: 600;
}

/* El botón Restaurar */
.btn-restaurar {
    background: white;
    border: 1px solid #e2e8f0;
    color: var(--text-muted);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
    cursor: pointer;
}

.btn-restaurar:hover {
    background: #f8fafc;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-restaurar span {
    font-size: 16px;
    /* Tamaño del icono de reloj */
}

/* Personalización de la barra de scroll para el contenedor */
.table-container::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}