/* ===========================================================================
   PANTALLA INGRESOS — Central Ensigna  (F1)
   Teléfono primero (390px). En compu (≥ 960px): la cifra del mes con las
   barras al lado, y la dona con la lista al lado.
   =========================================================================== */
.pg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pg.pg-cargando .pg-cuerpo { opacity: .55; }
.pg-cuerpo { transition: opacity .2s ease; min-width: 0; }
.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pg-grid > * { min-width: 0; }

.pg-barra { display: grid; gap: 10px; min-width: 0; }
.pg-marcas {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: -4px calc(-1 * max(16px, var(--sa-der))) -4px calc(-1 * max(16px, var(--sa-izq)));
  padding: 4px max(16px, var(--sa-der)) 4px max(16px, var(--sa-izq));
}
.pg-marcas::-webkit-scrollbar { display: none; }
.pg-marcas .chip { flex: 0 0 auto; }
.pg-anotar { min-height: 50px; }

/* la cifra del mes */
.pg-mes { display: grid; gap: 8px; padding: 20px; border-radius: 26px; overflow: hidden; align-content: start; }
.pg-mes-cifra { font-size: clamp(46px, 14vw, 62px); margin-top: 4px; }
.pg-mes-bs { font-size: 14.5px; color: var(--texto-2); }
.pg-mes-delta { min-height: 20px; }
.pg-mes-delta .delta { font-size: 14px; white-space: normal; flex-wrap: wrap; }
.pg-mes-pie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--linea); padding-top: 14px; margin-top: 8px; }
.pg-mes-dato { display: grid; gap: 2px; min-width: 0; }
.pg-mes-dato + .pg-mes-dato { border-left: 1px solid var(--linea); padding-left: 12px; }
.pg-mes-dato small { font-size: 12.5px; color: var(--texto-3); }
.pg-mes-dato strong { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.pg-dona { display: grid; gap: 12px; align-content: start; }

/* nota fija y honesta */
.pg-nota {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: var(--radio-chico);
  background: var(--campo-2); border: 1px solid var(--linea); font-size: 13px; line-height: 1.45; color: var(--texto-2);
}
.pg-nota .ico { color: var(--acento); margin-top: 1px; }

/* lista agrupada por mes */
.pg-lista { display: grid; gap: 12px; align-content: start; }
.pg-meses { display: grid; gap: 16px; }
.pg-mes-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linea-fuerte); }
.pg-mes-cab h4 { margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.pg-mes-cab span { font-size: 14px; font-weight: 700; }
.pg-fila { gap: 12px; }
.pg-fila-ico { position: relative; }
.pg-fila-ico::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gf-color, var(--texto-3)); box-shadow: 0 0 0 2px var(--superficie-solida);
}
.pg-fila-textos { display: grid; min-width: 0; }
.pg-fila-monto { display: grid; justify-items: end; gap: 2px; line-height: 1.25; }
.pg-fila-monto small { font-size: 12.5px; color: var(--texto-3); }
.pg-auto { display: inline-flex; align-items: center; gap: 4px; color: var(--acento) !important; font-weight: 600; }

.pg-mes-viejo { display: none; }
.pg-meses-abiertos .pg-mes-viejo { display: block; }
.pg-meses-mas { justify-self: center; }
.pg-meses-abiertos .pg-meses-mas .ico { transform: rotate(180deg); }
.pg-mes-chispa { display: none; }

.pg-vacio { display: grid; gap: 6px; }
.pg-vacio .vacio { padding: 24px 12px 18px; }

/* hoja: anotar / editar */
.pg-form { display: grid; gap: 14px; }
.pg-form-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pg-form-monto input { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; min-height: 54px; font-variant-numeric: tabular-nums; }
.pg-form-moneda select { min-height: 54px; }
.pg-form-equiv { margin-top: -6px; }
.pg-form-botones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 2px; }
.pg-form-botones:has(.pg-form-borrar) { grid-template-columns: auto minmax(0, 1fr); }
.pg-form-guardar { min-height: 50px; }
.pg-form-borrar { min-height: 50px; color: var(--sale); }

/* ── compu ──────────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
  .pg { gap: 16px; }
  .pg-barra { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pg-marcas { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .pg-anotar { min-height: 46px; }
  .pg-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .pg-mes { grid-column: span 5; padding: 24px; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
  .pg-mes-chispa { display: block; align-self: end; min-height: 84px; margin-top: 8px; }
  .pg-mes-pie { align-self: end; }
  .pg-mes-cifra { font-size: 60px; }
  .pg-barras { grid-column: span 7; }
  .pg-dona { grid-column: span 5; align-self: start; position: sticky; top: 92px; }   /* acompaña mientras se recorre la lista */
  .pg-lista { grid-column: span 7; }
  .pg-vacio { max-width: 640px; margin: 0 auto; width: 100%; }
}