/* ==========================================================================
   CHASQUI — gastos.css
   Los gastos con su boleta y la rendición (vistas gastos y rendicion).
   --------------------------------------------------------------------------
   1  Lista de gastos: grupos por jornada, filas, pendientes sin señal
   2  El formulario de plata: monto grande y vista previa de la foto
   3  La boleta en el modal
   4  Rendición: cifras, tabla por persona, barras, caja
   5  Teléfono e impresión

   Se apoya en lo compartido de app.css (.lista, .cifras, .tarjeta, .datos,
   .segmentos, .nota) y en .barra de base.css. No trae colores propios:
   todo sale de los tokens de base.css y app.css.
   ========================================================================== */

/* ── 1 · LISTA DE GASTOS ────────────────────────────────────────────────── */
.gastos__filtros{align-self:flex-start}
.gastos__grupos{display:flex;flex-direction:column;gap:1.5rem}
.gastos__grupo{display:flex;flex-direction:column;gap:.55rem}
.gastos__grupo-cab{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;padding-inline:.2rem}
.gastos__grupo-titulo{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.2rem .55rem;
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:106%;
  font-size:1.08rem;
  letter-spacing:-.015em;
}
.gastos__grupo-fecha{
  font-family:var(--f-mono);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.07em;
  color:var(--sodio-texto);
}
.gastos__grupo-dia{font-family:var(--f-body);font-size:.86rem;font-weight:500;letter-spacing:0;color:var(--tx-3)}
.gastos__grupo-total{
  margin-left:auto;
  font-family:var(--f-mono);
  font-weight:700;
  font-feature-settings:"tnum" 1;
  color:var(--tx-2);
}

/* La categoría va donde otras listas ponen su código: en mono, chica. */
.gastos__categoria{min-width:6.6rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.gastos__sin-boleta{font-weight:600;color:var(--alerta)}
.gastos__falta-boleta{color:var(--alerta)}
span.gastos__falta-boleta{display:inline-grid;place-items:center;width:var(--tactil);height:var(--tactil)}

/* Guardado sin señal: rayado, como algo que todavía no está firme. */
.gastos__fila.is-pendiente{
  background:repeating-linear-gradient(135deg,var(--sodio-tinte) 0 10px,transparent 10px 20px);
  box-shadow:inset 3px 0 0 var(--sodio);
}
.gastos__fila.is-pendiente .lista__monto{color:var(--tx-2)}
.gastos__pendiente{display:inline-grid;place-items:center;width:var(--tactil);height:var(--tactil);color:var(--sodio-texto)}
.gastos__cola .seccion-app__cab p{margin:0}

/* ── 2 · FORMULARIO DE PLATA ────────────────────────────────────────────── */
/*  El monto es lo primero y lo más grande: en la bencinera se tipea con una
    mano y hay que verlo sin lentes.                                         */
.gasto-form .campo--monto .campo__control{
  min-height:64px;
  padding-block:.5rem;
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:110%;
  font-size:clamp(1.9rem,7vw,2.5rem);
  letter-spacing:-.025em;
  font-feature-settings:"tnum" 1;
}
.gasto-form__eco{
  min-height:1.3em;
  margin-top:-.7rem;
  font-family:var(--f-mono);
  font-size:.86rem;
  font-weight:600;
  color:var(--sodio-texto);
}
.gasto-form__eco:empty{visibility:hidden}
.gasto-form .campo__radios{gap:.4rem}
.gasto-form .campo__radio{padding:.35rem .8rem;font-size:.92rem}
.gasto-form__vista{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.6rem .7rem;
  border:1px dashed var(--brd-2);
  border-radius:var(--radio-sm);
  background:var(--sup-2);
}
.gasto-form__miniatura{
  flex:none;
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:6px;
  background:var(--papel);
  box-shadow:var(--sombra-1);
}
.gasto-form__icono{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:6px;background:var(--sup-3);color:var(--tx-2)}
.gasto-form__vista-texto{margin:0;font-size:.88rem;line-height:1.45;color:var(--tx-2)}

/* ── 3 · LA BOLETA EN EL MODAL ──────────────────────────────────────────── */
.boleta{display:flex;flex-direction:column;align-items:center;gap:.85rem;margin:0}
.boleta__papel{
  display:grid;
  place-items:center;
  width:100%;
  padding:1rem;
  border-radius:var(--radio);
  background:
    repeating-linear-gradient(115deg,var(--fibra) 0 2px,transparent 2px 9px),
    var(--hondo);
}
.boleta__imagen{
  display:block;
  width:min(100%,340px);
  height:auto;
  max-height:min(62dvh,560px);
  object-fit:contain;
  border-radius:3px;
  background:var(--papel);
  box-shadow:var(--sombra-papel);
}
.boleta__pdf,.boleta__aviso{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  max-width:32ch;
  margin:0;
  padding:1.2rem;
  color:var(--tx-2);
  text-align:center;
}
.boleta__pie{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center}
.boleta__descripcion{font-weight:600}
.boleta__monto{font-family:var(--f-mono);font-weight:700;font-size:1.1rem;font-feature-settings:"tnum" 1}
.boleta__detalle{font-size:.86rem;color:var(--tx-3)}

/* ── 4 · RENDICIÓN ──────────────────────────────────────────────────────── */
.rendicion__estado{display:inline-flex;align-items:center;min-height:var(--tactil)}
.rendicion__cifras .cifra__valor{font-size:clamp(1.55rem,4.4vw,2.15rem)}
.rendicion__boletas{margin-top:-.6rem;font-size:.9rem}
.rendicion__total{font-family:var(--f-mono);font-weight:700;font-feature-settings:"tnum" 1;white-space:nowrap}
.rendicion__pie{font-size:.92rem}

/* Por persona: una tabla de verdad (se lee con lector de pantalla). */
.rendicion__tabla{width:100%;border-collapse:collapse;font-size:.95rem}
.rendicion__tabla th,.rendicion__tabla td{
  padding:.7rem .55rem;
  border-top:1px solid var(--brd);
  text-align:left;
  vertical-align:top;
  font-weight:400;
}
.rendicion__tabla thead th{
  padding-top:0;
  border-top:0;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.rendicion__tabla th:first-child,.rendicion__tabla td:first-child{padding-left:0}
.rendicion__tabla th:last-child,.rendicion__tabla td:last-child{padding-right:0}
.rendicion__tabla .rendicion__num{
  text-align:right;
  font-family:var(--f-mono);
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
}
.rendicion__tabla tfoot th,.rendicion__tabla tfoot td{border-top:2px solid var(--brd-2);font-weight:700}
.rendicion__nombre{display:block;font-weight:600}
.rendicion__lectura{display:block;margin-top:.1rem;font-size:.84rem;font-weight:500;color:var(--tx-3)}
.rendicion__saldo{font-weight:700}
.rendicion__saldo--tiene{color:var(--sodio-texto)}
.rendicion__saldo--debe{color:var(--alto)}
.rendicion__saldo--cero{color:var(--tx-3)}

/* Por jornada y por categoría: filas con barra proporcional. */
.rendicion__barras{display:flex;flex-direction:column;gap:.8rem;margin:0;padding:0;list-style:none}
.rendicion__barra-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.3rem .8rem}
.rendicion__barra-nombre{min-width:0;font-weight:600;overflow-wrap:anywhere}
.rendicion__barra-fecha{
  margin-right:.45rem;
  font-family:var(--f-mono);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--tx-3);
}
.rendicion__barra-monto{font-family:var(--f-mono);font-weight:700;font-feature-settings:"tnum" 1}
.rendicion__barra-fila .barra{grid-column:1/-1;margin:0}
.rendicion__barras--categoria .barra__relleno{background:var(--sodio)}

/* La ecuación de la caja, debajo de los aportes. */
.rendicion__caja{padding-top:.4rem;border-top:1px dashed var(--brd-2)}
.rendicion__caja dd{font-family:var(--f-mono);font-feature-settings:"tnum" 1;text-align:right}
.rendicion__caja-total{font-weight:700;color:var(--tx)}

/* ── 5 · TELÉFONO E IMPRESIÓN ───────────────────────────────────────────── */
@media (max-width:560px){
  /* La categoría pasa arriba del título: la fila deja espacio para el monto. */
  .gastos__categoria{order:-1;flex-basis:100%;min-width:0;margin-bottom:-.4rem}

  /* La tabla por persona se vuelve una ficha por persona. Los role= del
     HTML mantienen la semántica de tabla aunque cambie el display. */
  .rendicion__cabeza{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rendicion__tabla tr{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.35rem .6rem;
    padding:.75rem 0;
    border-top:1px solid var(--brd);
  }
  .rendicion__tabla tbody tr:first-child{border-top:0}
  .rendicion__tabla tfoot tr{border-top:2px solid var(--brd-2)}
  .rendicion__tabla th,.rendicion__tabla td,.rendicion__tabla tfoot th,.rendicion__tabla tfoot td{padding:0;border:0}
  .rendicion__tabla .rendicion__quien{grid-column:1/-1}
  .rendicion__tabla .rendicion__num{text-align:left;font-size:.9rem}
  .rendicion__tabla td[data-etiqueta]::before{
    content:attr(data-etiqueta);
    display:block;
    font-family:var(--f-mono);
    font-size:.66rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--tx-3);
  }
}

@media print{
  .rendicion__cifras .cifra,.rendicion__personas,.rendicion__tabla tr{break-inside:avoid}
  .tarjeta{box-shadow:none;background:var(--papel)}
  .gastos__fila .boton-icono{display:none}
}