/* ============================================================
   PROLIDER — Responsive + Desktop Polish
   Incluir en todas las páginas después de font-awesome
   ============================================================ */

/* ── SCROLLBAR ELEGANTE (desktop) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,204,255,0.04); }
::-webkit-scrollbar-thumb { background: rgba(0,204,255,0.28); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,204,255,0.5); }

/* ── FOCUS STATES ── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #00ffff !important;
    box-shadow: 0 0 0 2px rgba(0,204,255,0.15) !important;
    transition: box-shadow .2s, border-color .2s;
}

/* ── TABLA: scroll horizontal en móvil ── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

/* Para content-box que contengan tablas */
.content-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
    .container { padding: 14px !important; }

    .header { padding: 18px 20px !important; }
    .header h1 { font-size: 1.4rem !important; letter-spacing: 2px !important; }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .stat-card { padding: 16px !important; }
    .stat-card .value { font-size: 1.65rem !important; }
    .stat-card .icon { font-size: 2rem !important; }

    /* Grids 2-col dentro de modales → 1 col */
    @supports (grid-template-columns: 1fr) {
        .modal-grid-2 { grid-template-columns: 1fr !important; }
    }
}

/* ── MOBILE (≤ 768px) ── */
@media (max-width: 768px) {
    .container { padding: 10px !important; }

    /* Header */
    .header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px 16px !important;
        border-radius: 16px !important;
    }
    .header h1 { font-size: 1.15rem !important; letter-spacing: 1px !important; gap: 8px !important; }
    .header-actions, .header-right { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

    .back-btn { padding: 9px 14px !important; font-size: 0.82rem !important; }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    .stat-card { padding: 12px 14px !important; }
    .stat-card .value { font-size: 1.35rem !important; }
    .stat-card .icon { font-size: 1.6rem !important; margin-bottom: 5px !important; }
    .stat-card .label { font-size: 0.73rem !important; }

    /* Content boxes */
    .content-box { padding: 14px !important; border-radius: 14px !important; }

    /* Tablas */
    .data-table { font-size: 0.8rem !important; }
    .data-table th, .data-table td { padding: 10px 8px !important; }

    /* Filtros en columna */
    .filters-row, .filter-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .filters-row select, .filters-row input,
    .filter-row select, .filter-row input {
        width: 100% !important;
    }

    /* Modales con clase .modal (clientes, etc.) */
    .modal { padding: 10px !important; }
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        padding: 18px !important;
    }
    .modal-header { padding-bottom: 12px !important; margin-bottom: 14px !important; }

    /* Modales dinámicos (inline style) — caja interior */
    [id^="modal"] > div {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    /* Grids 2-col → 1 col en móvil */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* Tabs con scroll */
    .tabs, .tab-buttons {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .tab-btn { white-space: nowrap !important; flex-shrink: 0 !important; }

    /* Action icons más pequeños */
    .action-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.82rem !important;
    }

    /* Botones en formularios — ancho completo */
    .btn-full-mobile { width: 100% !important; justify-content: center !important; }
}

/* ── TELÉFONO PEQUEÑO (≤ 480px) ── */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr !important; }

    .stat-card .value { font-size: 1.2rem !important; }

    .data-table { font-size: 0.75rem !important; }
    .data-table th, .data-table td { padding: 8px 6px !important; }

    /* Ocultar columnas secundarias en tablas */
    .col-hide-phone { display: none !important; }

    .header h1 { font-size: 1rem !important; }

    /* Badges con texto corto en móvil */
    .badge { font-size: 0.65rem !important; padding: 2px 7px !important; }
}

/* ── MEJORAS DESKTOP ── */
@media (min-width: 1025px) {
    /* Hover suave en filas */
    .data-table tbody tr {
        transition: background .18s ease;
    }

    /* Stat cards con hover más pronunciado */
    .stat-card:hover {
        transform: translateY(-4px) !important;
    }

    /* Content box borde más sutil en reposo */
    .content-box {
        transition: border-color .25s;
    }

    /* Back btn mejor hover */
    .back-btn:hover {
        transform: translateX(-3px) !important;
    }
}

/* ── UTILIDADES GLOBALES ── */
/* Evita que body haga scroll detrás de modales */
body.modal-open { overflow: hidden; }

/* Grids de formulario adaptativos */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr !important; }
}

/* Tabla sin bordes (para modales de detalle) */
.table-clean td, .table-clean th {
    border: none !important;
    padding: 8px 10px !important;
}
.table-clean tr:nth-child(even) { background: rgba(255,255,255,0.03); }

/* Número de membresía / folio destacado en tablas */
.folio-num {
    font-family: 'Orbitron', monospace;
    font-size: 0.78rem;
    color: #00ccff;
    letter-spacing: 1px;
}