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

:root {
    --negro: #14151a;
    --negro-suave: #202229;
    --amarillo: #f0b429;
    --ambar-oscuro: #c6870c;
    --acero: #5b6472;
    --acero-claro: #87909c;
    --fondo: #f2f1ec;
    --borde: #dcdad2;
    --blanco: #ffffff;
    --verde-ok: #1e7e34;
    --verde-ok-bg: #e3f3e6;
    --rojo-stop: #c0392b;
    --rojo-stop-bg: #fbe9e7;
    --ambar-bg: #fdf1d8;
    --fuente-display: 'Oswald', 'Arial Narrow', sans-serif;
    --fuente-texto: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --radio: 8px;
    --sombra: 0 1px 3px rgba(20,21,26,.08), 0 1px 2px rgba(20,21,26,.06);
    --sombra-media: 0 6px 20px rgba(20,21,26,.12);
}

* { box-sizing: border-box; }

body {
    font-family: var(--fuente-texto);
    background: var(--fondo);
    color: var(--negro);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--fuente-display); }

/* Números tabulares: montos, cantidades y códigos alineados como una planilla real */
.valor-total-celda, .totales strong, .stat-valor,
.items-table td:nth-child(2), .items-table input[type="number"],
td.num, .paginacion-info {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 3px solid rgba(240,180,41,.55);
    outline-offset: 1px;
}

/* ---------- Login ---------- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(240,180,41,.06), transparent 40%),
        linear-gradient(160deg, var(--negro) 0%, #1f212a 55%, #26282f 100%);
}
.login-box {
    background: var(--blanco);
    padding: 44px 38px 38px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-media), 0 30px 60px rgba(0,0,0,.35);
    width: 100%;
    max-width: 368px;
    text-align: center;
    animation: aparecer .35s ease;
    border-top: 4px solid var(--amarillo);
}
@keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.login-logo { width: 86px; margin-bottom: 14px; filter: drop-shadow(0 4px 14px rgba(240,180,41,.25)); }
.login-box h1 {
    font-size: 21px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .5px;
    font-weight: 600;
}
.login-sub {
    color: var(--acero); margin: 0 0 24px; font-size: 13px;
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;
}
.login-form { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 12px; font-weight: 600; margin-top: 8px; text-transform: uppercase; letter-spacing: .4px; color: var(--acero); }
.login-form input {
    padding: 11px 12px; border: 1px solid var(--borde); border-radius: 6px; font-size: 14px;
    font-family: var(--fuente-texto);
    transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
    outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(240,180,41,.25);
}
.login-form button {
    margin-top: 20px; padding: 13px; border: none; border-radius: 6px;
    background: var(--negro); color: var(--amarillo); font-weight: 700; cursor: pointer;
    font-family: var(--fuente-display); text-transform: uppercase; letter-spacing: 1px; font-size: 14px;
    transition: background .15s, transform .1s;
}
.login-form button:hover:not(:disabled) { background: #000; }
.login-form button:active:not(:disabled) { transform: scale(.98); }
.login-form button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--negro);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* Firma visual: cinta de advertencia de bodega, una sola franja por pantalla */
.topbar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 5px;
    background: repeating-linear-gradient(
        135deg,
        var(--amarillo) 0px, var(--amarillo) 14px,
        var(--negro) 14px, var(--negro) 28px
    );
}
.topbar-logo { width: 38px; }
.topbar h1 {
    font-size: 17px; margin: 0; flex: 1; font-weight: 600;
    text-transform: uppercase; letter-spacing: .6px;
}
.topbar-user { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.topbar-user span {
    color: var(--acero-claro); margin-right: 8px; font-size: 12px;
    text-transform: uppercase; letter-spacing: .4px;
}
.topbar-user a {
    color: #d9dbe0; text-decoration: none; padding: 6px 10px; border-radius: 5px;
    transition: background .15s, color .15s;
    font-family: var(--fuente-display); text-transform: uppercase; letter-spacing: .4px; font-size: 12.5px;
    display: inline-flex; align-items: center; gap: 5px;
}
.topbar-user a:hover { background: rgba(240,180,41,.15); color: var(--amarillo); }
.topbar-user a.activo { background: var(--amarillo); color: var(--negro); font-weight: 700; }
.topbar-user a:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }

/* Botón hamburguesa: oculto en desktop, visible solo en mobile (ver media query) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
}
.menu-toggle:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }

.icono-svg { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.btn { display: inline-flex; align-items: center; gap: 5px; }

/* Botones de exportar (Excel/PDF) mientras "generan" el archivo */
.btn.btn-cargando { opacity: .7; pointer-events: none; }
.btn-spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: girar-spinner .6s linear infinite;
    flex-shrink: 0;
}
@keyframes girar-spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn-spinner { animation: none; }
}

/* ---------- Layout general ---------- */
.container { max-width: 980px; margin: 30px auto 24px; padding: 0 16px 60px; }

/* Variante más ancha para vistas con tablas de muchas columnas (ej. Clientes) */
.container-ancho { max-width: 1500px; }
@media (max-width: 700px) {
    .container-ancho { max-width: 100%; }
}


.card {
    background: var(--blanco);
    border-radius: var(--radio);
    padding: 22px 26px;
    margin-bottom: 20px;
    box-shadow: var(--sombra);
    border-left: 3px solid transparent;
    transition: box-shadow .2s, border-color .2s, transform .2s;
    animation: card-entrada .35s ease backwards;
}
.card:hover { box-shadow: 0 4px 16px rgba(20,21,26,.11), 0 1px 3px rgba(20,21,26,.08); border-left-color: rgba(240,180,41,.4); }
@keyframes card-entrada { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.container > .card:nth-of-type(1) { animation-delay: .02s; }
.container > .card:nth-of-type(2) { animation-delay: .06s; }
.container > .card:nth-of-type(3) { animation-delay: .10s; }
.container > .card:nth-of-type(4) { animation-delay: .14s; }
.container > .card:nth-of-type(n+5) { animation-delay: .16s; }
.card h2 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--negro);
    border-bottom: 2px solid var(--amarillo);
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card h2 .icono-svg { flex-shrink: 0; }

/* ---------- Mini gráfico de barras (facturación mensual, dashboard) ---------- */
.mini-chart-barras {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 180px;
    padding: 10px 4px 0;
}
.mini-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}
.mini-chart-valor {
    font-size: 10.5px;
    color: var(--acero);
    margin-bottom: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mini-chart-barra {
    width: 100%;
    max-width: 46px;
    background: linear-gradient(180deg, var(--amarillo), #d99f1f);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: filter .15s;
}
.mini-chart-barra:hover { filter: brightness(1.1); }
.mini-chart-label {
    margin-top: 8px;
    font-size: 11px;
    color: var(--acero);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-family: var(--fuente-display);
}
@media (max-width: 700px) {
    .mini-chart-barras { height: 150px; gap: 6px; }
    .mini-chart-valor { font-size: 9px; }
}

/* ---------- Dashboard / tarjetas resumen ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
    background: var(--blanco); border-radius: var(--radio); padding: 18px 20px;
    box-shadow: var(--sombra); border-left: 4px solid var(--amarillo);
    transition: transform .15s, box-shadow .15s;
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px;
    background: radial-gradient(circle at top right, rgba(240,180,41,.10), transparent 70%);
    pointer-events: none;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }
.stat-card .stat-valor {
    font-family: var(--fuente-display); font-size: 26px; font-weight: 600; color: var(--negro); line-height: 1.2;
}
.stat-card .stat-label { font-size: 11.5px; color: var(--acero); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; font-weight: 500; }

/* Scrollbar fina en navegadores compatibles, para tablas y menú móvil */
.tabla-scroll, .topbar-user {
    scrollbar-width: thin; scrollbar-color: var(--acero-claro) transparent;
}
.tabla-scroll::-webkit-scrollbar { height: 7px; }
.tabla-scroll::-webkit-scrollbar-thumb { background: var(--acero-claro); border-radius: 4px; }
.tabla-scroll::-webkit-scrollbar-track { background: transparent; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.form-group label { font-size: 11.5px; font-weight: 600; color: var(--acero); text-transform: uppercase; letter-spacing: .4px; }
.form-group input, .form-group select, .form-group textarea {
    padding: 10px 11px; border: 1px solid var(--borde); border-radius: 6px; font-size: 14px;
    font-family: var(--fuente-texto); background: var(--blanco); color: var(--negro);
    transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { resize: vertical; min-height: 60px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(240,180,41,.2);
}
.autocomplete-wrap { position: relative; }
.sugerencias {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: var(--blanco); border: 1px solid var(--borde); border-top: none;
    border-radius: 0 0 6px 6px; max-height: 220px; overflow-y: auto;
    box-shadow: var(--sombra-media);
}
.sugerencia-item { padding: 9px 11px; cursor: pointer; font-size: 13px; transition: background .1s; border-bottom: 1px solid var(--fondo); }
.sugerencia-item:last-child { border-bottom: none; }
.sugerencia-item:hover { background: var(--ambar-bg); }

/* ---------- Tabla de ítems ---------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; border-radius: 6px; }
.items-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.items-table th {
    background: var(--negro); color: var(--amarillo);
    font-family: var(--fuente-display); font-weight: 500;
    font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase;
    padding: 10px 8px; text-align: left; white-space: nowrap;
}
.th-orden { color: inherit; text-decoration: none; cursor: pointer; }
.th-orden:hover { text-decoration: underline; }
.items-table td { padding: 5px 10px 5px 5px; border-bottom: 1px solid var(--borde); font-size: 13.5px; }

/* Columnas de dato corto (folio, fecha, rut, montos, estado, etc.): siempre en una
   sola línea. Las columnas de texto largo (razón social, cliente, acciones) se
   excluyen a propósito para que sigan pudiendo hacer salto de línea normal. */
.items-table td[data-label="Folio"],
.items-table td[data-label="Tipo"],
.items-table td[data-label="Fecha"],
.items-table td[data-label="RUT Receptor"],
.items-table td[data-label="RUT"],
.items-table td[data-label="Monto total"],
.items-table td[data-label="Por pagar"],
.items-table td[data-label="Estado"],
.items-table td[data-label="N°"],
.items-table td[data-label="Total"],
.items-table td[data-label="Vigencia"],
.items-table td[data-label="Vendedor"],
.items-table td[data-label="N° cotizaciones"],
.items-table td[data-label="Teléfono"],
.items-table td[data-label="Correo"],
.items-table td[data-label="Ciudad"],
.items-table td[data-label="Comuna"],
.items-table td[data-label="Región"],
.items-table th {
    white-space: nowrap;
}
.items-table tbody tr { transition: background .12s; }
.items-table tbody tr:nth-child(even) { background: #fbfaf7; }
.items-table tbody tr:hover { background: var(--ambar-bg); }
.items-table input {
    width: 100%; padding: 7px 8px; border: 1px solid var(--borde); border-radius: 4px; font-size: 13px;
    font-family: var(--fuente-texto);
    transition: border-color .15s, box-shadow .15s;
}
.items-table input:focus {
    outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 2px rgba(240,180,41,.2);
}
.items-table .input-cant, .items-table .input-valor { text-align: right; }
.valor-total-celda { text-align: right; font-weight: 600; padding-right: 10px; white-space: nowrap; }
.btn-eliminar-fila {
    background: none; border: none; color: var(--rojo-stop); font-size: 16px; cursor: pointer;
    border-radius: 4px; width: 28px; height: 28px; transition: background .15s;
}
.btn-eliminar-fila:hover { background: var(--rojo-stop-bg); }

.totales { margin-top: 14px; margin-left: auto; width: 260px; }
.totales div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: var(--acero); }
.totales .total-final {
    border-top: 2px solid var(--negro); margin-top: 4px; padding-top: 10px;
    font-size: 19px; font-weight: 700; color: var(--negro);
}
.totales .total-final span { font-family: var(--fuente-display); text-transform: uppercase; letter-spacing: .5px; font-size: 14px; align-self: center; color: var(--negro); }

/* ---------- Botones ---------- */
.btn {
    display: inline-block; padding: 11px 20px; border-radius: 6px; border: none;
    cursor: pointer; font-weight: 600; font-size: 13px; text-decoration: none;
    font-family: var(--fuente-display); text-transform: uppercase; letter-spacing: .6px;
    transition: background .15s, transform .1s, box-shadow .15s;
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
.btn-primary { background: var(--negro); color: var(--amarillo); }
.btn-primary:hover:not(:disabled) { background: #000; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.btn-primary:active:not(:disabled) { transform: scale(.98); }
.btn-primary:disabled { opacity: .75; cursor: not-allowed; }
.btn-primary:disabled::before {
    content: ""; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(240,180,41,.35); border-top-color: var(--amarillo);
    animation: girar .7s linear infinite; margin-right: 2px;
}
@keyframes girar { to { transform: rotate(360deg); } }
.btn-outline { background: var(--blanco); border: 1px solid var(--negro); color: var(--negro); }
.btn-outline:hover { background: var(--negro); color: var(--amarillo); }
.btn-small { padding: 6px 13px; font-size: 11px; margin-left: 8px; }

/* ---------- Alertas ---------- */
.alert {
    padding: 13px 18px; border-radius: 6px; margin-bottom: 18px; font-size: 14px;
    animation: aparecer .25s ease; border-left: 4px solid transparent;
}
.alert-error { background: var(--rojo-stop-bg); color: var(--rojo-stop); border-left-color: var(--rojo-stop); }
.alert-ok { background: var(--verde-ok-bg); color: var(--verde-ok); border-left-color: var(--verde-ok); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Estado vacío ---------- */
.estado-vacio { text-align: center; padding: 44px 20px; color: var(--acero-claro); }
.estado-vacio .icono {
    font-size: 38px; margin-bottom: 14px; opacity: .8; color: var(--acero-claro);
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--fondo); border: 1.5px dashed var(--borde);
}
.estado-vacio p { font-size: 14px; margin: 0; max-width: 340px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* Versión compacta, para usar dentro de paneles chicos (ej. desglose de estadísticas) */
.estado-vacio-mini { text-align: center; padding: 26px 16px; color: var(--acero-claro); }
.estado-vacio-mini .icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--fondo); border: 1.5px dashed var(--borde);
    margin-bottom: 8px; color: var(--acero-claro);
}
.estado-vacio-mini p { font-size: 13px; margin: 0; }

/* ---------- Paginación ---------- */
.paginacion { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.paginacion-info { font-size:12.5px; color: var(--acero); text-transform: uppercase; letter-spacing: .4px; }

@media (max-width: 700px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .topbar { flex-wrap: wrap; padding: 10px 16px; position: relative; }
    .topbar h1 { flex-basis: auto; margin-top: 0; }
    .container { margin-top: 26px; padding-bottom: 90px; }

    /* Menú hamburguesa: botón visible, lista de enlaces colapsada en panel */
    .menu-toggle { display: flex; }
    .topbar-user {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--negro);
        padding: 10px 14px 16px;
        box-shadow: 0 10px 20px rgba(0,0,0,.3);
        z-index: 35;
    }
    .topbar.menu-abierto .topbar-user { display: flex; }
    .topbar-user span { margin: 4px 0 6px; }
    .topbar-user a { justify-content: flex-start; }

    /* Objetivos táctiles más grandes (mínimo ~44px recomendado) */
    .btn { padding: 13px 20px; font-size: 13.5px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-small { padding: 10px 14px; font-size: 12px; min-height: 40px; margin: 3px 4px 3px 0; }
    .topbar-user a { padding: 11px 12px; font-size: 13.5px; min-height: 44px; display: flex; align-items: center; }
    .form-group input, .form-group select, .form-group textarea { padding: 12px; font-size: 15px; }
    .items-table input { padding: 10px 8px; font-size: 14px; }
    .btn-eliminar-fila { width: 38px; height: 38px; font-size: 18px; }
    .btn-generar-normal { display: none; }

    /* Barra fija inferior para generar la cotización sin bajar hasta el final */
    .barra-fija-movil {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
        background: var(--blanco); padding: 10px 14px;
        box-shadow: 0 -4px 14px rgba(20,21,26,.15);
        display: flex; gap: 10px;
    }
    .barra-fija-movil .btn { flex: 1; margin: 0; }
    body.tiene-barra-fija .container { padding-bottom: 100px; }
}

@media (min-width: 701px) {
    .barra-fija-movil { display: none; }
}

/* ---------- Tablas como tarjetas en móvil (listado y clientes) ---------- */
@media (max-width: 700px) {
    .tabla-card-movil thead { display: none; }
    .tabla-card-movil, .tabla-card-movil tbody, .tabla-card-movil tr, .tabla-card-movil td { display: block; width: 100%; }
    .tabla-card-movil { min-width: 0; }
    .tabla-card-movil tr {
        background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px;
        margin-bottom: 12px; padding: 12px 14px; box-shadow: var(--sombra);
        border-left: 3px solid var(--amarillo);
    }
    .tabla-card-movil td {
        border: none; padding: 7px 0; display: flex; justify-content: space-between;
        align-items: center; gap: 12px; font-size: 13.5px; text-align: right;
    }
    .tabla-card-movil td::before {
        content: attr(data-label); font-weight: 600; color: var(--acero);
        font-family: var(--fuente-display); text-transform: uppercase; font-size: 10.5px;
        letter-spacing: .4px; flex-shrink: 0; text-align: left;
    }
    .tabla-card-movil td.celda-acciones {
        flex-direction: column; align-items: flex-stretch; text-align: left; gap: 8px;
    }
    .tabla-card-movil td.celda-acciones::before { margin-bottom: 2px; }
    .tabla-card-movil td.celda-acciones .btn { margin: 3px 4px 3px 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Gráfico de barras (estadísticas) ---------- */
.bar-chart { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.bar-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 12px; }
.bar-label { font-size: 12.5px; font-weight: 600; color: var(--negro); text-transform: uppercase; letter-spacing: .3px; }
.bar-track { background: var(--fondo); border-radius: 5px; height: 16px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px 0 0 5px; transition: width .5s ease; min-width: 3px; }
.bar-valor { font-size: 13px; font-weight: 600; color: var(--negro); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .bar-row { grid-template-columns: 1fr; gap: 4px; }
    .bar-valor { text-align: right; }
}

.oculta { display: none !important; }

/* ---------- Badges de estado (reutilizable) ---------- */
.badge {
    display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 600;
    font-family: var(--fuente-display); text-transform: uppercase; letter-spacing: .5px;
}
.badge-pendiente { background: var(--ambar-bg); color: #8a5a00; }
.badge-pagado, .badge-aprobada { background: var(--verde-ok-bg); color: var(--verde-ok); }
.badge-abonado { background: #e8ecf5; color: #2c4a9e; }
.badge-rechazada { background: #fbe9e7; color: var(--rojo-stop); }
/* Estados de Órdenes de Compra */
.badge-recibida { background: var(--verde-ok-bg); color: var(--verde-ok); }
.badge-anulada { background: #ecebe7; color: #6b6b6b; }
/* Tipo de documento (Facturas y Compras) */
.badge-tipo1 { background:#e3f3e6; color:#1e7e34; }
.badge-tipo2 { background:#fdf1d8; color:#8a5a00; }
.badge-tipo3 { background:#e8ecf5; color:#2c4a9e; }
select.select-estado { font-size:12px; padding:4px; border-radius:4px; border:1px solid #dcdad2; }
/* Botón "Subir PDF" dentro de tablas (Facturas y Compras) */
.subir-pdf-label { cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.subir-pdf-form { display:inline; }
.subir-pdf-form input[type="file"] {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.aviso-scroll-movil { display: none; }
@media (max-width: 700px) {
    .aviso-scroll-movil {
        display: block; text-align: center; font-size: 11px; color: var(--acero-claro);
        text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px;
    }
}
.items-table .input-descuento { text-align: right; }

/* ---------- No permitir seleccionar como texto elementos clicables ---------- */
.btn-eliminar-fila, .topbar-user a, .login-form button, .sugerencia-item,
.badge, .topbar-logo, .login-logo, label {
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}

/* ---------- Impresión limpia (listado y clientes) ---------- */
@media print {
    body { background: #fff; }
    .topbar, .barra-fija-movil, .btn, form:not(.tabla-impresion), .paginacion,
    .celda-acciones, .no-imprimir, .aviso-scroll-movil {
        display: none !important;
    }
    .card, .stat-card { box-shadow: none; border: none; padding: 0; margin-bottom: 18px; border-left: none; }
    .container { margin: 0; padding: 0; max-width: 100%; }
    .items-table th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tabla-card-movil, .tabla-card-movil tbody, .tabla-card-movil tr, .tabla-card-movil td { display: table-row-group !important; }
    .tabla-card-movil thead { display: table-header-group !important; }
    .tabla-card-movil tr { display: table-row !important; border: none; box-shadow: none; margin: 0; }
    .tabla-card-movil td { display: table-cell !important; border-bottom: 1px solid #ddd !important; }
    .tabla-card-movil td::before { content: none !important; }
}

/* ---------- Tablas ordenables / filtrables por columna (estadísticas) ---------- */
.tabla-filtrable th.th-ordenable { cursor: pointer; user-select: none; position: relative; padding-right: 16px; }
.tabla-filtrable th.th-ordenable:hover { color: #fff; }
.tabla-filtrable th.th-ordenable::after { content: '⇅'; opacity: .5; margin-left: 4px; font-size: 10px; }
.tabla-filtrable th.th-asc::after { content: '↑'; opacity: 1; }
.tabla-filtrable th.th-desc::after { content: '↓'; opacity: 1; }
.fila-filtro-columnas th.th-filtro {
    background: #fbfaf7; padding: 4px 6px; border-bottom: 2px solid var(--borde);
}
.fila-filtro-columnas input {
    width: 100%; box-sizing: border-box; padding: 5px 6px; border: 1px solid var(--borde);
    border-radius: 4px; font-size: 12px; font-weight: 400; text-transform: none;
    letter-spacing: normal; font-family: var(--fuente-texto);
}
.fila-filtro-columnas input:focus { outline: none; border-color: var(--amarillo); box-shadow: 0 0 0 2px rgba(240,180,41,.2); }

/* ---------- Desglose por producto → cliente ---------- */
.tabla-desglose-producto tbody tr.fila-producto { cursor: pointer; }
.tabla-desglose-producto tbody tr.fila-producto:hover { background: var(--ambar-bg); }
.tabla-desglose-producto tbody tr.fila-producto td:first-child::after { content: ' ↗'; color: var(--acero-claro); }
.fila-desglose td { padding: 10px 12px 14px; background: #fbfaf7; border-bottom: 1px solid var(--borde); }
.desglose-wrap { overflow-x: auto; }
.desglose-cargando, .desglose-vacio, .desglose-error { font-size: 12.5px; color: var(--acero); margin: 4px 0; }
.desglose-error { color: var(--rojo-stop); }
.tabla-desglose-interna { min-width: 0; }
.tabla-desglose-interna th { background: #26282f; font-size: 10.5px; }

/* ---------- Estadísticas de Compras: variación de precios y participación ---------- */
/* Para compras, un alza de precio es mala (rojo) y una baja es buena (verde). */
.variacion-alza, tr.variacion-alza td { color: var(--rojo-stop); font-weight: 600; }
.variacion-baja { color: var(--verde-ok); font-weight: 600; }
.barra-participacion {
    display: inline-block; vertical-align: middle; width: 70px; height: 8px; margin-right: 6px;
    background: #ecebe7; border-radius: 4px; overflow: hidden;
}
.barra-participacion span { display: block; height: 100%; background: var(--amarillo); }
.precio-destacado { background: var(--verde-ok-bg); }

/* ---------- Ajuste manual de montos (cotización, OC, factura, compra) ---------- */
.ajuste-montos { margin-top: 14px; border-top: 1px dashed var(--borde); padding-top: 12px; }
.ajuste-ayuda { font-size: 12.5px; color: var(--acero); margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.totales-ajustados { outline: 2px solid var(--amarillo); outline-offset: 4px; border-radius: 4px; }
.totales-ajustados::before { content: 'Montos ajustados a mano'; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #8a5a00; margin-bottom: 4px; }

/* ---------- Cuadratura de ítems vs documento (facturas y compras) ---------- */
.cuadratura { margin-top: 12px; padding: 10px 12px; border-radius: 6px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cuadratura-ok { background: var(--verde-ok-bg); color: var(--verde-ok); }
.cuadratura-ok #btn-usar-total-items { display: none; }
.cuadratura-dif { background: var(--ambar-bg); color: #7a5400; }

/* ---------- Órdenes de compra asociadas a una factura ---------- */
.lista-oc { max-height: 280px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 6px; }
.fila-oc { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--borde); cursor: pointer; font-size: 13.5px; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0; }
.fila-oc:last-child { border-bottom: 0; }
.fila-oc:hover { background: var(--ambar-bg); }
.fila-oc input { width: auto; }
.oc-num { font-weight: 600; min-width: 92px; }
.oc-prov { flex: 1 1 180px; }
.oc-fecha, .oc-monto { color: var(--acero); font-variant-numeric: tabular-nums; }
.margen-oc { font-size: 13.5px; margin: 10px 0 0; }
.vacio-oc { font-size: 13px; color: var(--acero); }

/* ---------- Trazabilidad entre documentos ---------- */
.traza { font-size: 11.5px; color: var(--acero); margin-top: 3px; }
.origen-documento { font-size: 13.5px; background: #fff; border: 1px solid var(--borde); border-radius: 6px; padding: 10px 12px; }

/* ---------- App instalable (PWA) y login ---------- */
.alert-aviso { background: var(--ambar-bg); border: 1px solid #ffca28; color: #7a5b00; }
.login-instalar { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--acero); }
.instalar-box { max-width: 520px; text-align: left; }
.instalar-box > .login-logo, .instalar-box > h1, .instalar-box > .login-sub { display: block; text-align: center; margin-left: auto; margin-right: auto; }
.instalar-paso { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.instalar-paso h2 { font-size: 15px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.instalar-paso ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.instalar-destacado { border-color: var(--amarillo); background: var(--ambar-bg); }
.instalar-nota { font-size: 12.5px; color: var(--acero); margin: 12px 0 16px; }
.btn-instalar { width: 100%; margin: 6px 0; }
.btn-atras {
    background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 6px;
    width: 40px; height: 40px; font-size: 26px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.btn-atras:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }
#filtro-oc { width: 100%; box-sizing: border-box; }

/* ---------- Ajustes para celular (app) ---------- */
/* Las columnas de formularios pueden achicarse más que el ancho natural de un campo. */
.grid-2 > *, .grid-3 > * { min-width: 0; }
/* Títulos de tarjeta con botones: pasan a una segunda línea si no caben. */
.card h2 { flex-wrap: wrap; }
@media (max-width: 700px) {
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
/* Lo marcado como oculto (atributo hidden) se oculta siempre, aunque la clase defina otro display. */
[hidden] { display: none !important; }