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

.sidebar-toggle-btn {
    display: none;
}

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

.header-actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .header-actions {
        width: 100%;
    }
    .header-actions button {
        flex: 1;
        white-space: nowrap !important;
        font-size: 13px; /* Slightly smaller to fit nicely */
    }
}

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

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

/* Link card con layout flex para que input y botón queden en fila */
.link-card {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

.link-card input {
    width: 100%;
    white-space: nowrap;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-main);
    margin-bottom: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 768px) {
    .stats-grid.stats-3-col {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .config-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .stat-ganancia {
        grid-column: 1 / -1;
    }
}

.stats-grid .stat-card {
    margin-bottom: 0;
}

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

.grid-2-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

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

/* Lógica responsive para el botón de cierre de sesión */
/* Por defecto en PC (ambas cuentas) */
.header-logout { display: none !important; }
.nav-logout { display: flex !important; }

/* En celulares */
@media (max-width: 768px) {
    /* Cuentas Generales (por defecto) */
    .header-logout { display: flex !important; }
    .nav-logout { display: none !important; }

    /* Cuentas de Clínicas */
    body.is-clinic .header-logout { display: none !important; }
    body.is-clinic .nav-logout { display: flex !important; }
}

/* 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;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-width: 110px;
    flex-shrink: 0;
    margin-left: 15px;
}

.servicio-item .acciones-servicio button {
    width: 100% !important;
    height: 40px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
}

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

.table-container td[colspan] {
    text-align: center !important;
    justify-content: center !important; /* In case it's flex on mobile */
}

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) {
    .align-bottom-desktop {
        align-items: flex-end;
    }
    .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;
        overflow-y: auto;
        transition: width 0.3s ease, padding 0.3s ease;
    }

    .sidebar-toggle-btn {
        position: fixed;
        top: 30px;
        left: calc(clamp(200px, 22vw, 250px) - 14px);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--bg-card);
        border: 1px solid var(--border-strong);
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1005;
        box-shadow: 2px 0 8px rgba(0,0,0,0.05);
        padding: 0;
        transition: left 0.3s ease, transform 0.3s ease, background 0.3s ease;
    }
    
    .sidebar-toggle-btn:hover {
        background: var(--bg-input);
        color: var(--primary);
    }

    .sidebar-toggle-btn .material-icons {
        font-size: 18px;
    }

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

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

    .sidebar-logo {
        max-width: 90%;
        height: auto;
        max-height: 22px;
        object-fit: contain;
    }

    .nav-item {
        flex-direction: row;
        font-size: 15px;
        padding: 16px 20px;
        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%);
        transition: margin-left 0.3s ease, width 0.3s ease;
    }

    body.sidebar-collapsed .sidebar {
        width: 80px;
        padding: clamp(20px, 3vw, 30px) 10px;
    }

    body.sidebar-collapsed .sidebar-toggle-btn {
        left: calc(80px - 14px);
        transform: rotate(180deg);
    }

    body.sidebar-collapsed .sidebar-logo-container {
        display: none;
    }

    body.sidebar-collapsed .nav-item {
        justify-content: center;
        padding: 16px 0;
        font-size: 0;
    }

    body.sidebar-collapsed .nav-item .material-icons {
        margin: 0;
        font-size: 24px;
    }

    body.sidebar-collapsed .logout {
        justify-content: center;
        padding: 14px 0;
        font-size: 0;
    }

    body.sidebar-collapsed .logout .material-icons {
        margin: 0;
        font-size: 24px;
    }

    body.sidebar-collapsed .main-content {
        margin-left: 80px;
        width: calc(100% - 80px);
    }

    .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;
        justify-content: center;
    }

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

    .hide-on-mobile {
        display: none !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;
        text-align: center !important;
    }

    .nav-item span:not(.material-icons) {
        white-space: nowrap !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;
    }

    /* FIX: Empty state centering on mobile */
    .table-container td[colspan] {
        justify-content: center !important;
        text-align: center !important;
    }

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

    .table-container td button.btn-wa {
        flex: 1 1 100% !important;
    }

    /* Achicamos los iconos dentro de los botones */
    .table-container td 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: center;
    z-index: 1050;
    touch-action: none;
    overscroll-behavior: none;
}

.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;
    width: 92%;
    max-width: 500px;
    /* Ancho máximo de la tarjeta */
    max-height: 96vh;
    max-height: 96dvh;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.modal-drag-bar {
    display: none;
    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);
}

html.modal-open,
body.modal-open,
html.swal2-shown,
body.swal2-shown {
    overflow: hidden !important;
    height: 100vh !important;
    overscroll-behavior: none !important;
}

@media (max-width: 600px) { .hide-on-mobile-fidelidad { display: none !important; } }

/* Dashboard Top Section (Stats & Buttons) */
.top-dashboard-section {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: stretch;
}

.top-dashboard-section .stats-grid {
    flex: 1;
    margin-bottom: 0;
}

.top-dashboard-section .stat-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 140px; /* moderate height instead of aspect-ratio */
}

.top-dashboard-section .header-actions {
    display: flex;
    flex-direction: column;
    width: 200px;
    gap: 15px;
}

.top-dashboard-section .header-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

@media (max-width: 768px) {
    .top-dashboard-section {
        flex-direction: column-reverse;
    }
    
    .top-dashboard-section .stat-card {
        height: auto;
    }

    .top-dashboard-section .header-actions {
        width: 100%;
        flex-direction: row;
        height: auto;
    }

    .top-dashboard-section .header-actions button {
        height: 50px;
        font-size: 13px;
    }
}