/* ==========================================================================
   Comisiones — estilos propios de la pantalla (prefijo .com-)
   Solo tokens de estilos.css: nada de colores sueltos.
   ========================================================================== */

/* ---------- 1. Resumen ---------- */
.com-resumen {
  display: grid; gap: var(--e-4);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.com-pendiente { display: flex; flex-direction: column; overflow: hidden; box-shadow: inset 0 3px 0 var(--acento), var(--sombra-1); }
.com-pendiente__cuerpo { padding: var(--e-5) var(--e-5) var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }
.com-pendiente__cuerpo .saldo__nota { max-width: 52ch; }
.com-pendiente__pie { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borde); margin-top: auto; }

/* Avance del día hasta el descuento de las 23:59 */
.com-dia { padding: var(--e-4) var(--e-5); background: var(--superficie-2); border-top: 1px solid var(--borde); display: grid; gap: var(--e-2); }
.com-dia__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.com-dia__titulo { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-14); color: var(--texto-2); flex-wrap: wrap; }
.com-dia__titulo .ico { color: var(--acento-texto); }
.com-dia__titulo strong { color: var(--texto); }
.com-dia__pista { position: relative; height: 8px; border-radius: var(--radio-total); background: var(--pista); margin-top: var(--e-1); }
.com-dia__relleno { height: 100%; width: var(--valor); border-radius: inherit; background: var(--acento); }
.com-dia__ahora { position: absolute; top: -4px; bottom: -4px; left: var(--valor); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--texto); }
.com-dia__eje { position: relative; display: flex; justify-content: space-between; font-size: var(--t-12); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.com-dia__eje-ahora { position: absolute; left: var(--valor); transform: translateX(-50%); color: var(--texto); font-weight: 600; white-space: nowrap; }
.com-dia__texto { font-size: var(--t-13); color: var(--texto-2); }

.com-kpi { gap: var(--e-3); }
.com-kpi__nota { font-size: var(--t-13); color: var(--texto-3); }
.com-kpi__enlace { align-self: flex-start; margin-top: auto; margin-left: -10px; }

/* Barra partida: descontado + pendiente */
.com-division { display: flex; height: 8px; border-radius: var(--radio-total); overflow: hidden; background: var(--pista); gap: 2px; }
.com-division__parte { width: var(--valor); background: var(--serie-1); }
.com-division__parte--pendiente { background: var(--serie-2); min-width: 4px; }
.com-division__leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-13); color: var(--texto-2); }
.com-division__leyenda li { display: flex; align-items: center; gap: var(--e-2); }
.com-division__leyenda strong { margin-left: auto; color: var(--texto); font-weight: 600; }

.com-muestra, .leyenda__muestra.com-muestra--facturado, .leyenda__muestra.com-muestra--curso, .leyenda__muestra.com-muestra--pendiente {
  width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--serie-1);
}
.com-muestra--pendiente, .leyenda__muestra.com-muestra--pendiente { background: var(--serie-2); }
.leyenda__muestra.com-muestra--facturado { background: var(--serie-1-suave); }
.leyenda__muestra.com-muestra--curso { background: var(--serie-1); }

.com-mini-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--e-3); margin: 0; font-size: var(--t-13); }
.com-mini-datos dt { color: var(--texto-3); }
.com-mini-datos dd { margin: 0; color: var(--texto); font-weight: 500; text-align: right; min-width: 0; }

/* ---------- 2. Esquema vigente ---------- */
.com-esquema { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.95fr); }
.com-esquema > * { padding: var(--e-6); min-width: 0; }
.com-esquema > * + * { border-left: 1px solid var(--borde); }
.com-esquema__titulo { font-size: var(--t-15); font-weight: 600; margin-bottom: 2px; }
.com-esquema__calc { background: var(--superficie-2); border-radius: 0 var(--radio-3) var(--radio-3) 0; display: grid; gap: var(--e-4); align-content: start; }

.com-tasa { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin-bottom: var(--e-4); }
.com-tasa__valor { font-family: var(--fuente-titulo); font-size: 3.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--primario-texto); font-variant-numeric: tabular-nums; }
.com-tasa__por { font-size: 0.5em; letter-spacing: 0; }
.com-tasa__texto { font-size: var(--t-15); color: var(--texto-2); font-weight: 500; }

.com-reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); font-size: var(--t-14); color: var(--texto-2); }
.com-reglas li { display: flex; gap: var(--e-2); align-items: flex-start; }
.com-reglas .ico { color: var(--exito); margin-top: 2px; }
.com-reglas strong { color: var(--texto); }

/* Asiento contable: líneas con regla doble antes del total */
.com-asiento { margin: var(--e-4) 0 0; display: grid; font-size: var(--t-14); }
.com-asiento__linea { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: 9px 0; border-bottom: 1px dashed var(--borde-fuerte); }
.com-asiento__linea dt { color: var(--texto-2); }
.com-asiento__linea dd { margin: 0; font-weight: 600; color: var(--texto); white-space: nowrap; }
.com-asiento__resta { color: var(--texto-2) !important; }
.com-asiento__linea--total { border-bottom: 0; border-top: 3px double var(--texto); margin-top: -1px; padding-top: 11px; }
.com-asiento__linea--total dt { color: var(--texto); font-weight: 600; }
.com-asiento__linea--total dd { font-family: var(--fuente-titulo); font-size: var(--t-20); font-weight: 700; color: var(--primario-texto); }
.com-asiento--grande { margin-top: 0; }
/* Un descuento no va en verde: el verde queda para lo que entra al saldo */
.com-asiento__linea--cargo dd { color: var(--texto); }
#form-datos .form-grilla { align-items: start; }
.com-asiento--grande .com-asiento__linea--total dd { font-size: var(--t-28); }

.com-calc__resultado { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin: 0; }
.com-calc__resultado > div { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-2); padding: var(--e-3); min-width: 0; }
.com-calc__resultado dt { font-size: var(--t-12); color: var(--texto-3); font-weight: 600; }
.com-calc__resultado dd { margin: 2px 0 0; font-family: var(--fuente-titulo); font-size: var(--t-18); font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }

/* ---------- 3. Gráfico mensual (SVG inline + etiquetas HTML) ---------- */
.com-evolucion { display: grid; gap: var(--e-4); }
.com-leyenda { list-style: none; margin: 0; padding: 0; gap: var(--e-3); }
.com-grafico { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); padding-top: var(--e-6); }
.com-grafico__ejey { display: flex; flex-direction: column; justify-content: space-between; height: 236px; margin-top: -8px; line-height: 16px; font-size: var(--t-11); color: var(--texto-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-grafico__lienzo { position: relative; height: 220px; }
.com-grafico__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.com-grafico__grilla line { stroke: var(--grilla); stroke-width: 1; vector-effect: non-scaling-stroke; }
.com-grafico__base { stroke: var(--borde-fuerte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.com-col { fill: var(--serie-1-suave); }
.com-col--curso { fill: var(--serie-1); }
.com-col--pendiente { fill: var(--serie-2); }
.com-grafico__valores { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.com-grafico__valores li {
  position: absolute; left: var(--x); bottom: calc(var(--alto) + 6px); transform: translateX(-50%);
  font-size: var(--t-12); font-weight: 600; color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.com-grafico__valores .com-grafico__valor--curso { color: var(--texto); font-weight: 700; font-size: var(--t-13); }
.com-grafico__eje { grid-column: 2; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); text-align: center; font-size: var(--t-12); color: var(--texto-3); }
.com-grafico__eje strong { color: var(--texto); }
.com-grafico__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-4); }

/* Reparto por sucursal */
.com-sucursal { flex-direction: column; align-items: stretch; gap: 6px; }
.com-sucursal__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); min-width: 0; }
.com-sucursal__fila > span:first-child { min-width: 0; }
.com-sucursal__fila > .num { white-space: nowrap; }
.com-sucursales-tarjeta { display: flex; flex-direction: column; }
.com-sucursales-tarjeta > .tarjeta__pie { margin-top: auto; }
.com-sucursal__nombre { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); font-weight: 600; font-size: var(--t-14); }
.com-reparto { height: 6px; border-radius: var(--radio-total); background: var(--pista); overflow: hidden; }
.com-reparto span { display: block; height: 100%; width: var(--valor); border-radius: inherit; background: var(--serie-1-medio); }

/* ---------- 4. Lotes ---------- */
.com-lotes__acciones .select select { min-width: 170px; }
.com-lotes .tarjeta-titulo > span { display: grid; }
.com-lote--curso td { background: color-mix(in srgb, var(--acento-suave) 55%, transparent); }
.com-lote--curso td:first-child { box-shadow: inset 3px 0 0 var(--acento); }

/* ---------- 5. Facturas ---------- */
.com-facturacion { display: grid; gap: var(--e-4); align-items: start; }
.com-pestanas { padding: 0 var(--e-3); margin-bottom: 0; }
.com-facturacion .tabla-contenedor { border: 0; border-radius: 0; box-shadow: none; }
.com-acciones { display: inline-flex; gap: var(--e-1); justify-content: flex-end; }
.com-facturas .celda-sub { display: block; }
.com-datos-fiscales { margin: 0; display: grid; gap: var(--e-4) var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); font-size: var(--t-14); }
.com-datos-fiscales > div { min-width: 0; }
.com-datos-fiscales dt { color: var(--texto-3); font-size: var(--t-13); }
.com-datos-fiscales dd { margin: 2px 0 0; color: var(--texto); font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); min-height: 32px; overflow-wrap: anywhere; }

.com-factura { border: 1px solid var(--borde); border-radius: var(--radio-3); background: var(--superficie-2); padding: var(--e-5); display: grid; gap: var(--e-4); }
.com-factura__cabecera { display: flex; align-items: center; gap: var(--e-3); padding-bottom: var(--e-4); border-bottom: 1px solid var(--borde); }
.com-factura__letra { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 2px solid var(--texto); border-radius: var(--radio-1); font-family: var(--fuente-titulo); font-size: var(--t-24); font-weight: 700; }
.com-factura__tipo { font-weight: 600; }
.com-factura__item { padding: var(--e-3); border-radius: var(--radio-2); background: var(--superficie); border: 1px solid var(--borde); }
.com-factura .com-asiento { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .com-resumen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .com-pendiente { grid-column: 1 / -1; }
  .com-esquema { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .com-esquema__tasa { grid-column: 1 / -1; border-bottom: 1px solid var(--borde); }
  .com-esquema > .com-esquema__ejemplo { border-left: 0; }
  .com-esquema__calc { border-radius: 0 0 var(--radio-3) 0; }
}
@media (max-width: 767px) {
  .com-resumen, .com-esquema { grid-template-columns: minmax(0, 1fr); }
  .com-esquema > * { padding: var(--e-4); }
  .com-esquema > * + * { border-left: 0; border-top: 1px solid var(--borde); }
  .com-esquema__tasa { border-bottom: 0; }
  .com-esquema__calc { border-radius: 0 0 var(--radio-3) var(--radio-3); }
  .com-tasa__valor { font-size: 2.75rem; }
  .com-pendiente__cuerpo, .com-dia, .com-pendiente__pie { padding-left: var(--e-4); padding-right: var(--e-4); }
  .com-pendiente__pie .btn { flex: 1 1 auto; }
  .com-lotes__acciones { width: 100%; }
  .com-lotes__acciones .select { flex: 1 1 auto; }
  .com-lotes__acciones .select select { min-width: 0; width: 100%; }
  .com-grafico { column-gap: var(--e-2); }
  .com-grafico__valores li { font-size: var(--t-11); }
  .com-grafico__valores .com-grafico__valor--curso { font-size: var(--t-12); }
  .com-asiento--grande .com-asiento__linea--total dd { font-size: var(--t-24); }
}
@media (max-width: 640px) {
  .tarjeta > .tabla-contenedor:has(.tabla--tarjetas), .com-facturacion .tabla-contenedor { padding: var(--e-3); }
  .com-lote--curso td { background: transparent; }
  .tabla--tarjetas tr.com-lote--curso { box-shadow: inset 3px 0 0 var(--acento), var(--sombra-1); }
  .com-lote--curso td:first-child { box-shadow: none; }
  /* .tabla td.acciones (width 1 %) le gana a .tabla--tarjetas td: en tarjeta tiene que ocupar todo el ancho */
  .tabla--tarjetas td.acciones { justify-items: stretch; }
  .tabla--tarjetas td.acciones > .btn { justify-self: end; }
  .com-acciones { width: 100%; }
  .com-acciones .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  /* En celular las etiquetas van sin "$" ni "M": la escala del eje ya lo dice */
  .com-v-ext { display: none; }
}
@media (max-width: 380px) {
  .com-grafico__valores li { font-size: 10px; }
}

/* ==========================================================================
   Paridad: selector de mes, proyección, sucursales, estados y paginación de lotes
   ========================================================================== */

/* Selector "Mes" en la cabecera (label visible) */
.com-cabecera-acciones { align-items: center; }
.com-mes { display: flex; align-items: center; gap: var(--e-2); }
.com-mes__etiqueta { font-size: var(--t-14); font-weight: 600; color: var(--texto-2); }
.com-mes .select select { min-width: 220px; font-weight: 500; }

/* Tarjeta del mes: en curso / facturado */
.com-kpi__marca { margin-left: auto; }
.com-kpi--mes .kpi__etiqueta { flex-wrap: wrap; }
.com-facturado {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
  padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-2); background: var(--superficie-2);
}
.com-facturado__texto { display: grid; font-size: var(--t-14); font-weight: 600; color: var(--texto); min-width: 0; }
.com-facturado__sub { font-size: var(--t-13); font-weight: 400; color: var(--texto-3); }
.com-facturado__ver { margin-left: auto; min-height: 32px; }
.com-proyeccion {
  display: flex; align-items: flex-start; gap: var(--e-2); margin-top: auto; padding-top: var(--e-3);
  border-top: 1px dashed var(--borde-fuerte); font-size: var(--t-13); color: var(--texto-2);
}
.com-proyeccion .ico { flex: none; margin-top: 2px; color: var(--primario-texto); }
.com-proyeccion strong { color: var(--texto); font-weight: 600; white-space: nowrap; }
.com-mini-datos__leyenda { grid-column: 1 / -1; text-align: left !important; font-weight: 400 !important; color: var(--texto-3) !important; margin-top: -2px !important; }

/* Reparto por sucursal en los meses en que una sucursal todavía no cobraba */
.com-sucursal--sin-datos .com-sucursal__nombre, .com-sucursal--sin-datos .num { color: var(--texto-3); }

/* Lo que les pagás a tus sucursales */
.com-suc .celda-sub { display: block; }
.com-suc .com-sucursal__nombre { flex-wrap: nowrap; white-space: nowrap; }
.com-suc td[data-etiqueta="Estado"] .celda-sub { margin-top: 4px; white-space: normal; max-width: 28ch; }
.com-suc .estado .ico { width: 14px; height: 14px; }
.com-suc__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-6); }
.com-suc__nota { display: flex; align-items: flex-start; gap: var(--e-2); max-width: 72ch; color: var(--texto-2); }
.com-suc__nota .ico { flex: none; margin-top: 1px; color: var(--info); }
.com-suc__nota strong { color: var(--texto); }
.com-suc__total { display: inline-flex; align-items: baseline; gap: var(--e-2); white-space: nowrap; }
.com-suc__total strong { color: var(--texto); }

/* Leyenda de estados de los lotes */
.com-lotes-estados {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-2) var(--e-5);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borde); background: var(--superficie-2);
  border-radius: var(--radio-3) var(--radio-3) 0 0; font-size: var(--t-13); color: var(--texto-2);
}
.com-lotes-estados__titulo { font-weight: 600; color: var(--texto); padding-top: 2px; }
.com-lotes-estados__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); flex: 1 1 0; min-width: 0; }
.com-lotes-estados__lista li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--e-2); min-width: 0; }
.com-lotes-estados__lista .estado { flex: none; }
.com-lotes-estados__lista .estado .ico { width: 14px; height: 14px; }
.com-lotes-estados__lista a { font-weight: 600; color: var(--primario-texto); text-underline-offset: 3px; }
.com-lotes-vacio { border-top: 0; }

@media (max-width: 767px) {
  .com-mes { flex: 1 1 100%; }
  .com-mes .select { flex: 1 1 auto; }
  .com-mes .select select { min-width: 0; width: 100%; }
  .com-lotes-estados { padding: var(--e-3); }
  .com-lotes-estados__lista { flex-direction: column; flex: 1 1 100%; }
  .com-lotes-estados__lista a { display: flex; align-items: center; min-height: 44px; width: max-content; }
  .com-suc__total { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .com-lotes-estados { border-radius: var(--radio-3); margin: var(--e-3) var(--e-3) 0; border: 1px solid var(--borde); }
}