/**
 * finanzas.css — WTF Publicidad Panel Interno
 * Finanzas · Módulo 1: Gastos (bloques/finanzas-gastos.html,
 * bloques/config-finanzas-categorias.html y assets/js/finanzas.js).
 *
 * Reutiliza el lenguaje de Ventas y Prospección (assets/css/ventas.css:
 * .vta-*, .vfi-*): tarjetas, tablas, periodo, ventanas y selectores. Aquí
 * solo va lo propio del módulo. El verde es acento (nunca fondo de
 * superficies grandes), el texto verde sobre blanco usa el verde oscuro
 * (--go) y sobre verde el texto va en negro.
 */

.fin-main .vta-periodo-tit { color:var(--vta-verde); }
.fin-main .vta-periodo { margin-bottom:.65rem; }

/* ── Pestañas de la pantalla ── */
.fin-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--br); margin-bottom:.9rem; overflow-x:auto; scrollbar-width:none; }
.fin-tabs::-webkit-scrollbar { display:none; }
.fin-tab { padding:8px 14px; border:1px solid transparent; border-bottom:none; background:transparent; color:var(--ts); border-radius:var(--r) var(--r) 0 0; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font); display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.fin-tab i { font-size:14px; }
.fin-tab:hover { color:var(--t); }
.fin-tab[aria-selected="true"] { background:var(--c1); color:var(--t); border-color:var(--br); margin-bottom:-1px; }
.fin-tab[aria-selected="true"] i { color:var(--vta-verde); }
.fin-tab .fin-tab-n { font-size:10px; font-weight:700; padding:0 6px; border-radius:20px; background:var(--red-bg); color:var(--vta-rojo); border:1px solid var(--red-br); }
.fin-main button:focus-visible, .fin-main select:focus-visible, .fin-main input:focus-visible, .fin-main [tabindex]:focus-visible,
.fin-velo button:focus-visible, .fin-velo select:focus-visible, .fin-velo input:focus-visible, .fin-velo textarea:focus-visible { outline:2px solid var(--g); outline-offset:2px; }

/* ── Etiquetas ── */
.fin-etq { display:inline-flex; align-items:center; gap:.25rem; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; border:1px solid var(--br); background:var(--c2); color:var(--ts); white-space:nowrap; line-height:1.5; }
.fin-etq i { font-size:11px; }
.fin-etq.ventas     { background:var(--blue-bg);   border-color:var(--blue-br);   color:var(--vta-azul); }
.fin-etq.remisiones { background:rgba(13,148,136,.1); border-color:rgba(13,148,136,.35); color:#0B6F66; }
[data-theme="dark"] .fin-etq.remisiones { color:#5EEAD4; }
.fin-etq.confirmar  { background:var(--yellow-bg); border-color:var(--yellow-br); color:var(--vta-ambar); }
.fin-etq.anulado    { background:var(--red-bg);    border-color:var(--red-br);    color:var(--vta-rojo); }
.fin-etq.aparte     { background:rgba(155,89,182,.1); border-color:rgba(155,89,182,.3); color:var(--vta-morado); }
.fin-etq.facturado  { background:var(--green-bg);  border-color:var(--green-br);  color:var(--vta-verde); }
/* «estimado»: monto de un fijo por confirmar (borde punteado para distinguirlo de «Por confirmar») */
.fin-etq.estimado   { background:var(--yellow-bg); border:1px dashed rgba(239,159,39,.6); color:var(--vta-ambar); font-variant-numeric:tabular-nums; vertical-align:middle; }
.vta-tot-val .fin-etq.estimado { font-size:10.5px; }
.fin-inicio .kpi-val .fin-etq.estimado { font-size:10.5px; font-weight:700; letter-spacing:normal; vertical-align:middle; }

/* Estado del pago en la tabla */
.fin-pago { display:inline-flex; align-items:center; gap:.3rem; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px; border:1px solid var(--br); background:var(--c2); color:var(--ts); white-space:nowrap; }
.fin-pago.pagado  { background:var(--green-bg);  border-color:var(--green-br);  color:var(--vta-verde); }
.fin-pago.vencido { background:var(--red-bg);    border-color:var(--red-br);    color:var(--vta-rojo); }
.fin-pago.pronto  { background:var(--yellow-bg); border-color:var(--yellow-br); color:var(--vta-ambar); }

.fin-fila.anulada td { opacity:.55; }
.fin-fila.anulada .vta-fila-tit { text-decoration:line-through; }
.fin-fila.lectura td:first-child { box-shadow:inset 3px 0 0 var(--blue-br); }
.fin-fila.seleccionada td { background:var(--c2); }
.fin-tabla td.fin-chk, .fin-tabla th.fin-chk { width:1%; padding-right:0; }
.fin-tabla input[type="checkbox"] { width:16px; height:16px; accent-color:var(--g); cursor:pointer; }
.fin-sub-iva { font-size:10px; color:var(--ts); font-weight:400; }

/* Barra de acciones de lo seleccionado */
.fin-seleccion { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background:var(--c1); border:1px solid var(--brh); border-radius:var(--r2); padding:.5rem .7rem; margin-bottom:.6rem; font-size:12px; box-shadow:var(--shadow-card); }
.fin-seleccion b { color:var(--t); }

/* Totales pequeños de lo filtrado */
.fin-mini-tot { display:flex; gap:.4rem 1.1rem; flex-wrap:wrap; font-size:11px; color:var(--ts); margin:-.1rem 0 .55rem; }
.fin-mini-tot b { color:var(--t); font-variant-numeric:tabular-nums; }

/* ── Resumen: tabla por grupo y categoría ── */
.fin-grupo td { background:var(--c2); font-weight:700; }
.fin-cat td:first-child { padding-left:1.6rem; }
.fin-dif { font-size:11px; font-weight:700; white-space:nowrap; }
.fin-dif.sube { color:var(--vta-rojo); }
.fin-dif.baja { color:var(--vta-verde); }
.fin-dif.igual { color:var(--ts); font-weight:600; }
.fin-barra { height:6px; border-radius:6px; background:var(--c2); overflow:hidden; min-width:60px; }
.fin-barra i { display:block; height:100%; background:var(--g); border-radius:6px; }
.fin-lista { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); box-shadow:var(--shadow-card); }
.fin-lista-fila { display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; border-bottom:1px solid var(--sep); font-size:12px; flex-wrap:wrap; }
.fin-lista-fila:last-child { border-bottom:none; }
.fin-lista-txt { flex:1; min-width:180px; }
.fin-lista-txt b { color:var(--t); }
.fin-lista-sub { font-size:10.5px; color:var(--ts); margin-top:.1rem; }
.fin-lista-monto { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── Por pagar ── */
.fin-pp-grupo { margin-bottom:1rem; }
.fin-pp-cab { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:0 0 .45rem; flex-wrap:wrap; }
.fin-pp-cab h3 { font-size:13.5px; margin:0; display:flex; align-items:center; gap:.4rem; }
.fin-pp-cab .total { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.fin-pp-grupo.vencido .fin-pp-cab h3, .fin-pp-grupo.vencido .fin-pp-cab .total { color:var(--vta-rojo); }
.fin-pp-grupo.vencido .fin-lista { border-color:var(--red-br); }

/* ── Ventanas (ficha del gasto, pagos, fijo, proveedor) ── */
.fin-velo { z-index:565; }
.fin-velo.encima { z-index:585; }
.fin-caja { max-width:820px; }
.fin-caja .vfi-cuerpo { padding:1rem 1.35rem 1.2rem; }
.fin-ojo { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ts); }
.fin-sec-tit { font-size:12.5px; font-weight:700; color:var(--t); margin:1rem 0 .55rem; display:flex; align-items:center; gap:.4rem; }
.fin-sec-tit:first-child { margin-top:0; }
.fin-sec-tit i { color:var(--ts); font-size:15px; }
.fin-sec-tit .num { width:20px; height:20px; border-radius:50%; background:var(--c2); border:1px solid var(--br); font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; color:var(--ts); }
.fin-bloque { border:1px solid var(--br); border-radius:var(--r2); padding:.8rem .9rem .15rem; margin-bottom:.8rem; background:var(--c1); }
.fin-seg { display:inline-flex; background:var(--c2); border:1px solid var(--br); border-radius:var(--r); padding:.15rem; gap:.1rem; flex-wrap:wrap; }
.fin-seg button { padding:6px 12px; border:none; background:transparent; border-radius:6px; font-size:11.5px; font-weight:600; color:var(--ts); cursor:pointer; font-family:var(--font); }
.fin-seg button[aria-pressed="true"] { background:var(--c1); color:var(--t); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.fin-seg button:disabled { cursor:not-allowed; }
.fin-seg button:disabled:not([aria-pressed="true"]) { opacity:.45; }
.fin-ayuda { font-size:10.5px; color:var(--ts); line-height:1.5; margin-top:.3rem; }
/* El aviso del UUID cuando lo escrito todavía no cuadra (assets/js/uuid-factura.js).
   Vale igual en Finanzas y en Remisiones: los dos usan el mismo campo. */
.fin-ayuda-mal { color:var(--vta-rojo); }
/* Campo llenado por el XML del CFDI: se nota de dónde salió y la marca se va
   en cuanto alguien lo edita. El verde va de acento, no de fondo. */
.vta-campo.del-xml .vta-inp, .vta-campo.del-xml select { border-color:var(--g); background:var(--green-bg); }
.fin-etq-xml { display:inline-block; margin-left:.35rem; padding:1px 6px; border-radius:999px; font-size:9.5px; font-weight:700;
  letter-spacing:.02em; color:var(--go); background:var(--green-bg); border:1px solid var(--green-br); vertical-align:middle; }
[data-theme="dark"] .fin-etq-xml { color:var(--g); }
.fin-error { font-size:11.5px; color:var(--vta-rojo); background:var(--red-bg); border:1px solid var(--red-br); border-radius:var(--r); padding:.45rem .6rem; margin-bottom:.7rem; }
.vta-campo.con-error .vta-inp, .vta-campo.con-error select, .vta-campo.con-error .vta-txt { border-color:var(--vta-rojo); box-shadow:0 0 0 3px var(--red-bg); }
.fin-dato { font-size:12px; color:var(--t); padding:.1rem 0 .6rem; }
.fin-dato small { display:block; font-size:10.5px; color:var(--ts); font-weight:600; margin-bottom:.1rem; }
.fin-iva { display:flex; gap:.4rem 1rem; flex-wrap:wrap; font-size:11.5px; color:var(--ts); background:var(--c2); border:1px solid var(--br); border-radius:var(--r); padding:.5rem .65rem; margin:-.2rem 0 .8rem; }
.fin-iva b { color:var(--t); font-variant-numeric:tabular-nums; }
.fin-archivo { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px dashed var(--sep); font-size:12px; }
.fin-archivo:last-child { border-bottom:none; }
.fin-archivo i.ico { font-size:18px; color:var(--ts); }
.fin-archivo a { color:var(--t); font-weight:600; word-break:break-word; }
.fin-archivo .der { margin-left:auto; }
.fin-hist { max-height:220px; overflow-y:auto; }
.fin-aviso { display:flex; gap:.5rem; align-items:flex-start; font-size:11.5px; line-height:1.5; color:var(--t); background:var(--blue-bg); border:1px solid var(--blue-br); border-radius:var(--r); padding:.55rem .7rem; margin-bottom:.8rem; }
.fin-aviso i { color:var(--vta-azul); font-size:16px; margin-top:.05rem; }
.fin-aviso.ambar { background:var(--yellow-bg); border-color:var(--yellow-br); }
.fin-aviso.ambar i { color:var(--vta-ambar); }
/* El XML que no se pudo leer (assets/js/finanzas.js, «Fue facturado») */
.fin-aviso.rojo { background:var(--red-bg); border-color:var(--red-br); }
.fin-aviso.rojo i { color:var(--vta-rojo); }
.fin-check { display:flex; align-items:center; gap:.45rem; font-size:12px; font-weight:600; color:var(--t); cursor:pointer; margin-bottom:.7rem; }
.fin-check input { width:16px; height:16px; accent-color:var(--g); }

/* Resumen: seis tarjetas en dos filas de tres (dos en tableta, una en celular) */
.fin-main #fin-r-tarjetas { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) { .fin-main #fin-r-tarjetas { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .fin-main #fin-r-tarjetas { grid-template-columns:1fr; } }

/* Inicio: el bloque Finanzas usa .kpi-row de siempre */
.fin-inicio .kpi { cursor:pointer; }

/* ── Celular ── */
@media (max-width: 760px) {
  .fin-velo { padding:0; }
  .fin-velo .vfi-caja { max-height:100%; height:100%; border-radius:0; }
  .fin-caja .vfi-cuerpo { padding:.9rem 1rem 1.1rem; }
  .fin-velo .vfi-rejilla, .fin-velo .vfi-rejilla.tres { grid-template-columns:1fr; }
  .fin-main .vta-periodo-tit { font-size:20px; }
  .fin-main .vta-periodo-flecha { width:36px; height:36px; font-size:20px; }
  .fin-main .vta-periodo-sub { padding-left:0; }
  .fin-lista-txt { min-width:0; flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-barra i { transition:none; }
}