/* =========================================================================
   SISTEMA DE COTIZACIÓN ONLINE — Design System
   -------------------------------------------------------------------------
   Dirección: minimalista, responsivo, estrictamente blanco y negro (escala
   de grises). Sin acentos de color en la interfaz: la jerarquía se logra
   con contraste, tipografía y espaciado. Los únicos colores que se
   conservan son los semánticos de estado (pendiente/aprobada/rechazada en
   los badges), porque ahí el color cumple una función de lectura rápida,
   no decorativa.
   La tabla de productos de "Ver cotización" se mantiene siempre como
   TABLA real (con scroll horizontal en pantallas chicas) en vez de
   convertirse en tarjetas apiladas, para verse mejor y comparar columnas
   de un vistazo.
   Único archivo modificado: ningún nombre de clase cambia, la funcionalidad
   PHP/JS no se toca.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    /* — Escala de grises (blanco y negro puros en los extremos) — */
    --gray-950: #0a0a0a;
    --gray-900: #141414;
    --gray-800: #1f1f1f;
    --gray-700: #333333;
    --gray-600: #4d4d4d;
    --gray-500: #737373;
    --gray-400: #a3a3a3;
    --gray-300: #cfcfcf;
    --gray-200: #e4e4e4;
    --gray-100: #f0f0f0;
    --gray-50:  #fafafa;
    --white:    #ffffff;
    --black:    #000000;

    /* Alias retro-compatibles (usados en todo el CSS existente) */
    --ink-900: var(--gray-950);
    --ink-800: var(--gray-800);
    --ink-700: var(--gray-700);
    --ink-600: var(--gray-600);
    --ink-500: var(--gray-500);
    --ink-400: var(--gray-400);
    --ink-300: var(--gray-300);
    --ink-200: var(--gray-200);
    --ink-100: var(--gray-100);
    --ink-50:  var(--gray-50);

    /* "Acento" = negro puro. Sin color: la interacción se marca con
       contraste (negro sólido) y con un anillo de foco translúcido. */
    --accent-900: var(--black);
    --accent-800: #171717;
    --accent-700: var(--gray-800);
    --accent-600: var(--gray-900);
    --accent-500: var(--gray-700);
    --accent-400: var(--gray-500);
    --accent-100: var(--gray-100);

    /* — Únicos colores del sistema: estado semántico — */
    --danger:     #b3261e;
    --danger-100: #f6e8e7;
    --warn:       #8a6314;
    --warn-100:   #f3ecd9;
    --ok:         #1e6b40;
    --ok-100:     #e6efe9;

    /* — Espaciado (4px base) — */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

    /* — Tipografía — */
    --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
    --text-lg: 18px; --text-xl: 21px; --text-2xl: 27px;

    --radius:    10px;
    --radius-sm: 7px;
    --radius-lg: 16px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-lg: 0 24px 56px rgba(0,0,0,0.22), 0 6px 16px rgba(0,0,0,0.09);
    --ring-accent: 0 0 0 3.5px rgba(0,0,0,0.12);

    --ease: cubic-bezier(.4,0,.2,1);
    --dur-fast: .13s;
    --dur: .18s;

    --font-head: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--gray-50);
    color: var(--gray-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    font-size: var(--text-base);
}

h1, h2, h3, h4, .brand {
    font-family: var(--font-head);
    color: var(--black);
    margin: 0;
    letter-spacing: -0.014em;
    line-height: 1.25;
}

a { color: var(--gray-900); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gray-300); transition: text-decoration-color var(--dur-fast) var(--ease); }
a:hover { text-decoration-color: var(--gray-900); }
a:focus-visible { outline: 2px solid var(--gray-900); outline-offset: 2px; border-radius: 2px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

::selection { background: var(--gray-800); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ==================== LAYOUT ==================== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 254px;
    background: var(--black);
    color: var(--gray-100);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    transform: translateX(0);
    transition: transform var(--dur) var(--ease);
    z-index: 40;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.sidebar .brand-block {
    padding: var(--sp-6) var(--sp-5);
    border-bottom: 1px solid rgba(255,255,255,0.09);
    display: flex;
    align-items: center;
    gap: 11px;
}

.sidebar .brand-block img { height: 30px; width: 30px; object-fit: contain; border-radius: 7px; background: #fff; }
.sidebar .brand-block .brand-name { font-size: var(--text-md); font-weight: 600; color: #fff; line-height: 1.25; }
.sidebar .brand-block .brand-role { font-size: 10.5px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }

.sidebar nav { padding: var(--sp-4) var(--sp-3); flex: 1; overflow-y: auto; }

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    color: var(--gray-400);
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 2px;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar nav a.active {
    background: #fff;
    color: var(--black);
    font-weight: 700;
}
.sidebar nav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.sidebar nav .icon { width: 18px; text-align: center; font-size: 15px; opacity: .9; }

.sidebar .sidebar-footer { padding: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.09); }
.sidebar .sidebar-footer .user-name { color: #fff; font-size: 13.5px; font-weight: 600; }
.sidebar .sidebar-footer .user-role { color: var(--gray-500); font-size: 11.5px; margin-bottom: var(--sp-2); }
.sidebar .logout-btn {
    display: block; text-align: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--gray-200);
    padding: 9px; border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 600;
    min-height: 38px;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar .logout-btn:hover { background: #fff; border-color: #fff; color: var(--black); }
.sidebar .logout-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.main-content { margin-left: 254px; flex: 1; min-width: 0; padding: var(--sp-6) var(--sp-8) 64px; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-6); gap: var(--sp-3);
}
.topbar h1 { font-size: var(--text-xl); font-weight: 700; }
.topbar .topbar-sub { color: var(--gray-500); font-size: 13.5px; margin-top: 3px; }

.menu-toggle {
    display: none;
    background: var(--black); color: #fff; border: none;
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    font-size: 16px; cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.menu-toggle:hover { background: var(--gray-700); }
.menu-toggle:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 39;
}

/* ==================== CARDS / PANELES ==================== */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    padding: var(--sp-5);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}
.stat-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 17px 19px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--gray-900); }
.stat-card .stat-label { font-size: var(--text-xs); color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-family: var(--font-head); font-size: var(--text-2xl); font-weight: 700; margin-top: 7px; color: var(--black); }
.stat-card .stat-accent { color: var(--gray-900); }

/* ==================== BOTONES ==================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
    padding: 10px 17px; min-height: 40px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
                transform .1s var(--ease);
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-accent); }

.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: var(--gray-800); }

.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { background: var(--gray-800); }

.btn-outline { background: #fff; color: var(--gray-800); border-color: var(--gray-300); }
.btn-outline:hover { border-color: var(--black); background: var(--gray-50); }

.btn-danger { background: #fff; color: var(--danger); border-color: var(--gray-300); }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-whatsapp { background: var(--gray-900); color: #fff; }
.btn-whatsapp:hover { background: var(--black); }

.btn-sm { padding: 6.5px 12px; font-size: var(--text-sm); min-height: 32px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ==================== FORMULARIOS ==================== */
.form-group { margin-bottom: var(--sp-4); }
.form-group label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); margin-bottom: 6px; letter-spacing: .01em; }
.form-control {
    width: 100%; padding: 10px 13px; font-size: 14px; font-family: var(--font-body);
    min-height: 40px;
    border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
    background: #fff; color: var(--black); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-control:hover { border-color: var(--gray-500); }
.form-control:focus { outline: none; border-color: var(--black); box-shadow: var(--ring-accent); }
.form-control:disabled { background: var(--gray-50); color: var(--gray-500); cursor: not-allowed; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: var(--text-xs); color: var(--gray-500); margin-top: 5px; }

/* ==================== LOGIN ==================== */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--black);
    padding: var(--sp-5);
}
.login-card {
    width: 100%; max-width: 384px; background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 34px 30px 30px;
    border-top: 3px solid var(--black);
}
.login-card .login-logo { text-align: center; margin-bottom: 6px; }
.login-card .login-logo img { height: 54px; width: 54px; object-fit: contain; border-radius: 13px; box-shadow: var(--shadow-sm); }
.login-card h2 { text-align: center; font-size: var(--text-xl); margin-top: 12px; font-weight: 700; }
.login-card .login-sub { text-align: center; color: var(--gray-500); font-size: 13px; margin-top: 4px; margin-bottom: var(--sp-6); }
.alert { padding: 11px 13px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: var(--sp-4); font-weight: 500; }
.alert-error { background: var(--danger-100); color: var(--danger); border: 1px solid #e3c6c3; }
.alert-success { background: var(--ok-100); color: var(--ok); border: 1px solid #c7dccd; }

/* ==================== TABLAS ==================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--gray-200); }
table.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; min-width: 640px; }
table.data-table th {
    background: var(--gray-50); color: var(--gray-700); text-align: left;
    padding: 12px 15px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 2px solid var(--black);
}
table.data-table td { padding: 12px 15px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); vertical-align: middle; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:nth-child(even) td { background: var(--gray-50); }
table.data-table tr:hover td { background: var(--gray-100); }

.badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3.5px 10px; border-radius: 999px;
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.badge-pendiente { background: var(--warn-100); color: var(--warn); }
.badge-gestion   { background: var(--gray-200); color: var(--gray-800); }
.badge-aprobada  { background: var(--ok-100); color: var(--ok); }
.badge-rechazada { background: var(--danger-100); color: var(--danger); }
.badge-rol-admin    { background: var(--black); color: #fff; }
.badge-rol-vendedor { background: var(--gray-200); color: var(--gray-800); }
.badge-rol-cliente  { background: var(--gray-100); color: var(--gray-600); }

/* ==================== CATÁLOGO / PRODUCTOS ==================== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.product-card {
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--black); }
.product-card .product-img {
    height: 140px; background: var(--gray-50); display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-bottom: 1px solid var(--gray-100);
}
.product-card .product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-card .product-img .no-img { color: var(--gray-400); font-size: 12px; }
.product-card .product-body { padding: 13px 15px 15px; flex: 1; display: flex; flex-direction: column; }
.product-card .product-name { font-weight: 600; font-size: 14px; color: var(--black); margin-bottom: 4px; }
.product-card .product-desc { font-size: var(--text-sm); color: var(--gray-500); margin-bottom: 10px; flex: 1; }
.product-card .product-price { font-family: var(--font-mono); font-weight: 700; color: var(--black); font-size: 15px; margin-bottom: 11px; }
.product-card .qty-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.product-card .qty-row input { width: 56px; text-align: center; padding: 7px 6px; min-height: 36px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-family: var(--font-mono); transition: border-color var(--dur-fast) var(--ease); }
.product-card .qty-row input:focus { outline: none; border-color: var(--black); box-shadow: var(--ring-accent); }

/* ==================== CARRITO ==================== */
.cart-panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 17px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.cart-item:last-child { border-bottom: none; }
.cart-item .ci-name { font-weight: 600; color: var(--gray-800); }
.cart-item .ci-meta { color: var(--gray-500); font-size: var(--text-xs); font-family: var(--font-mono); }
.cart-item .ci-remove { color: var(--danger); font-size: var(--text-xs); cursor: pointer; background: none; border: none; font-weight: 600; transition: opacity var(--dur-fast) var(--ease); }
.cart-item .ci-remove:hover { opacity: .7; }
.cart-item .ci-remove:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 13px; margin-top: var(--sp-2); border-top: 2px solid var(--black); }
.cart-total-row .ct-label { font-weight: 600; color: var(--gray-700); font-size: 14px; }
.cart-total-row .ct-value { font-family: var(--font-mono); font-weight: 700; font-size: 19px; color: var(--black); }
.empty-cart { text-align: center; padding: 26px 10px; color: var(--gray-400); font-size: 13px; }

/* ==================== DOCUMENTO DE COTIZACIÓN (para PDF) ==================== */
.quote-doc { background: #fff; padding: 34px; width: 780px; max-width: 100%; color: var(--black); font-family: var(--font-body); }
.quote-doc .qd-band { background: var(--black); color: #fff; padding: 24px 30px; border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.quote-doc .qd-band .qd-store { display: flex; align-items: center; gap: 13px; }
.quote-doc .qd-band .qd-store img { height: 44px; width: 44px; object-fit: contain; border-radius: 9px; background: #fff; }
.quote-doc .qd-band .qd-store-name { font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.quote-doc .qd-band .qd-store-meta { font-size: 11px; color: var(--gray-400); margin-top: 3px; }
.quote-doc .qd-band .qd-doc-title { text-align: right; }
.quote-doc .qd-band .qd-doc-title .t1 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-300); font-weight: 600; }
.quote-doc .qd-band .qd-doc-title .t2 { font-family: var(--font-mono); font-size: 15px; margin-top: 4px; font-weight: 600; }
.quote-doc .qd-body { border: 1px solid var(--gray-200); border-top: none; padding: 26px 30px; border-radius: 0 0 12px 12px; }
.quote-doc .qd-desc { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--gray-100); }
.quote-doc .qd-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.quote-doc .qd-meta-block .qd-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); font-weight: 700; margin-bottom: 5px; }
.quote-doc .qd-meta-block .qd-value { font-size: 13.5px; color: var(--black); font-weight: 500; }

/* Tabla de productos: SIEMPRE en modo tabla real (mejor comparación de
   columnas). En pantallas chicas se ve completa con scroll horizontal
   dentro de .quote-doc en vez de convertirse en tarjetas apiladas. */
.quote-doc table.qd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.quote-doc table.qd-table th {
    background: var(--black); color: #fff; text-align: left; padding: 10px 13px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
}
.quote-doc table.qd-table td { padding: 10px 13px; border-bottom: 1px solid var(--gray-100); }
.quote-doc table.qd-table tr:nth-child(even) td { background: var(--gray-50); }
.quote-doc table.qd-table td.num, .quote-doc table.qd-table th.num { text-align: right; font-family: var(--font-mono); }
.quote-doc .qd-totals { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }
.quote-doc .qd-totals-box { width: 220px; min-width: 180px; }
.quote-doc .qd-totals-box .qd-total-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.quote-doc .qd-totals-box .qd-grand { border-top: 2px solid var(--black); margin-top: 5px; padding-top: 11px; font-weight: 700; font-size: 17.5px; font-family: var(--font-mono); color: var(--black); }
.quote-doc .qd-footer { margin-top: var(--sp-8); padding-top: 15px; border-top: 1px dashed var(--gray-200); font-size: 11px; color: var(--gray-500); text-align: center; }

/* ==================== LAYOUTS DE DOS COLUMNAS ==================== */
.quote-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-5); align-items: start; }
.cotizar-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-5); align-items: start; }

/* ==================== UTILIDADES ==================== */
.text-muted { color: var(--gray-500); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: var(--sp-2); }
.gap-12 { gap: var(--sp-3); }
.mt-16 { margin-top: var(--sp-4); }
.mb-16 { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }
.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

.empty-state { text-align: center; padding: 54px 20px; color: var(--gray-400); }
.empty-state .empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gray-100); color: var(--gray-700); font-size: 26px; margin-bottom: var(--sp-3);
}

/* Paginador */
.paginador { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.paginador-info { font-size: 13px; color: var(--gray-500); font-weight: 600; white-space: nowrap; }

/* Buscador */
.search-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.search-bar .form-control { max-width: 280px; }

/* ==================== MODAL ==================== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-4);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-box {
    background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border-top: 3px solid var(--black);
    transform: translateY(14px) scale(.98); transition: transform var(--dur) var(--ease);
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-header { padding: 19px 22px; border-bottom: 1px solid var(--gray-100); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 19px; cursor: pointer; color: var(--gray-500); line-height: 1; padding: 4px; transition: color var(--dur-fast) var(--ease); }
.modal-close:hover { color: var(--black); }
.modal-close:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; border-radius: 4px; }
.modal-body { padding: 22px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .main-content { margin-left: 0; padding: var(--sp-4) var(--sp-4) 50px; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 860px) {
    .quote-layout, .cotizar-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .quote-doc { padding: 18px; }
    .quote-doc .qd-band { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .quote-doc .qd-band .qd-doc-title { text-align: left; }
    .quote-doc .qd-band .qd-store-name { font-size: 16px; }
    .quote-doc .qd-meta-grid { grid-template-columns: 1fr; }
    .quote-doc .qd-body { padding: 16px; }
    .quote-doc table.qd-table { font-size: 11.5px; }
    .quote-doc table.qd-table th, .quote-doc table.qd-table td { padding: 8px 9px; }
    .quote-doc .qd-totals-box { width: 100%; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .card { padding: var(--sp-4); }
    .login-card { padding: 28px 22px 24px; }
}

@media (max-width: 420px) {
    .stat-grid { grid-template-columns: 1fr; }
    .topbar h1 { font-size: 18px; }
}