/* ============================================================
   PeruRest — Responsive fixes & UI/UX polish
   Capa aditiva sobre Bootstrap 4. NO sobrescribe componentes
   completos; solo corrige problemas de adaptabilidad detectados
   en la auditoría (móvil/tablet/desktop).
   ============================================================ */

/* --- Tipografía fluida (escala suave entre 360px y 1440px) --- */
:root {
    --pr-font-fluid: clamp(13px, 0.75vw + 11px, 15px);
    --pr-touch-min: 44px;
}

/* --- Contenedor base: nunca permitir scroll horizontal accidental --- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* --- Touch targets accesibles (WCAG 2.5.5) en móviles/tablets --- */
@media (max-width: 992px) {

    .btn,
    .page-link,
    .dataTables_paginate .paginate_button,
    .table td .btn-sm,
    .table td a[onclick],
    .table td a[href]:not(.no-touch) {
        min-height: var(--pr-touch-min);
        line-height: 1.2;
    }

    .table td .fa,
    .table td .fas,
    .table td .feather,
    .table td [data-feather] {
        font-size: 1.1rem;
    }

    /* Espaciar iconos de acciones en columna ACCIONES */
    .table td a+a,
    .table td a+button,
    .table td button+a {
        margin-left: 0.5rem;
    }
}

/* --- Tablas: scroll horizontal en pantallas chicas en lugar de cortar --- */
@media (max-width: 992px) {

    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Auto-wrap tablas DataTables que no tengan .table-responsive padre */
    .dataTables_wrapper>.row>.col-sm-12>table.dataTable {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        margin-top: 0.5rem;
    }
}

/* --- DataTables: filas más alegres y separadas en touch --- */
@media (max-width: 768px) {

    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 0.6rem 0.5rem;
        font-size: 0.85rem;
    }
}

/* --- Cards: padding más compacto en móvil --- */
@media (max-width: 576px) {
    .card-body {
        padding: 0.85rem;
    }

    .card-title {
        font-size: 1rem;
    }

    h1,
    .h1 {
        font-size: clamp(1.4rem, 4vw, 2rem);
    }

    h2,
    .h2 {
        font-size: clamp(1.2rem, 3.5vw, 1.7rem);
    }

    h3,
    .h3 {
        font-size: clamp(1.05rem, 3vw, 1.4rem);
    }

    h4,
    .h4 {
        font-size: clamp(0.95rem, 2.5vw, 1.2rem);
    }
}

/* --- Modales: fullscreen en móvil para mejor lectura/edición --- */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-keep-small) {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    .modal-dialog:not(.modal-keep-small) .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: 0;
    }

    .modal-dialog:not(.modal-keep-small) .modal-body {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }
}

/* --- Modales en tablet: no exceder altura, scroll interno --- */
@media (min-width: 576px) {
    .modal-body {
        max-height: 75vh;
        overflow-y: auto;
    }
}

/* --- Formularios: inputs cómodos en touch --- */
@media (max-width: 992px) {

    .form-control,
    .custom-select,
    .bootstrap-select>.btn {
        min-height: var(--pr-touch-min);
        font-size: 16px;
        /* evita zoom en iOS */
    }

    label {
        font-size: 0.9rem;
        margin-bottom: 0.35rem;
    }
}

/* --- Sidebar: cuando el aside esté abierto en móvil, oscurecer fondo --- */
@media (max-width: 767.98px) {
    body.show-sidebar::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 9;
        pointer-events: none;
    }
}

/* --- Header: evitar overflow del indicador de sucursal --- */
@media (max-width: 991.98px) {

    .navbar-header,
    .top-navbar {
        flex-wrap: wrap;
    }

    .top-navbar .navbar-nav>li>a.profile-pic span {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }
}

/* --- Footer: ocultar en pantallas muy chicas o reducir --- */
@media (max-width: 575.98px) {
    .footer {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
}

/* --- Botones de acción flotantes (FAB "+" en listados) --- */
@media (max-width: 575.98px) {

    .btn-fab,
    a[href$="/nueva-compra"].btn,
    a[href$="/nueva-venta"].btn {
        position: relative;
    }
}

/* --- Tablero / KPIs: tamaños fluidos --- */
.kpi-value,
[style*="font-size: 20px"].kpi-value {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
}

/* --- Filtros (rangos de fechas, selects) wrap en mobile --- */
@media (max-width: 768px) {

    .filtros-row,
    .row.filtros {
        row-gap: 0.75rem;
    }

    .form-group {
        margin-bottom: 0.75rem;
    }
}

/* --- Imágenes responsive por defecto --- */
img {
    max-width: 100%;
    height: auto;
}

/* --- SweetAlert2: ancho cómodo en móvil --- */
@media (max-width: 575.98px) {
    .swal2-popup {
        width: 95vw !important;
        font-size: 0.95rem !important;
    }
}

/* --- Tabs scrollables en móvil cuando son muchos --- */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }
}

/* --- POS / Venta: tabs verticales no fuerzan ancho mínimo --- */
@media (max-width: 575.98px) {
    .nav.tabs-vertical.list_categorias_menu {
        min-width: 0 !important;
    }
}

/* Min-width responsivo para tabs-vertical del POS en desktop */
@media (min-width: 576px) {
    .nav.tabs-vertical.list_categorias_menu {
        min-width: 200px;
    }
}

/* ============================================================
   FASE 5 — POS / Venta: ajustes específicos
   ============================================================ */

/* Botones de mesas más compactos en móvil pequeño */
@media (max-width: 575.98px) {
    .btn-large-dim {
        width: clamp(80px, 28vw, 110px) !important;
        height: clamp(80px, 28vw, 110px) !important;
        font-size: clamp(13px, 3.5vw, 16px) !important;
        margin: 4px !important;
    }

    /* Modal de lista de productos: usar pantalla completa */
    #modal-lista-menu .modal-dialog,
    #modal-pago .modal-dialog,
    #modal-cliente .modal-dialog,
    #modal-promocion .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    #modal-lista-menu .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }

    /* Tabs verticales del modal de productos: scroll horizontal */
    #modal-lista-menu .nav.tabs-vertical {
        flex-direction: row !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        max-width: 100%;
        min-width: 0 !important;
    }

    #modal-lista-menu .nav.tabs-vertical .nav-item {
        flex: 0 0 auto;
    }

    /* Carrito / total inferior fijo en móvil */
    .u4-2 .u4:last-child {
        position: relative;
    }
}

/* Modal de productos en tablet: más ancho útil */
@media (min-width: 576px) and (max-width: 991.98px) {
    #modal-lista-menu .modal-dialog {
        max-width: 95vw;
    }
}

/* ============================================================
   FASE 7 — Override de inline styles hardcoded
   ============================================================ */

/* KPIs del tablero (font-size:20px inline) — escalar fluido */
.tablero .pago_efe,
.tablero .pago_tar,
.total_ventasbv,
.total_ventasfv,
.total_ventasnv,
.tablero h1 span[style*="font-size"] {
    font-size: clamp(1rem, 2.5vw, 1.5rem) !important;
}

/* Headers de cards muy grandes */
@media (max-width: 575.98px) {
    .card-title {
        font-size: clamp(0.95rem, 3vw, 1.15rem);
    }

    .card-subtitle {
        font-size: 0.8rem;
    }
}

/* Inputs/selects con widths fijos: convertir a min-width */
.form-control[style*="width:"][style*="px"] {
    max-width: 100%;
}

/* Avatar / círculos con widths inline */
@media (max-width: 575.98px) {
    [style*="width: 70px"][style*="height: 70px"][style*="border-radius: 50%"] {
        width: 56px !important;
        height: 56px !important;
    }

    [style*="font-size: 32px"] {
        font-size: 24px !important;
    }
}

/* Sidebar items: más cómodos al tap en móvil */
@media (max-width: 991.98px) {
    .sidebar-nav ul li a {
        padding: 12px 14px;
    }
}

/* Focus visible: accesibilidad teclado --- */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Smooth scroll para anclas internas */
html {
    scroll-behavior: smooth;
}

/* Scrollbar discreta en webkit (mejor look en touch) */
@media (hover: hover) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* ============================================================
   FASE 8 — Pulido visual global (desktop + mobile)
   Aplica a TODAS las pantallas: cards, inputs, badges, tablas,
   empty states, focus, transiciones suaves.
   ============================================================ */

/* Cards: sombra suave en lugar del border duro */
.card {
    border: 1px solid #eef0f3;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
}

/* Inputs/selects: foco moderno (anillo discreto) */
.form-control:focus,
.bootstrap-select.show .btn,
.selectpicker:focus+.btn {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

/* Inputs floating-labels: bar inferior con color de marca al focus */
.floating-labels .form-control:focus~.bar:before,
.floating-labels .form-control:focus~.bar:after {
    background: #2563eb !important;
}

/* Botones: transición fluida y estados claros */
.btn {
    transition: all 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

/* Badges/labels más modernos: padding pareja y radio suave */
.label {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* DataTables: header más legible, filas con hover suave */
table.dataTable thead th {
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
}

table.dataTable tbody tr {
    transition: background-color 0.15s ease;
}

table.dataTable tbody tr:hover {
    background-color: #f8fafc !important;
}

/* DataTables empty state mejorado */
table.dataTable tbody td.dataTables_empty {
    padding: 3rem 1rem !important;
    color: #94a3b8 !important;
    font-style: normal;
    text-align: center !important;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

table.dataTable tbody td.dataTables_empty::before {
    content: "📋";
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.45;
}

/* Paginación DataTables más limpia */
.dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    margin: 0 2px !important;
    border: 1px solid transparent !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #2563eb !important;
}

/* Page titles más ligeros */
.page-titles {
    background: transparent;
    margin-bottom: 0.5rem;
}

.page-titles h4 {
    font-weight: 600;
    color: #1e293b;
}

.page-titles .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.8rem;
}

/* Dropdowns más prolijos */
.dropdown-menu {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding: 0.4rem;
}

.dropdown-item {
    border-radius: 5px;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    transition: background 0.12s ease;
}

.dropdown-item:hover {
    background: #f1f5f9;
}

/* Modales: header con accento sutil */
.modal-header {
    border-bottom: 1px solid #eef0f3;
}

.modal-footer {
    border-top: 1px solid #eef0f3;
}

/* Form-group margin uniforme (reemplaza m-b-40 hardcoded) */
.form-group {
    margin-bottom: 1.25rem;
}

.floating-labels .form-group {
    margin-bottom: 1.5rem;
}

/* Checkboxes: alinear con label correctamente */
.form-group input[type="checkbox"]+label {
    cursor: pointer;
    user-select: none;
}

/* Eliminar el outline azul fluo legacy en todos los inputs */
.form-control:focus {
    outline: none !important;
}

/* --- Fix dropdowns dentro de .table-responsive (no recortar) ---
   Cuando un dropdown se abre dentro de un contenedor con overflow:auto,
   Bootstrap por defecto lo recorta. La solución primaria es
   data-boundary="viewport" (Popper) en el botón, que reposiciona el menú
   en coords absolutas respecto al viewport. */
.dropdown-menu.show {
    z-index: 1050;
}

/* Backup: si el menú se abre y el navegador soporta :has(), dejamos que
   "salga" del contenedor verticalmente sin perder el scroll horizontal. */
@supports selector(:has(*)) {
    .table-responsive:has(.dropdown-menu.show) {
        overflow: visible;
    }
}

/* --- Modal de facturación (venta/orden) en mobile ---
   En pantallas pequeñas el footer con mensaje "¡Pago Completo!" + 2 botones
   se desbordaba horizontalmente. Lo apilamos y hacemos los botones full-width. */
@media (max-width: 575.98px) {
    .venta-modal-footer {
        padding: 0.5rem 0.75rem !important;
    }

    .venta-modal-footer .mensaje-pago-wrap {
        margin-bottom: 0.5rem;
    }

    .venta-modal-footer .mensaje-pago-wrap .mensajePago .font-30 {
        font-size: 1.25rem !important;
        line-height: 1.2;
    }

    .venta-modal-actions {
        display: flex !important;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .venta-modal-actions .btn {
        flex: 1 1 0;
        min-height: 44px;
        white-space: nowrap;
        font-weight: 600;
    }

    .venta-modal-actions .btn-pago {
        flex: 1.5 1 0;
    }
}

/* --- Modal venta/orden: tipo de documento y regularización en mobile ---
   La estructura usa <table> con label a la izquierda y botones a la derecha.
   En <576px eso causaba scroll horizontal. Apilamos en bloque vertical. */
@media (max-width: 575.98px) {

    /* La tabla de tipo de documento dentro de #modal-facturar */
    #modal-facturar .table thead tr,
    #modal-facturar #tabla-regularizacion thead tr {
        display: flex;
        flex-direction: column;
    }

    #modal-facturar .table thead th {
        display: block;
        width: 100% !important;
        padding: 0.5rem 0.75rem !important;
        border-top: none !important;
    }

    /* Botones de tipo doc full-width, texto sin partir */
    #modal-facturar .btn-group-toggle {
        width: 100% !important;
        display: flex;
    }

    #modal-facturar .btn-group-toggle .btn {
        flex: 1 1 0;
        font-size: 0.78rem;
        padding: 0.5rem 0.25rem;
        line-height: 1.1;
        white-space: normal;
        min-height: 44px;
    }

    /* Header de la modal con texto truncado en mobile */
    #modal-facturar .modal-header h3,
    #modal-facturar .modal-header h4 {
        font-size: 1rem;
    }

    /* Evitar overflow horizontal global del modal y limitar alto para que el
       footer (botones Pagar / Cancelar) quede siempre visible sin scrollear
       toda la página. */
    #modal-facturar .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
        height: calc(100vh - 1rem);
        display: flex;
        align-items: stretch;
    }

    #modal-facturar .modal-content {
        max-height: calc(100vh - 1rem);
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #modal-facturar .modal-body {
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1 1 auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    #modal-facturar .modal-footer,
    #modal-facturar .venta-modal-footer {
        flex: 0 0 auto;
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 5;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
    }
}

/* --- Print: ocultar UI no necesaria --- */
@media print {

    .left-sidebar,
    .topbar,
    .footer,
    .btn,
    .no-print {
        display: none !important;
    }

    #main-wrapper,
    .page-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }
}