/* ============================================================
   GestioNet · Dashboard denso (v1)
   Misma dirección que el chasis de comprobante y que el panel de
   Taluney: franjas de celdas y botonera chica, sin tarjetones ni
   íconos decorativos. Se carga DESPUÉS de comprobante-v1.css.
   Rollback: quitar el <link> de este archivo en index.html.
   ============================================================ */

/* ---------- Accesos rápidos: botonera, no tarjetas ---------- */
#bru-actions{display:flex;flex-wrap:wrap;gap:7px}
#bru-actions .bru-act{
  flex:0 0 auto;gap:8px;padding:8px 13px;border-radius:9px;
  box-shadow:none !important;
  transition:border-color .15s,background .15s,color .15s;
}
#bru-actions .bru-act:hover{
  transform:none !important;box-shadow:none !important;
  background:var(--bg4);border-color:var(--accent);
}
#bru-actions .bru-act-ic{
  width:22px;height:22px;border-radius:0;background:transparent;
}
#bru-actions .bru-act-ic svg{width:16px;height:16px}
#bru-actions .bru-act-t{font-size:12.5px;font-weight:700;white-space:nowrap}

/* ---------- Estado del día: misma franja que los KPIs de arriba ---------- */
#dash-oper.dash-saldos-strip{margin-bottom:26px}
#dash-oper .ss-item{display:flex;flex-direction:column;justify-content:center}
.dash-saldos-strip .ss-item small{
  display:block;font-size:11px;color:var(--text4);
  font-weight:600;margin-top:3px;
}
/* que la franja no se rompa en pantallas medianas */
@media(max-width:1100px){
  .dash-saldos-strip{flex-wrap:wrap}
  .dash-saldos-strip .ss-item{flex:1 1 45%;border-bottom:1px solid var(--border-soft)}
}

/* ---------- Títulos de sección ---------- */
.bru-section-t{
  font-size:11px;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:.6px;margin:2px 0 10px;
}

/* ---------- Tablas del dashboard ---------- */
#dash-topart-table .cmp-tbl{font-size:12.5px}
#dash-topart-table .cmp-tbl tbody tr:hover{background:var(--bg4)}

/* ---------- Top artículos en el teléfono ----------
   Cuatro columnas no entran en 390 px: la tabla medía 420 px dentro de un
   contenedor de 352 y se cortaba contra el borde, sin scroll ni aviso.
   Abajo de 560 px cada fila pasa a ser una tarjeta: el nombre del artículo
   ocupa su propio renglón (que es el dato largo) y los números van debajo,
   cada uno con su rótulo, para que se entiendan sin encabezado. */
@media(max-width:560px){
  #dash-topart-table .cmp-tbl thead{display:none}
  /* La tabla va pineada al ancho del contenedor. Con width:auto seguía
     midiendo su ancho natural de tabla (420 px dentro de 352) y se cortaba
     contra el borde, aunque las filas ya se vieran apiladas. */
  /* El min-width global de tablas chicas (table{min-width:420px} abajo de
     480 px, 560 abajo de 900) es el que fijaba el ancho: por más display:block
     y width:100% que se pusiera, la tabla no bajaba de 420 dentro de un
     contenedor de 352 y se cortaba contra el borde. Acá esa tabla ya no es
     una tabla, son tarjetas: el mínimo no corresponde. */
  #dash-topart-table .cmp-tbl{display:block;width:100%;max-width:100%;min-width:0}
  #dash-topart-table .cmp-tbl tbody,
  #dash-topart-table .cmp-tbl tr,
  #dash-topart-table .cmp-tbl td{display:block;width:auto;max-width:100%}
  #dash-topart-table .cmp-tbl tr{
    padding:10px 12px;border-bottom:1px solid var(--border-soft);
  }
  #dash-topart-table .cmp-tbl tr:last-child{border-bottom:0}
  #dash-topart-table .cmp-tbl tbody td{padding:0;border-bottom:0}
  #dash-topart-table .cmp-tbl td[data-l]{
    display:inline-block;margin:6px 18px 0 0;text-align:left;
  }
  /* El rótulo va arriba del número, chiquito: sin encabezado de tabla,
     "36" solo no dice si son facturas, kilos o rollos. */
  #dash-topart-table .cmp-tbl td[data-l]::before{
    content:attr(data-l);display:block;
    font-size:10px;font-weight:800;color:var(--text3);
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px;
  }
  #dash-topart-table .cmp-tbl td.art{
    font-weight:700;line-height:1.35;
    /* Nombres como "PAPEL SUBLIMADO CON COATING 35 GRS 1.60 ANCHO" tienen que
       cortarse donde haga falta antes que empujar el ancho de la fila. */
    overflow-wrap:anywhere;
  }
}