/**
 * finanzas-ingresos.css — WTF Publicidad Panel Interno
 * Finanzas · Módulo 3: Ingresos y cobranza de mensualidades
 * (bloques/finanzas-ingresos.html y assets/js/finanzas-ingresos.js).
 *
 * Sobre el lenguaje de Gastos (finanzas.css) y de Ventas (ventas.css): aquí
 * solo va lo propio del módulo. El verde sigue siendo acento, nunca fondo de
 * superficies grandes.
 */

/* ── La pauta: siempre marcada y siempre aparte del ingreso ── */
.fin-etq.pauta { background:rgba(155,89,182,.1); border-color:rgba(155,89,182,.35); color:var(--vta-morado); }
.ing-pauta { color:var(--vta-morado); font-variant-numeric:tabular-nums; }
.ing-pauta-nota { font-size:10.5px; color:var(--ts); line-height:1.5; }

/* ── Quién paga la pauta: el aviso de las cuentas que faltan y su ventana ── */
.ing-pauta-faltan-btn { margin-top:.4rem; }
.ing-pauta-acciones { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
@media (max-width:520px) { .ing-pauta-acciones .vta-btn { flex:1 1 100%; justify-content:center; } }

/* Estado del cobro en la tabla (sobre .fin-pago de Gastos) */
.fin-pago.parcial { background:var(--yellow-bg); border-color:var(--yellow-br); color:var(--vta-ambar); }
.fin-pago.por-cobrar { background:var(--c2); color:var(--ts); }

/* ── Antigüedad de Por cobrar ── */
.ing-ant { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 .9rem; }
.ing-ant-caja { flex:1 1 150px; background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); padding:.6rem .75rem; box-shadow:var(--shadow-card); }
.ing-ant-caja.b { border-color:var(--yellow-br); }
.ing-ant-caja.c { border-color:var(--red-br); }
.ing-ant-lbl { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ts); }
.ing-ant-val { font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:.15rem; }
.ing-ant-caja.b .ing-ant-val { color:var(--vta-ambar); }
.ing-ant-caja.c .ing-ant-val { color:var(--vta-rojo); }
.ing-ant-sub { font-size:10.5px; color:var(--ts); margin-top:.1rem; }

/* ── Desglose del cargo por servicio (en la ficha) ── */
.ing-desglose { border:1px solid var(--br); border-radius:var(--r2); overflow:hidden; margin-bottom:.8rem; }
.ing-desglose-fila { display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border-bottom:1px solid var(--sep); font-size:12px; }
.ing-desglose-fila:last-child { border-bottom:none; }
.ing-desglose-fila.total { background:var(--c2); font-weight:700; }
.ing-desglose-fila .nom { flex:1; min-width:0; }
.ing-desglose-fila .mto { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; }
.ing-desglose-fila.es-pauta .nom, .ing-desglose-fila.es-pauta .mto { color:var(--vta-morado); }

/* ── Los cobros del cargo ── */
.ing-cobro { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px dashed var(--sep); font-size:12px; flex-wrap:wrap; }
.ing-cobro:last-child { border-bottom:none; }
.ing-cobro.deshecho { opacity:.55; }
.ing-cobro.deshecho .ing-cobro-monto { text-decoration:line-through; }
.ing-cobro-monto { font-weight:700; font-variant-numeric:tabular-nums; }
.ing-cobro-sub { font-size:10.5px; color:var(--ts); }
.ing-cobro .der { margin-left:auto; }

/* ── Las dos lecturas del mes, en el Resumen ── */
.ing-lecturas { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.7rem; margin-bottom:1rem; }
.ing-lectura { background:var(--c1); border:1px solid var(--br); border-radius:var(--r2); padding:.85rem 1rem; box-shadow:var(--shadow-card); }
.ing-lectura h3 { margin:0 0 .15rem; font-size:13px; display:flex; align-items:center; gap:.4rem; }
.ing-lectura h3 i { color:var(--vta-verde); font-size:16px; }
.ing-lectura .cuando { font-size:10.5px; color:var(--ts); margin-bottom:.6rem; line-height:1.5; }
.ing-lectura-val { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.ing-lectura-det { display:flex; gap:.3rem 1rem; flex-wrap:wrap; font-size:11px; color:var(--ts); margin-top:.45rem; }
.ing-lectura-det b { color:var(--t); font-variant-numeric:tabular-nums; }
@media (max-width: 760px) { .ing-lecturas { grid-template-columns:1fr; } }

/* MRR contratado contra cobrado */
.ing-mrr-barra { height:10px; border-radius:10px; background:var(--c2); overflow:hidden; margin:.45rem 0 .3rem; }
.ing-mrr-barra i { display:block; height:100%; background:var(--g); border-radius:10px; }

/* Aviso de alcance para quien solo tiene el permiso de cobranza */
.ing-alcance { display:flex; gap:.5rem; align-items:flex-start; font-size:11.5px; line-height:1.5; color:var(--t);
  background:var(--green-bg); border:1px solid var(--green-br); border-radius:var(--r); padding:.55rem .7rem; margin-bottom:.8rem; }
.ing-alcance i { color:var(--vta-verde); font-size:16px; margin-top:.05rem; }

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

@media (max-width: 760px) {
  .ing-ant-caja { flex:1 1 100%; }
  .ing-cobro .der { margin-left:0; flex:1 1 100%; }
}

/* ─────────────────────────────────────────
   LAS FACTURAS DE UNA MENSUALIDAD

   Una mensualidad puede llevar VARIAS (26 de octubre de 2026): a Harinera de
   Chiapas se le emiten dos, una de Redes y otra de Diseño. La lista va encima
   del formulario de siempre, para que se vea de un golpe cuántas hay y si
   entre todas cubren el mes.
   ───────────────────────────────────────── */
.ing-fac-resumen { font-size:12px; color:var(--ts); margin-bottom:.5rem; }
.ing-fac-resumen b { color:var(--t); font-variant-numeric:tabular-nums; }
.ing-fac-ok { color:var(--go); font-weight:600; }
.ing-fac-ok i { font-size:13px; vertical-align:-2px; }
/* Lo que no cuadra se señala en ámbar, no en rojo: el papel ya está emitido y
   el sistema no puede desemitirlo. Es un aviso, no un error. */
.ing-fac-ojo { color:var(--yellow); font-weight:600; }

.ing-fac { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  border:1px solid var(--br); border-radius:var(--r); padding:.5rem .65rem; margin-bottom:.35rem; background:var(--c1); }
.ing-fac-datos { flex:1 1 220px; min-width:0; }
.ing-fac-tit { font-size:12.5px; font-weight:700; color:var(--t); }
.ing-fac-amp { font-weight:400; color:var(--ts); }
.ing-fac-amp::before { content:'· '; }
.ing-fac-sub { font-size:11px; color:var(--ts); margin-top:.1rem; font-variant-numeric:tabular-nums; }
.ing-fac-btns { display:flex; gap:.3rem; flex-shrink:0; }

@media (max-width: 560px) {
  .ing-fac-btns { flex:1 1 100%; justify-content:flex-end; }
}

/* ────────────────────────────────────────────────────────────
   QUÉ SERVICIOS AMPARA UNA FACTURA (etapa 2)

   La mensualidad ya sabe de qué está hecha; esto la saca a la superficie
   para que marcar sustituya a teclear. Un renglón que ya cubre otra
   factura sale apagado y dice en cuál: saber que está tomado sin saber
   dónde obliga a ir a buscarlo, que es lo que se quiere evitar.
   ──────────────────────────────────────────────────────────── */
.ing-ampara {
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: .6rem .7rem;
  margin: 0 0 .75rem;
  background: var(--c2);
}
.ing-ampara-tit {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ts);
  margin-bottom: .45rem;
}
.ing-ampara-r {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--bd);
}
.ing-ampara-r:last-of-type { border-bottom: 0; }
.ing-ampara-r.ocupado { cursor: default; opacity: .55; }
.ing-ampara-r input { flex: 0 0 auto; }
.ing-ampara-n { flex: 1 1 auto; font-size: 13px; }
.ing-ampara-m { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
/* La pauta no es ingreso de la agencia: se marca para que no se confunda. */
.ing-ampara-p {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ts);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 0 .35rem;
}
.ing-ampara-ya {
  flex: 0 0 100%;
  font-size: 11px;
  color: var(--ts);
  padding-left: 1.6rem;
}
.ing-ampara-pie {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid var(--bd);
  font-size: 12px;
  color: var(--ts);
}
/* El subtotal calculado por la suma: se ve que no se teclea. */
.vta-inp.ing-calc {
  background: var(--c2);
  font-weight: 700;
}