/* H5 · La plata en el portal: servicios, pagos, comisiones y proveedores. Todo bajo .plata__…
   Lenguaje «Bitácora»: el libro de cuentas del cuaderno. Montos y códigos en Plex Mono, un sello
   verde cae cuando una cuota se cubre (sello = cambió de estado) y el formulario es un papel que se
   levanta (otra capa). Nada se mueve en bucle y todo respeta «reducir movimiento». */
.plata { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; padding: 24px 16px 64px; }
.plata__cabeza { display: grid; gap: 4px; }
.plata__cabeza h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.05; overflow-wrap: anywhere; }
.plata__rotulo { font: 600 10px var(--letra-codigo); letter-spacing: .16em; text-transform: uppercase; color: var(--laton); }
.plata__fechas { color: var(--gris); font-size: 14px; }
.plata__pestanas { margin-top: 6px; }
.plata__barra, .plata__seccion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plata__barra h2, .plata__seccion h2, .plata__cuentas h2 { font-size: 22px; }
.plata__bloque, .plata__grupo { display: grid; gap: 10px; }
.plata__tipo { font: 600 11px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.plata__lista, .plata__monedas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ---- Las tarjetas: un servicio, una comisión, una cuota, un pago ---- */
.plata__servicio, .plata__comision, .plata__cuota, .plata__pago {
  position: relative; padding: 14px 16px; border-radius: var(--radio); background: var(--hoja); box-shadow: var(--sombra);
}
.plata__servicio, .plata__comision { display: grid; gap: 10px; }
.plata__servicio-cabeza { display: grid; gap: 2px; min-width: 0; }
.plata__servicio-cabeza h3 { font-size: 19px; overflow-wrap: anywhere; }
.plata__servicio-cabeza h3 a { text-decoration: none; }
.plata__opcion {
  justify-self: start; padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--laton);
  font: 600 10px var(--letra-codigo); letter-spacing: .12em; text-transform: uppercase; color: var(--laton);
}
.plata__proveedor { color: var(--gris); font-size: 13.5px; overflow-wrap: anywhere; }
.plata__detalles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.plata__detalles dt { font: 600 9.5px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-claro); }
.plata__detalles dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.plata__codigo { font-family: var(--letra-codigo); letter-spacing: .04em; }
.plata__monto { font-family: var(--letra-codigo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plata__botones { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.plata__borrar { color: var(--oxido); }

/* ---- El papel que se levanta: los formularios ---- */
.plata__editor {
  display: grid; gap: 14px; padding: 18px; border-radius: var(--radio); background: var(--hoja);
  box-shadow: 0 22px 40px -28px rgba(40, 30, 20, .7), 0 0 0 1px rgba(27, 36, 51, .1);
  animation: plata-papel 260ms var(--suave) both;
}
.plata__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.plata__momento, .plata__viajeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; padding: 12px;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico);
}
.plata__momento legend, .plata__viajeros legend { padding: 0 6px; font: 600 10px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.plata__viajeros label { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.plata__vacio { display: grid; gap: 8px; justify-items: start; }
.plata__vacio-trazo { width: 100%; max-width: 320px; height: 40px; fill: none; stroke: var(--laton); stroke-width: 1.5; stroke-dasharray: 4 6; }

/* ---- El estado de cuenta, por moneda ---- */
.plata__cuentas { display: grid; gap: 14px; }
.plata__moneda {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 14px;
  border-radius: var(--radio-chico); background: var(--hoja-2); box-shadow: inset 0 0 0 1px var(--borde);
}
.plata__codigo-moneda { padding: 6px 8px; border-radius: 6px; background: var(--tinta); color: #F6F0E4; font: 600 13px var(--letra-codigo); letter-spacing: .12em; }
.plata__moneda dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.plata__moneda dt { font: 600 9.5px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris-claro); }
.plata__moneda dd { margin: 2px 0 0; font: 500 15px var(--letra-codigo); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plata__saldo dd { font-weight: 600; }
.plata__saldo--debe dd { color: var(--oxido); }
.plata__nada { color: var(--gris); font-size: 14px; }
.plata__aviso { color: var(--tinta); background: rgba(168, 134, 79, .14); }

/* ---- Cuotas y pagos ---- */
.plata__cuota, .plata__pago { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.plata__cuota .plata__botones, .plata__pago .plata__botones { grid-column: 1 / -1; }
.plata__cuota-texto { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.plata__cuota-texto small { color: var(--gris); font-size: 12.5px; }
.plata__cuota--vencida { box-shadow: var(--sombra), inset 3px 0 0 var(--oxido); }
.plata__cuota--vencida .plata__cuota-texto small { color: var(--oxido); }
.plata__cuota--pagada .plata__monto { color: var(--verde); }
.plata__sello {
  position: absolute; right: 14px; bottom: 12px; padding: 2px 10px; border: 2px solid var(--verde); border-radius: 6px;
  color: var(--verde); font: 700 11px var(--letra-codigo); letter-spacing: .18em; text-transform: uppercase;
  transform: rotate(-8deg); opacity: .85; pointer-events: none;
}
.plata__sello--cae { animation: plata-sello 340ms var(--resorte) both; }

/* ---- Comisiones y proveedores ---- */
.plata__filtro { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.plata__cobrar, .plata__confirmar { display: grid; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--borde-fuerte); }
.plata__historia { padding-block: 8px; }
.plata__historia summary { cursor: pointer; min-height: 44px; align-content: center; }
.plata__buscar { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }

@keyframes plata-sello { from { transform: rotate(-20deg) scale(1.9); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: .85; } }
@keyframes plata-papel { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plata__sello--cae, .plata__editor { animation: none; } }
@media (max-width: 520px) {
  .plata__moneda { grid-template-columns: 1fr; }
  .plata__moneda dl { grid-template-columns: 1fr 1fr; }
  .plata__cuota, .plata__pago, .plata__buscar { grid-template-columns: 1fr; }
}