/* ============================================================
   Tab ANÁLISIS (Ventas del día/mes/periodo) — rediseño ago-2026.
   Fiel al prototipo (design_handoff_tab_analisis, dirección 1a):
   tokens y tipografía propios, deliberadamente por fuera del
   theme MudBlazor del resto de la app.
   ============================================================ */

.an-root {
    --an-blue: #0B5ED7;
    --an-blue-dark: #0A3D8F;
    --an-blue-chart: #2E9BF5;
    --an-blue-bg: #EAF1FD;
    --an-bg: #F4F6FA;
    --an-surface: #FFFFFF;
    --an-border: #E3E8F0;
    --an-border-input: #D6DEE9;
    --an-line-soft: #EEF2F7;
    --an-line-soft-2: #F2F5F9;
    --an-text: #16202E;
    --an-text-2: #667487;
    --an-text-3: #8A94A3;
    --an-text-disabled: #B4BDC9;
    --an-text-disabled-2: #C0C7D2;
    --an-amber: #F2B544;
    --an-amber-text: #B87503;
    --an-amber-dark: #8A6A2C;
    --an-amber-darker: #4A3200;
    --an-amber-bg: #FDF3E0;
    --an-green: #0E8A5F;
    --an-bar-empty: #DFE5EE;
    --an-bar-empty-2: #E7EBF1;
    --an-red: #C0392B;
    --an-red-bg: #FBEAE8;

    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--an-text);
    background: var(--an-bg);
}

.an-root, .an-root * {
    box-sizing: border-box;
}

.an-mono {
    font-family: 'IBM Plex Mono', monospace;
}

.an-num {
    font-variant-numeric: tabular-nums;
}

/* ── Franja de filtros aplicados ─────────────────────────── */

.an-franja {
    padding: 14px 22px;
    background: var(--an-blue-bg);
    border-bottom: 1px solid #D3E2FA;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.an-franja-icon {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--an-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 1px;
}

.an-franja-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--an-blue-dark);
}

.an-franja-text b {
    font-weight: 600;
}

.an-franja-link {
    color: var(--an-blue);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}

/* ── Contenido / tarjetas ─────────────────────────────────── */

.an-content {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.an-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 12px;
    padding: 20px 22px;
}

.an-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.an-card-title {
    font-size: 16px;
    font-weight: 600;
}

.an-card-tag {
    font-size: 12.5px;
    color: var(--an-text-2);
}

.an-card-lectura {
    font-size: 13px;
    color: var(--an-text-2);
    line-height: 1.5;
    margin: 4px 0 18px;
}

.an-card-lectura b {
    font-weight: 600;
    color: var(--an-text);
}

.an-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.an-row-pagos-tickets {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 14px;
}

/* ── KPIs (módulo 1) ─────────────────────────────────────── */

.an-kpis, .an-kpis-desktop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.an-kpis-mobile {
    display: none;
}

.an-kpi {
    border-radius: 12px;
    padding: 18px;
}

.an-kpi--hero {
    background: var(--an-blue);
    color: #fff;
}

.an-kpi--white {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
}

.an-kpi-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--an-text-2);
}

.an-kpi--hero .an-kpi-label {
    color: rgba(255, 255, 255, .8);
    letter-spacing: .02em;
}

.an-kpi-value {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-top: 6px;
}

.an-kpi-sep {
    height: 1px;
    background: var(--an-line-soft);
    margin: 12px 0 10px;
}

.an-kpi--hero .an-kpi-sep {
    background: rgba(255, 255, 255, .25);
}

.an-kpi-lectura {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--an-text-2);
}

.an-kpi--hero .an-kpi-lectura {
    color: rgba(255, 255, 255, .9);
}

.an-kpi-lectura b {
    font-weight: 600;
    color: var(--an-text);
}

.an-kpi--hero .an-kpi-lectura b {
    color: #fff;
}

.an-kpi-pulso {
    display: flex;
    gap: 3px;
    margin: 14px 0 10px;
}

.an-pulso-cell {
    flex: 1;
    height: 22px;
    border-radius: 3px;
    background: var(--an-bar-empty);
}

.an-pulso-cell--on {
    background: var(--an-blue);
}

.an-kpi--hero .an-pulso-cell {
    height: 18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .28);
}

.an-kpi--hero .an-pulso-cell--on {
    background: #fff;
}

/* ── Composición del total (módulo 2) ────────────────────── */

.an-bar {
    display: flex;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    gap: 2px;
}

.an-bar-seg {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
}

.an-bar-seg--cobrado {
    background: var(--an-blue);
    color: #fff;
}

.an-bar-seg--desc {
    background: var(--an-amber);
    color: var(--an-amber-darker);
    justify-content: center;
    font-size: 11px;
}

.an-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--an-border);
    border: 1px solid var(--an-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}

.an-grid-cell {
    background: var(--an-surface);
    padding: 13px 15px;
}

.an-grid-cell-label {
    font-size: 11.5px;
    color: var(--an-text-2);
    font-weight: 500;
}

.an-grid-cell-value {
    font-size: 20px;
    font-weight: 600;
    margin-top: 3px;
}

.an-grid-cell-sub {
    font-size: 11.5px;
    color: var(--an-text-3);
    margin-top: 2px;
}

.an-value--amber {
    color: var(--an-amber-text);
}

.an-value--blue {
    color: var(--an-blue);
}

.an-value--green {
    color: var(--an-green);
}

/* ── Origen catálogo/manual (módulo 3) ───────────────────── */

.an-origen-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}

.an-origen-block {
    border-radius: 10px;
    padding: 16px 18px;
}

.an-origen-block--catalogo {
    background: var(--an-blue-bg);
}

.an-origen-block--manual {
    background: var(--an-amber-bg);
}

.an-origen-block-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.an-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
}

.an-dot--catalogo {
    background: var(--an-blue);
}

.an-dot--manual {
    background: var(--an-amber);
}

.an-origen-block-tipo {
    font-size: 14px;
    font-weight: 600;
}

.an-origen-block-sub {
    font-size: 12px;
    color: var(--an-text-2);
}

.an-origen-block-monto-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 12px;
}

.an-origen-block-monto {
    min-width: 0;
}

.an-origen-block-monto {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.an-origen-block-pct {
    font-size: 15px;
    font-weight: 600;
}

.an-origen-block-detalle {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--an-text-2);
}

.an-origen-block-nota {
    font-size: 12.5px;
    color: #4B5766;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.an-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 13px 15px;
    background: var(--an-amber-bg);
    border-radius: 9px;
}

.an-aviso-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--an-amber-text);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 1px;
}

.an-aviso-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--an-amber-darker);
}

.an-confirm {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 9px;
}

.an-confirm--catalogo {
    background: var(--an-blue-bg);
}

.an-confirm--manual {
    background: var(--an-bg);
}

.an-confirm-text {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.5;
}

.an-confirm--catalogo .an-confirm-text {
    color: var(--an-blue-dark);
}

.an-confirm--manual .an-confirm-text {
    color: #4B5766;
}

.an-confirm-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--an-text-2);
    margin-top: 11px;
}

/* ── Métodos de pago (módulo 4) ───────────────────────────── */

.an-pagos-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.an-pagos-fila-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 7px;
    gap: 10px;
}

.an-pagos-nombre {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
}

.an-pagos-nota {
    font-size: 11.5px;
    color: var(--an-text-3);
    font-weight: 400;
}

.an-pagos-montos {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex: none;
}

.an-pagos-monto {
    font-size: 15px;
    font-weight: 600;
}

.an-pagos-pct {
    font-size: 12.5px;
    color: var(--an-text-2);
    width: 52px;
    text-align: right;
}

.an-track {
    height: 10px;
    background: var(--an-line-soft);
    border-radius: 5px;
    overflow: hidden;
}

.an-track-fill {
    height: 10px;
    border-radius: 5px;
}

.an-pagos-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--an-line-soft);
}

.an-pagos-total-label {
    font-size: 13.5px;
    font-weight: 600;
}

.an-pagos-total-value {
    font-size: 17px;
    font-weight: 600;
}

.an-vacio-linea {
    font-size: 13px;
    color: var(--an-text-2);
}

/* ── Tamaño de ventas (módulo 5) ──────────────────────────── */

.an-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.an-tickets-fila {
    display: flex;
    align-items: center;
    gap: 12px;
}

.an-tickets-rango {
    width: 86px;
    flex: none;
    font-size: 12.5px;
    color: var(--an-text-2);
}

.an-tickets-track {
    flex: 1;
    height: 22px;
    background: var(--an-bg);
    border-radius: 5px;
    overflow: hidden;
}

.an-tickets-fill {
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(90deg, #BBD6F8, #6FB3F2 40%, #2E9BF5 70%, #0B5ED7);
}

.an-tickets-label {
    width: 72px;
    flex: none;
    font-size: 12.5px;
    font-weight: 500;
    text-align: right;
}

/* ── Series de tiempo (módulos 6/7) ───────────────────────── */

.an-serie-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--an-text-2);
    align-items: center;
}

.an-serie-legend-item {
    display: flex;
    gap: 6px;
    align-items: center;
}

.an-serie-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.an-serie-bars {
    display: flex;
    gap: 4px;
    padding-bottom: 2px;
    margin-top: 18px;
}

.an-serie-bar-col {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.an-serie-bar-monto {
    font-size: 11px;
    font-weight: 600;
    color: var(--an-blue);
    white-space: nowrap;
    flex: none;
}

/* El track ocupa lo que sobra de .an-serie-bar-col después de la etiqueta;
   la barra vive adentro con una altura en % relativa a ESTE track, no al
   riel completo — así el mismo % sirve para el riel de 150px de desktop y
   el de 80px/88px de celular sin que la barra se salga del contenedor. */
.an-serie-bar-track {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.an-serie-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--an-blue);
}

.an-serie-bar--empty {
    background: var(--an-bar-empty);
}

.an-serie-bar--hora {
    background: var(--an-blue-chart);
}

.an-serie-bar--hora.an-serie-bar--empty {
    background: var(--an-bar-empty-2);
}

.an-serie-labels {
    display: flex;
    gap: 4px;
    border-top: 1px solid var(--an-border);
    padding-top: 7px;
}

.an-serie-label {
    flex: 1;
    text-align: center;
    font-size: 10.5px;
    color: var(--an-text-3);
}

.an-serie-label--on {
    color: var(--an-blue);
}

.an-serie-hora-n {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--an-blue-chart);
}

/* ── Vendedores (módulo 8) ────────────────────────────────── */

.an-vendedores-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.an-vendedor-fila {
    display: flex;
    align-items: center;
    gap: 13px;
}

.an-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--an-blue-bg);
    color: var(--an-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex: none;
}

.an-vendedor-body {
    flex: 1;
    min-width: 0;
}

.an-vendedor-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 10px;
}

.an-vendedor-nombre {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.an-vendedor-monto {
    font-size: 14px;
    font-weight: 600;
    flex: none;
}

.an-vendedor-detalle {
    font-size: 11.5px;
    color: var(--an-text-3);
    margin-top: 6px;
}

/* ── Top productos (módulo 9) ─────────────────────────────── */

.an-top-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.an-top-fila-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 12px;
}

.an-top-info {
    font-size: 13.5px;
    display: flex;
    gap: 9px;
    align-items: center;
    min-width: 0;
}

.an-top-pos {
    font-size: 11px;
    color: var(--an-text-3);
    flex: none;
}

.an-top-nombre {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-chip-origen {
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 7px;
    flex: none;
}

.an-chip-origen--catalogo {
    color: var(--an-blue-dark);
    background: var(--an-blue-bg);
}

.an-chip-origen--manual {
    color: var(--an-amber-dark);
    background: var(--an-amber-bg);
}

.an-top-monto {
    font-size: 13.5px;
    font-weight: 600;
    flex: none;
}

.an-top-track {
    height: 7px;
    background: var(--an-line-soft);
    border-radius: 4px;
    overflow: hidden;
}

.an-top-fill {
    height: 7px;
    border-radius: 4px;
}

.an-top-fill--catalogo {
    background: var(--an-blue);
}

.an-top-fill--manual {
    background: var(--an-amber);
}

/* ── Dónde se vendió (módulo "sucursales") ────────────────── */

.an-dsv-head-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.an-dsv-toggle {
    display: flex;
    background: var(--an-line-soft);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.an-dsv-toggle-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--an-text-2);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.an-dsv-toggle-btn.is-active {
    background: var(--an-surface);
    color: var(--an-blue);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(11, 94, 215, .18);
}

.an-dsv-filtro-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 10px 12px;
    background: var(--an-blue-bg);
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--an-blue-dark);
}

.an-dsv-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 22px;
    align-items: start;
    margin-top: 4px;
}

.an-dsv-head-row {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--an-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--an-text-2);
    letter-spacing: .02em;
}

.an-dsv-row, .an-dsv-head-row {
    display: grid;
    grid-template-columns: 22px 26px 1fr 132px 96px 200px 52px;
    align-items: center;
    gap: 0;
}

.an-dsv-row {
    padding: 9px 0;
    border-bottom: 1px solid var(--an-line-soft);
    font-size: 13.5px;
}

.an-dsv-row:last-child {
    border-bottom: none;
}

.an-dsv-row.is-expandible {
    cursor: pointer;
}

.an-dsv-row:hover {
    background: #F7FAFF;
}

.an-dsv-row--caja {
    background: #F7FAFF;
    font-size: 13px;
}

.an-dsv-chevron {
    width: 10px;
    height: 6px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--an-text-disabled-2);
}

.an-dsv-chevron.is-open {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--an-blue);
    transform: rotate(0deg);
}

.an-dsv-chevron.is-hidden {
    visibility: hidden;
}

.an-dsv-pos {
    font-size: 11px;
    color: var(--an-text-disabled);
}

.an-dsv-nombre {
    font-weight: 600;
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-dsv-nombre.is-cero {
    font-weight: 400;
    color: var(--an-text-3);
}

.an-dsv-nombre-caja {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 12px;
    color: #4B5766;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-dsv-conector {
    flex: none;
    width: 12px;
    height: 1px;
    background: #C0D4EE;
}

.an-dsv-actividad {
    font-size: 11.5px;
    color: var(--an-text-3);
}

.an-dsv-monto {
    text-align: right;
    font-weight: 600;
}

.an-dsv-monto.is-cero {
    color: var(--an-text-3);
}

.an-dsv-bar-cell {
    padding: 0 14px;
}

.an-dsv-fill--top {
    background: var(--an-blue);
}

.an-dsv-fill--rest {
    background: var(--an-blue-chart);
}

.an-dsv-fill--cero {
    background: var(--an-bar-empty);
}

.an-dsv-track-caja {
    height: 6px;
    background: #E6EEF9;
    border-radius: 3px;
    overflow: hidden;
}

.an-dsv-track-caja-fill {
    height: 6px;
    border-radius: 3px;
    background: #7FB2EC;
}

.an-dsv-pct {
    text-align: right;
    font-size: 12px;
    color: var(--an-text-2);
}

.an-dsv-pct-caja {
    text-align: right;
    font-size: 11.5px;
    color: var(--an-text-3);
}

.an-dsv-resumen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.an-dsv-mejor {
    background: var(--an-blue);
    color: #fff;
    border-radius: 11px;
    padding: 16px 18px;
}

.an-dsv-mejor-label {
    font-size: 11.5px;
    opacity: .82;
}

.an-dsv-mejor-nombre {
    font-size: 17px;
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.3;
}

.an-dsv-mejor-monto-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
}

.an-dsv-mejor-monto {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.an-dsv-mejor-pct {
    font-size: 14px;
    font-weight: 600;
    opacity: .9;
}

.an-dsv-mejor-pie {
    font-size: 12px;
    opacity: .88;
    margin-top: 6px;
}

.an-dsv-cifras {
    border: 1px solid var(--an-border);
    border-radius: 11px;
    padding: 14px 16px;
}

.an-dsv-cifra-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--an-line-soft-2);
}

.an-dsv-cifra-row:first-child {
    padding-top: 0;
}

.an-dsv-cifra-row--last {
    padding-bottom: 0;
    border-bottom: none;
}

.an-dsv-cifra-label {
    font-size: 12.5px;
    color: var(--an-text-2);
}

.an-dsv-cifra-value {
    font-size: 13.5px;
    font-weight: 600;
}

.an-dsv-aviso-cero {
    background: var(--an-amber-bg);
    border-radius: 11px;
    padding: 13px 15px;
}

.an-dsv-aviso-cero-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--an-amber-darker);
}

.an-dsv-aviso-cero-texto {
    font-size: 12px;
    line-height: 1.55;
    color: var(--an-amber-dark);
    margin-top: 4px;
}

.an-dsv-nota-cajas {
    border: 1px solid var(--an-border);
    border-radius: 11px;
    padding: 13px 15px;
}

.an-dsv-nota-cajas-titulo {
    font-size: 12.5px;
    font-weight: 600;
}

.an-dsv-nota-cajas-texto {
    font-size: 12px;
    line-height: 1.5;
    color: var(--an-text-2);
    margin-top: 5px;
}

.an-dsv-desktop {
    display: block;
}

.an-dsv-mobile {
    display: none;
}

/* Lista compacta de celular: reusa .an-card-lectura / .an-dsv-mejor para la
   ficha azul y agrega su propio riel de una sola línea por sucursal. */

.an-dsv-m-fila {
    padding: 10px 0;
    border-bottom: 1px solid var(--an-line-soft-2);
}

.an-dsv-m-fila:last-child {
    border-bottom: none;
}

.an-dsv-m-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.an-dsv-m-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.an-dsv-m-pos {
    flex: none;
    font-size: 10.5px;
    color: var(--an-text-disabled);
}

.an-dsv-m-nombre {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-dsv-m-monto {
    flex: none;
    font-size: 13.5px;
    font-weight: 600;
}

.an-dsv-m-track-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
}

.an-dsv-m-track {
    flex: 1;
    height: 6px;
    background: var(--an-line-soft);
    border-radius: 3px;
    overflow: hidden;
}

.an-dsv-m-fill {
    height: 6px;
    border-radius: 3px;
}

.an-dsv-m-pct {
    flex: none;
    font-size: 10.5px;
    color: var(--an-text-3);
}

.an-dsv-m-ver-todas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 4px;
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}

.an-dsv-m-ver-todas-texto {
    font-size: 13px;
    font-weight: 500;
    color: var(--an-blue);
}

.an-dsv-m-ver-todas-chevron {
    font-size: 15px;
    color: var(--an-blue);
}

.an-dsv-m-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.an-dsv-m-toggle-label {
    flex: none;
    font-size: 11.5px;
    color: var(--an-text-3);
}

.an-dsv-toggle--mobile {
    flex: 1;
}

.an-dsv-toggle--mobile .an-dsv-toggle-btn {
    flex: 1;
    text-align: center;
}

/* ── Inventario sin movimiento (módulo 10) ────────────────── */

.an-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--an-amber-text);
    background: var(--an-amber-bg);
    padding: 3px 8px;
    border-radius: 20px;
}

.an-inv-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--an-line-soft-2);
}

.an-inv-fila:last-child {
    border-bottom: none;
}

.an-inv-nombre {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.an-inv-sku {
    font-size: 11px;
    color: var(--an-text-3);
    margin-top: 3px;
}

.an-inv-stats {
    display: flex;
    gap: 18px;
    align-items: center;
    flex: none;
}

.an-inv-stat {
    text-align: right;
}

.an-inv-stat-value {
    font-size: 13px;
    font-weight: 500;
}

.an-inv-stat-value--amber {
    color: var(--an-amber-text);
}

.an-inv-stat-label {
    font-size: 10.5px;
    color: var(--an-text-3);
}

/* ── Detalle por ítem (módulo 11) ─────────────────────────── */

.an-detalle-card {
    padding: 0;
    overflow: hidden;
}

.an-detalle-head {
    padding: 20px 22px 16px;
}

.an-detalle-grid {
    display: grid;
    grid-template-columns: 150px 1fr 84px 104px 96px 110px 128px;
    gap: 0;
}

.an-detalle-columns {
    background: #F7F9FC;
    border-top: 1px solid var(--an-border);
    border-bottom: 1px solid var(--an-border);
    padding: 9px 22px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--an-text-2);
    letter-spacing: .02em;
}

.an-detalle-row {
    align-items: center;
    padding: 11px 22px;
    border-bottom: 1px solid var(--an-line-soft-2);
    font-size: 13.5px;
}

.an-detalle-row:hover {
    background: #F7FAFF;
}

.an-detalle-origen {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.an-origen-bar-mini {
    width: 3px;
    height: 26px;
    border-radius: 2px;
    flex: none;
}

.an-origen-bar-mini--catalogo {
    background: var(--an-blue);
}

.an-origen-bar-mini--manual {
    background: var(--an-amber);
}

.an-detalle-origen-label {
    font-size: 11px;
    font-weight: 600;
}

.an-detalle-origen-label--catalogo {
    color: var(--an-blue-dark);
}

.an-detalle-origen-label--manual {
    color: var(--an-amber-dark);
}

.an-detalle-sku {
    font-size: 10.5px;
    margin-top: 1px;
    color: var(--an-text-3);
}

.an-detalle-sku--empty {
    color: var(--an-text-disabled-2);
}

.an-ta-right {
    text-align: right;
}

.an-detalle-part {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.an-detalle-part-track {
    width: 64px;
    height: 6px;
    background: var(--an-line-soft);
    border-radius: 3px;
    overflow: hidden;
}

.an-detalle-part-fill {
    height: 6px;
    border-radius: 3px;
    background: var(--an-blue-chart);
}

.an-detalle-part-pct {
    font-size: 11.5px;
    color: var(--an-text-3);
    width: 38px;
    text-align: right;
}

.an-detalle-total-row {
    align-items: center;
    padding: 13px 22px;
    background: #F7F9FC;
    font-size: 14px;
    font-weight: 600;
}

/* Fichas en celular (detalle e inventario colapsan a lista simple) */

.an-ficha {
    padding: 11px 0;
    border-bottom: 1px solid var(--an-line-soft-2);
}

.an-ficha:last-child {
    border-bottom: none;
}

.an-ficha-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.an-ficha-nombre {
    font-size: 13.5px;
    line-height: 1.35;
}

.an-ficha-total {
    font-size: 14px;
    font-weight: 600;
    flex: none;
}

.an-ficha-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--an-text-3);
}

/* ── Descuentos / Anulaciones (módulos 12/13) ─────────────── */

.an-linea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--an-line-soft);
}

.an-linea:first-of-type {
    border-top: none;
}

.an-linea-label {
    font-size: 13.5px;
}

.an-linea-meta {
    font-size: 11.5px;
    color: var(--an-text-3);
}

.an-linea-value {
    font-size: 14px;
    font-weight: 600;
}

.an-anulacion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    background: var(--an-amber-bg);
    border-radius: 9px;
}

.an-anulacion-item + .an-anulacion-item {
    margin-top: 8px;
}

.an-anulacion-doc {
    font-size: 13.5px;
    font-weight: 500;
}

.an-anulacion-meta {
    font-size: 11.5px;
    color: var(--an-amber-dark);
    margin-top: 3px;
}

.an-anulacion-monto {
    font-size: 14px;
    font-weight: 600;
    color: var(--an-amber-text);
    flex: none;
}

.an-ninguna {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--an-green);
}

/* ── Estados: skeleton / vacío / error ────────────────────── */

.an-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--an-line-soft);
    border-radius: 12px;
}

.an-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: an-shimmer 1.4s infinite;
}

@keyframes an-shimmer {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.an-skeleton-kpi {
    height: 132px;
}

.an-skeleton-card {
    height: 280px;
}

.an-vacio-card {
    background: var(--an-surface);
    border: 1px solid var(--an-border);
    border-radius: 12px;
    padding: 40px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.an-vacio-titulo {
    font-size: 14px;
    color: var(--an-text-2);
}

.an-btn-limpiar {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--an-blue);
    border: none;
    border-radius: 9px;
    padding: 9px 18px;
    cursor: pointer;
}

.an-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--an-red-bg);
    border: 1px solid #F3CFC9;
    color: var(--an-red);
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 13.5px;
}

/* ── Responsive: tablet 768–1279, celular <768 ────────────── */

@media (max-width: 1279px) {
    .an-content {
        padding: 18px;
        gap: 14px;
    }

    .an-card {
        padding: 18px;
    }

    .an-card-title {
        font-size: 15.5px;
    }

    .an-kpis, .an-kpis-desktop {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .an-kpi-value {
        font-size: 34px;
    }

    .an-row-2, .an-row-pagos-tickets, .an-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .an-detalle-grid {
        grid-template-columns: 1fr 74px 92px 96px;
    }

    .an-detalle-part {
        display: none;
    }

    .an-dsv-body {
        grid-template-columns: 1fr 240px;
        gap: 16px;
    }

    .an-dsv-row, .an-dsv-head-row {
        grid-template-columns: 20px 24px 1fr 96px 150px 44px;
    }

    .an-dsv-actividad {
        display: none;
    }
}

@media (max-width: 767px) {
    .an-franja {
        padding: 12px 16px;
    }

    .an-content {
        padding: 14px 16px;
        gap: 12px;
    }

    .an-card {
        padding: 16px;
        border-radius: 12px;
    }

    .an-kpis-desktop {
        display: none;
    }

    .an-kpis-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .an-kpi--hero {
        border-radius: 14px;
    }

    .an-kpis-mobile .an-kpi--hero .an-kpi-value {
        font-size: 44px;
        line-height: 1.05;
    }

    .an-kpi-secundarios {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .an-origen-blocks {
        grid-template-columns: 1fr;
    }

    .an-row-2, .an-row-pagos-tickets {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .an-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .an-serie-bars {
        height: 80px !important;
    }

    .an-serie-bars--horas {
        height: 88px !important;
    }

    .an-serie-bar-monto {
        display: none;
    }

    .an-detalle-desktop, .an-inv-desktop {
        display: none;
    }

    .an-detalle-mobile, .an-inv-mobile {
        display: block;
    }

    .an-dsv-desktop {
        display: none;
    }

    .an-dsv-mobile {
        display: block;
    }
}

@media (min-width: 768px) {
    .an-detalle-mobile, .an-inv-mobile {
        display: none;
    }
}