/* =========================================================
   Dubai POS v0.23.3
   Legibilidad + responsive real para zoom del navegador
   ========================================================= */

/* Base tipográfica ligeramente mayor, sin perder densidad */
html {
    font-size: 16px;
}

body {
    font-size: 0.875rem;
    line-height: 1.38;
}

/* Navegación */
.brand-copy strong {
    font-size: 1rem;
}

.brand-copy small {
    font-size: 0.68rem;
}

.main-nav a {
    font-size: 0.84rem;
    padding: 0.55rem 0.72rem;
}

/* Encabezados */
.module-head h1,
.dashboard-head h1 {
    font-size: clamp(1.55rem, 2vw, 2rem);
    line-height: 1.08;
}

.module-head p,
.dashboard-head p {
    font-size: 0.84rem;
}

.eyebrow,
.panel-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* Formularios */
.field > span,
label.field > span {
    font-size: 0.73rem;
    font-weight: 700;
}

input,
select,
textarea,
button {
    font-size: 0.84rem;
}

input,
select {
    min-height: 2.25rem;
}

.btn {
    font-size: 0.78rem;
}

/* Tarjetas */
.mini-kpi span,
.kpi-card span {
    font-size: 0.72rem;
}

.mini-kpi strong,
.kpi-card strong {
    font-size: clamp(1rem, 1.35vw, 1.28rem);
}

.mini-kpi small,
.kpi-card small {
    font-size: 0.66rem;
}

/* Tablas */
.compact-table th,
.product-table th,
.sales-table th,
.receivable-table th,
.report-table th {
    font-size: 0.64rem !important;
}

.compact-table td,
.product-table td,
.sales-table td,
.receivable-table td,
.report-table td {
    font-size: 0.72rem !important;
}

.badge {
    font-size: 0.62rem;
}

/* =========================================================
   VENTAS
   ========================================================= */

.sale-layout {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    gap: 0.65rem;
}

.sale-main {
    min-width: 0;
}

.sale-side {
    min-width: 0;
}

.sale-summary-card {
    padding: 0.85rem;
}

.sale-summary-line span,
.sale-balance span {
    font-size: 0.75rem;
}

.sale-summary-line strong {
    font-size: 0.84rem;
}

.sale-summary-total span {
    font-size: 0.86rem;
}

.sale-summary-total strong {
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.sale-summary-card > small {
    font-size: 0.65rem;
}

.sale-dte-card strong {
    font-size: 0.76rem;
}

.sale-dte-card p {
    font-size: 0.68rem;
}

.sale-document-note strong {
    font-size: 0.75rem;
}

.sale-document-note span {
    font-size: 0.68rem;
}

.sale-search-row > small,
.sale-credit-help {
    font-size: 0.67rem;
}

.sale-product-result strong {
    font-size: 0.78rem;
}

.sale-product-result small {
    font-size: 0.66rem;
}

.sale-product-result i {
    font-size: 0.63rem;
}

.sale-product-result em {
    font-size: 0.68rem;
}

/* Evita que inputs/formularios ocupen todo el ancho cuando hay espacio */
.sale-grid {
    grid-template-columns: minmax(180px, 1.4fr) minmax(130px, .7fr) minmax(150px, .9fr) minmax(120px, .65fr);
    gap: 0.55rem;
}

.sale-grid .field-lg {
    grid-column: auto;
}

/* =========================================================
   RESPONSIVE POR ESPACIO REAL
   Importante para zoom 110%, 125%, 150%, etc.
   ========================================================= */

@media (max-width: 1280px) {
    .topbar {
        align-items: flex-start;
        gap: 0.6rem;
    }

    .main-nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.25rem;
    }

    .main-nav a {
        padding: 0.45rem 0.58rem;
    }

    .sale-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .sale-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sale-grid .field-lg {
        grid-column: auto;
    }
}

@media (max-width: 1080px) {
    /*
      A partir de aquí, especialmente con zoom aumentado,
      el panel de resumen deja de pelear por ancho y baja debajo.
    */
    .sale-layout {
        grid-template-columns: 1fr !important;
    }

    .sale-side {
        position: static !important;
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
        gap: 0.65rem;
    }

    .sale-summary-card,
    .sale-dte-card {
        min-width: 0;
    }

    .sale-summary-card {
        order: 1;
    }

    .sale-dte-card {
        order: 2;
    }
}

@media (max-width: 820px) {
    .container {
        width: 100%;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .topbar {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .sale-side {
        grid-template-columns: 1fr;
    }

    .sale-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sale-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sale-search-row > small {
        white-space: normal;
    }

    .sale-payment-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .sale-payment-reference {
        grid-column: 1 / -1;
    }

    .sale-credit-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .sale-credit-help,
    .sale-all-credit-btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    html {
        font-size: 15px;
    }

    .sale-grid {
        grid-template-columns: 1fr;
    }

    .sale-grid .field,
    .sale-grid .field-lg,
    .sale-grid .field-md,
    .sale-grid .field-sm {
        grid-column: auto !important;
    }

    .main-nav {
        width: 100%;
    }
}

/* =========================================================
   Otros módulos: mejora coherente de legibilidad
   ========================================================= */

.customer-table td,
.customer-table th,
.inventory-audit-table td,
.inventory-audit-table th,
.price-audit-table td,
.price-audit-table th {
    font-size: 0.72rem;
}

.customer-main-cell strong {
    font-size: 0.76rem;
}

.customer-main-cell small,
.customer-contact-cell small {
    font-size: 0.64rem;
}

.trace-list span {
    font-size: 0.68rem;
}

.trace-list strong {
    font-size: 0.72rem;
}

.credit-warning-card p,
.credit-summary-card p,
.receivable-no-session p {
    font-size: 0.67rem;
}

/* No forzar anchos mayores al viewport */
img,
table,
input,
select,
textarea {
    max-width: 100%;
}

.form-section,
.panel,
.toolbar-panel,
.sale-summary-card,
.sale-dte-card {
    min-width: 0;
}