/* assets/css/mobile.css */

/* --- Ajustes Generales Móvil --- */
@media only screen and (max-width: 768px) {

    /* Header principal */
    header {
        height: 60px;
    }

    #logo img {
        max-width: 100px;
        max-height: 25px;
    }

    #logo {
        padding-top: 15px;
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important;
    }

    /* Galería */
    #cd-gallery-items li {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 2em;
    }

    .gallery-header h1 {
        font-size: 1.4rem;
    }

    /* Modales de Login / Registro */
    #cd-login,
    #cd-signup,
    #cd-reset-password {
        padding: 30px 20px;
    }

    /* --- Panel Administrativo (admin.php) --- */
    body {
        flex-direction: column;
    }

    /* Sidebar en móvil (Ocultar por defecto o convertir en menú) */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        padding: 10px 0 !important;
    }

    .sidebar-header {
        padding-bottom: 10px;
    }

    .sidebar-menu {
        display: flex;
        justify-content: space-between;
        padding: 0 10px !important;
        flex-wrap: wrap;
    }

    .sidebar-menu li {
        flex: 1;
        text-align: center;
    }

    .sidebar-menu li:last-child {
        margin-top: 0 !important;
        /* Quitar el margen de 50px de 'Salir' */
    }

    .sidebar-menu li a {
        padding: 10px 5px !important;
        font-size: 0.7rem !important;
        border-left: none !important;
        border-bottom: 2px solid transparent;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .sidebar-menu li a.active {
        border-bottom: 2px solid var(--color-accent);
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .sidebar-menu li a i {
        display: block;
        margin: 0 auto 5px;
        font-size: 1.1rem;
    }

    /* Contenedor Principal Admin */
    .admin-main {
        margin-left: 0 !important;
        padding: 20px 15px !important;
    }

    .admin-top-bar h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    /* Tablas de Inventario */
    .skin-table th,
    .skin-table td {
        padding: 8px 5px !important;
        font-size: 0.75rem !important;
    }

    .skin-table img {
        width: 40px !important;
        height: 40px !important;
    }

    /* Modales en móvil */
    .modal-content {
        padding: 20px !important;
        width: 95% !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .btn-submit {
        grid-column: auto !important;
    }

    .preview-group {
        grid-column: auto !important;
    }
}