/* dg-bi.css — componentes compartidos de las pantallas de datos (2026-10-02).
 *
 * Antes cada pantalla copiaba su propia versión de paneles, indicadores, filtros y tablas, y se
 * habían separado (títulos de panel en mayúsculas en unas y normales en otras, filtros de fecha con
 * tres diseños distintos, inputs de distintos tamaños). Esta hoja es la ÚNICA definición, tomada de
 * Compras (Seguimiento + Inicio v2). Va después de dg-theme.css. Las pantallas solo agregan lo que
 * es propio de ellas.
 */

/* ---------- indicadores ---------- */
.kpi-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.kpi-box{ flex:1 1 200px; background: var(--dg-surface); border-radius:20px; border:1px solid var(--dg-border); padding:18px 20px; min-width:0; }
.kpi-box .kpi-label{ font-size:11.5px; color: var(--dg-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.kpi-box .kpi-value{ font-size:24px; font-weight:800; color: var(--dg-text); margin-top:4px; }
.kpi-box .kpi-sub{ font-size:11.5px; color: var(--dg-text-soft); margin-top:2px; }

/* ---------- paneles ---------- */
.bi-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
.bi-panel{ background: var(--dg-bg); border-radius:20px; border:1px solid transparent; padding:18px 20px; min-width:0; }
.bi-panel.wide, .bi-panel.chart-panel{ grid-column: 1 / -1; }
.bi-empty{ text-align:center; color: var(--dg-text-muted); font-size:12.5px; padding:20px 0; }
.bi-nota{ font-size:11.5px; color: var(--dg-text-soft); margin:10px 2px 0; line-height:1.5; }
.bi-fuente{ font-size:11px; color: var(--dg-text-soft); margin:18px 2px 0; }
.bi-seccion-titulo{ margin:28px 0 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--dg-text-soft); }
.lista-scroll{ max-height:420px; overflow:auto; }

/* encabezado de tarjeta (Inicio de Compras) */
.w-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.w-tit{ margin:0; font-size:15px; font-weight:700; color:var(--dg-text); }
.w-sub{ font-size:11.5px; color:var(--dg-text-soft); }
.eyebrow{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--dg-text-soft); margin:18px 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.eyebrow:first-child{ margin-top:0; }
.eyebrow .suave{ text-transform:none; letter-spacing:0; font-weight:500; }

/* ---------- barra de período (una sola, igual en todas las pantallas) ---------- */
.rk-periodbar,
.filtro-fecha-panel{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background: var(--dg-surface); border:1px solid var(--dg-border); border-radius:16px; padding:12px 16px; margin-bottom:18px; }
.rk-quick,
.filtro-atajos{ display:flex; gap:4px; flex-wrap:wrap; order:0; }
.rk-quick button,
.filtro-atajo{ background:none; border:1px solid var(--dg-border); border-radius:100px; padding:6px 14px; font-size:12px; font-weight:600; color:var(--dg-text-muted); cursor:pointer; white-space:nowrap; }
.rk-quick button:hover,
.filtro-atajo:hover{ background: var(--dg-bg-hover); }
.rk-quick button[aria-pressed="true"],
.filtro-atajo.activo{ background: var(--dg-blue-dark); border-color:var(--dg-blue-dark); color:#fff; }
.rk-range,
.filtro-custom{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--dg-text-soft); order:1; flex-wrap:wrap; }
.filtro-custom .filtro-campo{ display:flex; flex-direction:row; align-items:center; gap:6px; }
.filtro-custom label{ font-size:11px; font-weight:400; color:var(--dg-text-soft); text-transform:none; letter-spacing:0; }
.rk-range input,
.filtro-custom input{ border:1px solid var(--dg-border); border-radius:100px; padding:5px 10px; font-size:12px; background:var(--dg-surface); color:var(--dg-text); min-width:0; line-height:18px; height:auto; }
.rk-range input:focus,
.filtro-custom input:focus{ outline:none; border-color:var(--dg-blue); }
.rk-perlabel,
.filtro-rango-texto{ margin-left:auto; font-size:11.5px; color:var(--dg-text-soft); white-space:nowrap; order:2; }

/* control segmentado (Pesos/Unidades, Mes/Trimestre...) */
.seg{ display:inline-flex; border:1px solid var(--dg-outline-variant); border-radius:100px; overflow:hidden; background:var(--dg-surface); }
.seg button{ background:none; border:none; padding:5px 12px; font-size:11.5px; font-weight:600; color:var(--dg-text-muted); cursor:pointer; text-transform:none; letter-spacing:0; }
.seg button[aria-pressed="true"]{ background: var(--dg-blue-dark); color:#fff; }

/* ---------- filtros de tabla (Seguimiento) ---------- */
.oc-filtros, .filtro-row{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.oc-filtros .campo-busq{ flex:1 1 260px; }
.oc-filtros input, .oc-filtros select, .filtro-row input, .filtro-row select{ min-width:150px; }
.filtro-label,
.filtro-row .filtro-campo label{ display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--dg-text-soft); margin-bottom:4px; }
.filtro-row .filtro-campo{ display:flex; flex-direction:column; }
.bi-buscador{ width:100%; margin-bottom:10px; }

/* ---------- pestañas internas ---------- */
.subtabs{ display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--dg-border); flex-wrap:wrap; }
.subtabs button{ background:none; border:none; padding:10px 16px; font-size:12.5px; font-weight:600; color:var(--dg-text-muted); cursor:pointer; border-bottom:2px solid transparent; }
.subtabs button.active{ color:var(--dg-blue-dark); border-bottom-color:var(--dg-blue-dark); }

/* ---------- tablas ---------- */
.dg-table td.pos, .dg-table td.positivo{ color: var(--dg-ok-text); font-weight:700; }
.dg-table td.neg, .dg-table td.deuda, .dg-table td.crit{ color: var(--dg-crit-text); font-weight:700; }
.dg-table td.warn{ color: var(--dg-warn-text); font-weight:700; }
.dg-table th.ordenable{ cursor:pointer; user-select:none; }
.dg-table th.ordenable .arrow{ font-size:9px; margin-left:3px; opacity:.6; }
.dg-list-item .dg-list-trailing.pos{ color: var(--dg-ok-text); }
.dg-list-item .dg-list-trailing.neg{ color: var(--dg-crit-text); }

/* ---------- estados ---------- */
.cargando{ opacity:.55; pointer-events:none; transition:opacity .15s ease; }

/* ---------- componentes del Inicio de Compras, para todas las áreas (2026-10-02) ---------- */
/* secciones apiladas */
.bi-stack > * + *{ margin-top:18px; }
/* indicadores dentro de una tarjeta (cajas blancas sobre el panel gris) */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
.kpi{ background:var(--dg-surface); border-radius:14px; padding:12px 14px; min-width:0; }
.kpi b{ display:block; font-size:19px; font-weight:800; color:var(--dg-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi span{ display:block; font-size:11px; color:var(--dg-text-soft); }
.kpi em{ display:block; font-style:normal; font-size:11px; color:var(--dg-text-muted); margin-top:2px; }
.kpi .prog, .kpi-box .prog{ height:6px; border-radius:100px; background:var(--dg-border); overflow:hidden; margin-top:8px; }
.kpi .prog i, .kpi-box .prog i{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg, var(--dg-blue), var(--dgc-2, #3EA6EE)); }
.kpi .prog i.ok{ background:var(--dg-ok-text); }
.kpi .prog i.alto{ background:var(--dg-crit-text); }
/* dos columnas */
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
@media (max-width: 900px){ .grid2{ grid-template-columns:1fr; } }
.grid2 > .bi-panel{ margin:0; }
/* bloque blanco dentro de una tarjeta (sub-sección) */
.caja{ background:var(--dg-surface); border-radius:16px; padding:14px 16px; min-width:0; }
.caja h4{ margin:0 0 8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--dg-text-soft); }
/* variación */
.sube{ color:var(--dg-ok-text); } .baja{ color:var(--dg-crit-text); }
/* tabla compacta (la de Seguimiento de Compras) */
.dg-table.compacta th{ font-size:10px; padding:10px 12px; }
.dg-table.compacta td{ font-size:12px; padding:9px 12px; height:auto; }
.dg-table td.num, .dg-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.dg-table tr.clic{ cursor:pointer; }
.dg-table tr.clic:hover td{ background:var(--dg-bg-hover); }
.dg-table tr.sel td{ background:var(--dg-blue-light); }
.celda-barra{ display:flex; align-items:center; gap:8px; }
.celda-barra i{ display:block; height:6px; border-radius:100px; background:linear-gradient(90deg, var(--dg-blue), var(--dgc-2, #3EA6EE)); min-width:2px; }
/* encabezado de tarjeta con controles a la derecha */
.w-acc{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* estado vacío explicado */
.vacio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:28px 16px; color:var(--dg-text-soft); font-size:12.5px; }
.vacio .material-symbols-outlined{ font-size:28px; color:var(--dg-outline-variant); }
/* pill de estado */
.pill{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:100px; white-space:nowrap; }
.pill.ok{ color:var(--dg-ok-text); background:var(--dg-ok-bg); }
.pill.warn{ color:var(--dg-warn-text); background:var(--dg-warn-bg); }
.pill.crit{ color:var(--dg-crit-text); background:var(--dg-crit-bg); }
.pill.neutro{ color:var(--dg-text-muted); background:var(--dg-bg); }
.grid2.ancho-der{ grid-template-columns:minmax(0, 1fr) minmax(0, 2.2fr); }
@media (max-width: 900px){ .grid2.ancho-der{ grid-template-columns:1fr; } }

/* Barra de período: selector de mes (2026-10-06), mismo aspecto que los botones de la barra */
.dg-periodo-mes{ appearance:none; -webkit-appearance:none; font:inherit; font-size:12px; font-weight:600; color:var(--dg-text-muted);
  background:var(--dg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid var(--dg-border); border-radius:100px; padding:6px 30px 6px 14px; cursor:pointer; white-space:nowrap; }
.dg-periodo-mes:hover{ background-color:var(--dg-bg-hover); }
.dg-periodo-mes:focus{ outline:none; border-color:var(--dg-blue); }
.dg-periodo-mes.activo{ background-color:var(--dg-blue-dark); border-color:var(--dg-blue-dark); color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.dg-periodo-mes option{ color:var(--dg-text); background:var(--dg-surface); }

/* ---------- pasos de un asistente (Pedidos, Descuentos → Importar lista) ---------- */
/* Pasos en forma de flecha (2026-10-09): cada paso es un bloque que encaja en el siguiente. Actual = azul lleno,
   hechos = azul claro, por hacer = gris. */
.steps{ display:flex; margin-bottom:18px; }
.steps .st{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; height:44px;
  padding:0 18px 0 28px; margin-right:-12px; font-size:12.5px; font-weight:600; white-space:nowrap;
  background: var(--dg-bg-hover); color: var(--dg-text-soft);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  transition: background .2s, color .2s; }
.steps .st:first-child{ padding-left:18px; border-radius:14px 0 0 14px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.steps .st:last-child{ margin-right:0; padding-right:18px; border-radius:0 14px 14px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); }
.steps .st .n{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:22px; height:22px; border-radius:100px;
  background: var(--dg-border); color: var(--dg-text-soft); font-size:11px; font-weight:700; }
.steps .st.hecho{ background: var(--dg-blue-light); color: var(--dg-blue); }
.steps .st.hecho .n{ background: var(--dg-blue); color: var(--dg-surface); }
.steps .st.on{ background: var(--dg-blue); color: var(--dg-surface); }
.steps .st.on .n{ background: var(--dg-surface); color: var(--dg-blue); }
@media (max-width: 600px){
  .steps .st{ height:38px; padding:0 8px 0 20px; margin-right:-10px; gap:5px; font-size:11px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
  .steps .st:first-child{ padding-left:10px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
  .steps .st:last-child{ padding-right:10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); }
  .steps .st .n{ width:18px; height:18px; font-size:10px; }
  .steps .st.on{ flex:1.8; }
  .steps .st .t{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------- Modo oscuro: niveles de lectura (2026-10-13) ----------
   En claro .bi-panel usa --dg-bg (gris apenas más oscuro que el lienzo blanco). En oscuro tiene que quedar ELEVADO sobre
   el lienzo, como una tarjeta: superficie de nivel 2 con borde. */
[data-theme="dark"] .bi-panel{ background: var(--dg-surface); border-color: var(--dg-border); }
[data-theme="dark"] .bi-panel .kpi-box, [data-theme="dark"] .bi-panel .panel{ background: var(--dg-bg-hover); }