/* Adaptación a móvil y tablet, compartida por todas las páginas (públicas y admin).
   Se carga al final del <head> para que gane a los estilos propios de cada página;
   los !important son para pisar estilos inline del HTML. Solo actúa por debajo de
   1024px (tablet) y 640px (móvil): en PC todo se ve exactamente igual que antes. */

/* ---------- Reglas generales (todas las pantallas) ---------- */
img, video, canvas, iframe {
    max-width: 100%;
}

/* Filas de botones de cabecera: si no caben, pasan a otra línea en vez de
   salirse de la pantalla (p. ej. los 14 botones de /admin/database en PC) */
.header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---------- Tablet y móvil (≤ 1024px) ---------- */
@media (max-width: 1024px) {

    /* Cabeceras con título + botones: los botones pasan a la línea de abajo en vez de cortarse */
    .header,
    .panel-header,
    .card-header,
    header > .container {
        flex-wrap: wrap !important;
        gap: 12px;
    }
    .header-actions,
    .add-form,
    .filters,
    header > .container > div:last-child {
        flex-wrap: wrap !important;
    }

    /* Gráficas de la portada: una debajo de otra */
    #statsCharts {
        grid-template-columns: 1fr !important;
    }

    /* Ventanas emergentes: que quepan en la pantalla */
    .modal-content,
    .modal-dialog,
    .modal-box {
        width: 94% !important;
        max-width: 94vw !important;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ---------- Panel admin con menú lateral (≤ 900px): el menú pasa arriba ---------- */
@media (max-width: 900px) {
    body > .sidebar,
    aside.sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        border-right: none !important;
        border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
        padding: 8px 12px;
    }
    aside.sidebar .logo {
        padding: 8px 12px !important;
        font-size: 20px !important;
    }
    aside.sidebar nav,
    aside.sidebar .nav-menu,
    aside.sidebar ul {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
        flex: 1 1 100%;
        margin: 0;
        padding: 0;
    }
    aside.sidebar .nav-link,
    aside.sidebar a {
        padding: 8px 12px !important;
        margin: 0 !important;
        font-size: 14px;
    }
    aside.sidebar .nav-item {
        margin-bottom: 0 !important;
    }
    aside.sidebar .sidebar-footer,
    aside.sidebar .logout,
    aside.sidebar > div[style*="padding"] {
        margin-top: 0 !important;
        padding: 0 !important;
    }
    .sidebar ~ .main-content,
    .main-content {
        margin-left: 0 !important;
        padding: 20px 16px !important;
    }
    /* Su contenedor padre usaba flex en fila: lo apilamos */
    body:has(> aside.sidebar),
    .app-container:has(> aside.sidebar),
    .dashboard-container:has(> aside.sidebar) {
        flex-direction: column !important;
    }
}

/* ---------- Móvil (≤ 640px) ---------- */
@media (max-width: 640px) {
    body {
        overflow-x: hidden;
    }

    /* Márgenes laterales más pequeños */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .header,
    .panel-header {
        padding: 16px !important;
    }

    /* Títulos más pequeños */
    .header h1 {
        font-size: 22px !important;
    }
    .panel-header h2 {
        font-size: 18px !important;
    }

    /* Botones de la cabecera: ocupan media fila cada uno, fáciles de tocar */
    .header-actions {
        width: 100%;
    }
    .header-actions > .btn,
    .header-actions > a,
    .header-actions > button {
        flex: 1 1 calc(50% - 10px);
        text-align: center;
        justify-content: center;
    }

    /* Formularios y filtros: cada campo a lo ancho (pisa los width fijos inline) */
    .add-form,
    .filters {
        width: 100%;
    }
    .add-form input,
    .add-form select,
    .add-form button,
    .filters input,
    .filters select,
    .filters button,
    .search-box {
        width: 100% !important;
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Etiqueta flotante "admin / Salir" de la portada: abajo a la derecha para no tapar el logo */
    #authStatusBar {
        top: auto !important;
        bottom: 10px !important;
        right: 10px !important;
    }

    /* Botones de la cabecera de la portada (admin): en rejilla y sin separadores */
    header > .container > div:last-child {
        width: 100%;
        gap: 8px !important;
    }
    header > .container > div:last-child > div[style*="width: 1px"] {
        display: none !important;
    }
    header > .container > div:last-child > .btn {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }

    /* Tablas: se deslizan de lado dentro de su caja, sin romper la página */
    .table-container,
    .table-wrapper,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table th,
    table td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    /* Rejillas de tarjetas que no se adaptaban solas */
    .stats-grid,
    .charts-grid,
    .bottom-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}