@import url('_global.css');
@import url('_login.css');
@import url('_forms.css');
@import url('_dashboard.css');
@import url('_crud_tables.css');
@import url('_sales_pos.css');
@import url('_reports.css');
@import url('_print.css');
/* @import url('_responsive.css'); */

/* Asegúrate de que este archivo esté envuelto o incluido correctamente en tu HTML */

/* ESTILOS DE IMPRESIÓN DIRECTA DE CÓDIGO DE BARRAS */
@media print {

    /* 1. Oculta todo por defecto cuando body tiene la clase print-mode-single */
    .print-mode-single * {
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Hace visible el contenedor principal de la impresión temporal */
    .print-mode-single #direct-print-area {
        visibility: visible !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: white !important;
        padding: 0 !important;
        /* Reset padding */
    }

    /* 3. Hace visible el contenido dentro del área de impresión (la etiqueta de código) */
    .print-mode-single #direct-print-area * {
        visibility: visible !important;
    }

    /* 4. Estilos para la etiqueta de código de barras (AJUSTA ESTAS MEDIDAS) */
    .barcode-label {
        width: 40mm;
        /* Ejemplo: 4cm de ancho */
        height: 25mm;
        /* Ejemplo: 2.5cm de alto */
        padding: 2px;
        box-sizing: border-box;
        text-align: center;
        page-break-after: avoid;
        /* 'avoid' si es solo 1, 'always' si quieres cortar después de cada uno */
    }

    .product-name-print {
        font-size: 8pt;
        font-weight: bold;
        margin: 0 0 2px 0;
        line-height: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .barcode-svg {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

/* Estilo base para el botón del menú (oculto en escritorio) */
.navbar-toggle {
    display: none !important;
}

@media (max-width: 992px) {

    /* 1. Navbar Responsivo Retraíble */
    .main-navbar {
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
        height: auto;
    }

    .navbar-toggle {
        display: block !important;
        cursor: pointer;
        font-size: 1.2rem;
        color: white;
        order: 2;
        padding: 5px;
    }

    .navbar-brand {
        order: 1;
        flex: 1;
    }

    .navbar-brand a {
        font-size: 1.2rem;
        justify-content: flex-start;
    }

    .navbar-menu {
        display: none; /* Oculto por defecto en móvil */
        flex-direction: column;
        width: 100%;
        order: 3;
        padding: 1rem 0;
        gap: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 10px;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .navbar-menu.active {
        display: flex; /* Se muestra al activar */
    }

    .navbar-links {
        flex-direction: column;
        width: 100%;
        gap: 8px;
        padding: 0;
    }

    .navbar-links li {
        width: 100%;
    }

    .navbar-links li a {
        padding: 10px 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        width: 100%;
        font-size: 1rem;
    }

    .navbar-links li a:hover {
        background: rgba(255, 255, 255, 0.1);
        border-bottom: none;
    }

    .navbar-user {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 5px;
    }

    .navbar-user span {
        font-size: 0.9rem;
    }

    .navbar-user .btn-logout {
        width: 100%;
        text-align: center;
        padding: 0.6rem;
    }

    /* 2. Dashboard Responsivo */
    .dashboard {
        width: 95%;
        margin: 15px auto;
        padding: 15px;
        gap: 15px;
    }

    .module-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .module-card {
        padding: 20px;
    }

    .module-icon {
        font-size: 2.5rem;
    }

    /* 3. Layout de Ventas (POS) */
    .sales-container {
        flex-direction: column;
        padding: 10px;
        gap: 15px;
    }

    .sales-left,
    .sales-right {
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }

    /* 4. Inputs y Botones */
    .service-input-group,
    .barcode-input-group {
        flex-direction: column;
        gap: 10px;
    }

    input,
    select,
    button {
        height: 45px;
        /* Altura cómoda para touch */
        font-size: 16px;
        /* Evita zoom automático en iOS */
    }

    .content-wrapper {
        padding: 15px;
        width: 100%;
    }

    .crud-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
        text-align: center;
    }
}