/* ─── Compacto Mobile ──────────────────────────────
   Reglas responsive para pantallas < 768px.

   IMPORTANTE: la compaccion a 2 columnas SOLO aplica
   a filas marcadas explicitamente con la clase
   `stats-row` (KPIs y accesos rapidos). NO usar
   selectores globales tipo `.row > [class*=col-xl-]`:
   eso rompe formularios y layouts que usan col-xl-*
   para columnas de escritorio.
   ─────────────────────────────────────────────── */

/* ── Global: forzar tipografía consistente en TODOS los placeholders ── */
/* Por defecto algunos navegadores (Safari iOS, Firefox) aplican fuentes
   distintas al placeholder (system-ui, monospace, italic) que rompen
   la coherencia tipográfica del sistema. */
input::placeholder, textarea::placeholder,
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
input::-moz-placeholder, textarea::-moz-placeholder,
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    font-family: inherit;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: inherit;
    opacity: 1; /* Firefox reduce opacidad por defecto */
}

/* ── Global: scroll fluido y contenido en sidebar móvil ── */
/* En mobile el sidebar es un contenedor con scroll interno. Sin
   overscroll-behavior el "bounce" de iOS/Android hace que cuando
   llegás al final del scroll, el gesto "se escape" al body de la
   página y el sidebar se vea arrastrado fuera de la vista, rompiendo
   la armonía visual. */
.app-sidebar,
.main-sidebar {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

@media (max-width: 991.98px) {
    /* En mobile el header se oculta via display:none (no ocupa espacio),
       PERO .pos-pin (el link fijo de Punto de Venta) sigue en flujo normal
       arriba de .main-sidebar y SI ocupa espacio real (~3rem, mismo valor
       que ya se resta en la regla de desktop mas abajo). Sin restarlo acá,
       .main-sidebar terminaba pasandose del fondo visible del sidebar y los
       ultimos items (cerrar sesión, perfil, etc.) quedaban inalcanzables. */
    .app-sidebar .main-sidebar {
        height: calc(100vh - 3rem);
        height: calc(100dvh - 3rem); /* dinámico: respeta barras del navegador mobile */
        max-height: calc(100dvh - 3rem);
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* El contenedor padre debe permitir que el sidebar se vea completo. */
    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
    }
}

/* En pantallas grandes mantener el comportamiento desktop original */
@media (min-width: 992px) {
    .app-sidebar .main-sidebar {
        height: calc(100vh - 5.5rem - 3rem);
        overscroll-behavior: contain;
    }
}

@media (max-width: 767.98px) {
    /* Page header: mas chico, menos margen */
    .page-header { margin-bottom: 1rem !important; }
    .page-header .page-title,
    .page-header h1 { font-size: 1rem !important; }
    .page-header .text-muted { font-size: 0.72rem !important; }

    /* KPI rows: forzar 2 columnas. Solo filas con .stats-row
       (opt-in explicito). Formularios y layouts no se tocan. */
    .stats-row > .col,
    .stats-row > [class*="col-"] {
        flex: 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /* KPI card compacta (solo dentro de .stats-row) */
    .stats-row .card-body { padding: 0.55rem 0.65rem !important; }
    .stats-row .fs-3 { font-size: 1.05rem !important; }
    .stats-row .fs-20,
    .stats-row .fs-22,
    .stats-row .fs-24,
    .stats-row .h3,
    .stats-row .h4,
    .stats-row .h5 { font-size: 0.95rem !important; }
    .stats-row .fs-12,
    .stats-row .fs-13,
    .stats-row .text-muted { font-size: 0.65rem !important; }
    .stats-row .rounded-3:not(.card) {
        width: 2rem !important; height: 2rem !important;
        line-height: 2rem !important; text-align: center !important;
    }
    .stats-row .rounded-3 i.fs-3,
    .stats-row .rounded-3 i.fs-4 { font-size: 1rem !important; }

    /* Botones */
    .btn-wave { padding: 0.3rem 0.55rem !important; font-size: 0.72rem !important; }
    .btn-wave i { font-size: 0.8rem !important; }

    /* Breadcrumb */
    .breadcrumb { font-size: 0.7rem !important; padding: 0.3rem 0 !important; }
    .breadcrumb .breadcrumb-item + .breadcrumb-item::before { padding: 0 0.25rem; }

    /* ── Cards de acción (icono + texto) en mobile ──
       Patrón muy usado: .card-body con d-flex align-items-center gap-3,
       un div con rounded-3 + p-2/p-3 envolviendo un <i class="fs-3/fs-4">,
       y un div hermano con <h5> + <small>. En pantallas <576px el
       ícono + texto en una sola fila se cortan o desbordan. */
    .card-body.d-flex.align-items-center.gap-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0.6rem !important;
    }
    .card-body.d-flex.align-items-center.gap-3 > div:first-child {
        align-self: flex-start !important;
    }
    .card-body.d-flex.align-items-center.gap-3 .rounded-3 {
        padding: 0.5rem !important;
    }
    .card-body.d-flex.align-items-center.gap-3 .rounded-3 i.fs-3,
    .card-body.d-flex.align-items-center.gap-3 .rounded-3 i.fs-4 {
        font-size: 1.1rem !important;
    }
    .card-body.d-flex.align-items-center.gap-3 h5 {
        font-size: 0.95rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1.2 !important;
    }
    .card-body.d-flex.align-items-center.gap-3 small {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
    }

    /* Botones de acción (los que estaban "fuera de lugar") */
    .btn-action {
        font-size: 0.78rem !important;
        padding: 0.4rem 0.7rem !important;
        white-space: nowrap !important;
    }
    .btn-action i { font-size: 0.85rem !important; margin-right: 0.3rem !important; }
}

@media (max-width: 575.98px) {
    .page-header .page-title { font-size: 0.9rem !important; }
}

/* ─── Compacto general (todas las pantallas) ─────────
   Reduce el tamaño visual de KPIs, botones de accion
   y otros elementos que ocupan espacio innecesario.
   ─────────────────────────────────────────────── */

/* KPIs mas compactos: avatar y titulos */
.stats-row .avatar.avatar-lg {
    width: 2.2rem !important;
    height: 2.2rem !important;
}
.stats-row .avatar.avatar-lg i.fs-20,
.stats-row .avatar.avatar-lg svg {
    font-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
}
.stats-row h4.fw-semibold,
.stats-row .h4.fw-semibold {
    font-size: 1rem !important;
}

/* Botones de accion en tablas (editar/ver/borrar) mas chicos */
.table .btn-outline-info,
.table .btn-outline-warning,
.table .btn-outline-primary,
.table .btn-outline-danger,
.table .btn-outline-secondary {
    padding: 0.15rem 0.35rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}
.table .btn-outline-info i,
.table .btn-outline-warning i,
.table .btn-outline-primary i,
.table .btn-outline-danger i,
.table .btn-outline-secondary i {
    font-size: 0.8rem !important;
}

/* Botones de accion en los headers de las paginas (Crear, Nueva, etc.) 
   Se mantienen visibles pero no ocupan tanto espacio */
.card-header .btn:not(.btn-sm):not(.btn-lg) {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.8rem !important;
}

/* ─── POS touch-friendly: pantallas tactiles ─────────
   Target minimo 48px para pulgares.
   Solo aplica en la pagina POS (CrearFactura).
   ─────────────────────────────────────────────── */

/* Scanner container — estilo caja registradora */
.pos-scanner-container {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 2px solid #6366f1;
    border-radius: 12px;
}
.pos-scanner-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    border-radius: 10px;
    color: white;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.pos-scanner-input {
    width: 100%;
    border: none;
    background: white;
    height: 3.2rem;
    padding: 0 1rem;
    border-radius: 8px;
    outline: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    font-family: inherit;
}
.pos-scanner-input::placeholder,
.pos-scanner-input::-webkit-input-placeholder,
.pos-scanner-input::-moz-placeholder,
.pos-scanner-input:-ms-input-placeholder {
    font-weight: 400;
    color: #94a3b8;
    font-size: inherit;
    font-family: inherit;
    opacity: 1; /* Firefox reduce opacidad por defecto; forzar 1 */
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: inherit;
}
.pos-scanner-input:focus {
    box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}

@media (pointer: coarse) {
    .pos-btn-imprimir {
        min-height: 3.5rem !important;
        font-size: 1.3rem !important;
    }
    .pos-btn-cancelar {
        min-height: 2.8rem !important;
        font-size: 1rem !important;
    }
    .pos-input-barcode {
        min-height: 3.2rem !important;
        font-size: 1.5rem !important;
    }
    .pos-scanner-input {
        min-height: 3.5rem !important;
        font-size: 1.1rem !important;
    }
}

/* Los botones de cantidad en la tabla de items */
@media (max-width: 991.98px) {
    .pos-item-cantidad button,
    .pos-item-accion button {
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
    }
}

/* ── Sidebar item "Punto de Venta" fijo: texto blanco para legibilidad ── */
/* El item del POS vive dentro de .pos-pin (un contenedor sticky fijo).
   El CSS base pone el color del texto activo igual al primary (morado),
   pero cuando el sidebar usa un fondo de color/gradiente/transparent,
   el texto morado sobre fondo oscuro queda ilegible. Forzamos blanco
   SOLO en este item fijo, sin tocar los demás items del menú. */
.pos-pin .side-menu__item.active,
.pos-pin .side-menu__item.active .side-menu__label,
.pos-pin .side-menu__item.active .side-menu__icon,
.pos-pin .side-menu__item.active .side-menu__angle {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.pos-pin .side-menu__item:hover,
.pos-pin .side-menu__item:hover .side-menu__label,
.pos-pin .side-menu__item:hover .side-menu__icon,
.pos-pin .side-menu__item:hover .side-menu__angle {
    color: #ffffff !important;
    fill: #ffffff !important;
}