/**
 * Plan de liquidación — estilos.
 * Sigue el lenguaje manga del resto de la app: bordes gruesos, sombras duras.
 * Responsive hasta 360px, que es donde esta pantalla más sufre.
 */

/* ─── Agenda de pagos ─────────────────────────────────────────────────────── */

.liq-agenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;}

.liq-agenda-item {
  border: var(--regla) solid var(--borde-fuerte);
  border-left-width: 8px;
  border-radius: var(--radio);
  padding: 10px 12px;
  background: var(--superficie);
  color: var(--texto);}

.liq-agenda-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;}

.liq-agenda-texto { font-weight: 800; font-size: 15px;}
.liq-agenda-monto { font-weight: 900; color: var(--acento-texto); white-space: nowrap;}
.liq-agenda-fecha { font-size: 12px; color: var(--texto); opacity: .65; margin: 2px 0 0; text-transform: capitalize;}
.liq-agenda-detalle { font-size: 12px; color: var(--texto); opacity: .8; margin: 6px 0 0; line-height: 1.4;}

.liq-urg-vencido { border-left-color: var(--interes); background: color-mix(in srgb, var(--interes) 12%, var(--superficie));}
.liq-urg-hoy { border-left-color: var(--interes); background: color-mix(in srgb, var(--interes) 8%, var(--superficie));}
.liq-urg-urgente { border-left-color: var(--urgencia-media);}
.liq-urg-proximo { border-left-color: var(--acento-texto);}
.liq-urg-lejano { border-left-color: var(--borde);}

.liq-aviso {
  background: color-mix(in srgb, var(--urgencia-media) 14%, var(--superficie));
  color: var(--texto);
  border: var(--regla) dashed var(--urgencia-media);
  border-radius: var(--radio);
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 12px;
  line-height: 1.45;}

/* ─── ¿Cuándo lo pago? ────────────────────────────────────────────────────── */

.liq-cuando-controles {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;}

.liq-cuando-tarjeta {
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 12px;
  margin-bottom: 10px;
  background: var(--superficie);
  color: var(--texto);}

.liq-cuando-mejor {
  background: color-mix(in srgb, var(--acento) 14%, var(--superficie));}

.liq-cuando-encabezado {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;}

.liq-cuando-pago { margin: 0; font-size: 16px;}
.liq-cuando-detalle { margin: 4px 0 0; font-size: 12px; color: var(--texto); opacity: .75; line-height: 1.4;}

.liq-badge {
  background: var(--capital);
  color: var(--texto-invertido);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;}

/* ─── Fecha de libertad ───────────────────────────────────────────────────── */

.liq-libertad {
  text-align: center;
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 16px 12px;
  background: color-mix(in srgb, var(--acento) 12%, var(--superficie));
  color: var(--texto);
  margin-bottom: 18px;}

.liq-libertad-etiqueta { margin: 0; font-size: 13px; font-weight: 700; color: var(--texto); opacity: .7;}
.liq-libertad-fecha {
  margin: 4px 0;
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 900;
  color: var(--acento-texto);
  line-height: 1.1;
  text-transform: capitalize;}
.liq-libertad-detalle { margin: 0; font-size: 13px; color: var(--texto); opacity: .75;}

/* ─── Gráfica ─────────────────────────────────────────────────────────────── */

.liq-grafica {
  width: 100%;
  height: auto;
  display: block;
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  margin-bottom: 18px;}

.liq-area { fill: var(--acento); opacity: 0.12;}
.liq-linea { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;}
.liq-barra-interes { fill: var(--interes); opacity: 0.35;}
.liq-hito { fill: var(--capital); stroke: var(--borde-fuerte); stroke-width: 2;}
.liq-eje { font-size: 11px; fill: currentColor; opacity: .6; font-weight: 700;}

/* ─── Comparación de estrategias ──────────────────────────────────────────── */

.liq-estrategias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;}

.liq-estrategia {
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 12px;
  background: var(--superficie);
  color: var(--texto);
  text-align: center;}

.liq-estrategia-gana {
  background: color-mix(in srgb, var(--capital) 14%, var(--superficie));}

.liq-estrategia h4 {
  margin: 0 0 8px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;}

.liq-est-dato { margin: 0; font-size: 22px; font-weight: 900; color: var(--acento-texto);}
.liq-est-nunca { font-size: 15px; color: var(--interes);}
.liq-est-interes { margin: 4px 0 0; font-size: 12px; color: var(--texto); opacity: .75;}

.liq-ahorro {
  text-align: center;
  font-size: 14px;
  margin: 0 0 16px;
  padding: 10px;
  border: var(--regla) dashed var(--acento);
  border-radius: var(--radio);}

/* ─── Caso "nunca se liquida" ─────────────────────────────────────────────── */

.liq-no-liquidable {
  border: var(--regla-activa) solid var(--interes);
  border-radius: var(--radio);
  padding: 16px;
  background: color-mix(in srgb, var(--interes) 12%, var(--superficie));
  color: var(--texto);}

.liq-no-liquidable h4 { margin: 0 0 10px; font-size: 18px; color: var(--interes);}
.liq-no-liquidable p { margin: 0 0 10px; font-size: 14px; line-height: 1.5;}
.liq-no-liquidable-salida {
  border-top: var(--regla) dashed var(--interes);
  padding-top: 10px;
  margin-bottom: 0 !important;}

/* ─── Orden de liquidación ────────────────────────────────────────────────── */

.liq-despues {
  border: var(--regla) solid var(--capital);
  border-radius: var(--radio);
  padding: 12px;
  background: color-mix(in srgb, var(--capital) 12%, var(--superficie));
  color: var(--texto);
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;}
.liq-despues p { margin: 0;}

.liq-orden { margin: 0; padding-left: 22px;}
.liq-orden li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: var(--regla-fina) dashed var(--borde);
  font-size: 14px;}
.liq-orden-nombre { font-weight: 700;}
.liq-orden-q { color: var(--texto); opacity: .65; font-size: 12px; white-space: nowrap;}

/* ─── Lista de deudas ─────────────────────────────────────────────────────── */

.liq-deudas-lista { list-style: none; margin: 0 0 14px; padding: 0;}

.liq-deuda {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  margin-bottom: 8px;
  background: var(--superficie);
  color: var(--texto);}

.liq-deuda-info { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.liq-deuda-info strong { font-size: 15px; overflow-wrap: anywhere;}
.liq-deuda-meta { font-size: 12px; color: var(--texto); opacity: .75;}

.liq-borrar {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding: var(--e-2);
  border-radius: var(--radio);
  flex-shrink: 0;}

/* ─── Formulario ──────────────────────────────────────────────────────────── */

.liq-form { display: grid; gap: 10px;}
.liq-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.liq-form label { font-size: 12px; font-weight: 700; display: block; margin-bottom: 4px;}

/* ─── Accesibilidad ───────────────────────────────────────────────────────── */

.liq-borrar:focus-visible,
#liq-exportar-ics:focus-visible,
.liq-form input:focus-visible {
  outline: var(--regla-activa) solid var(--acento);
  outline-offset: 2px;}

@media (prefers-reduced-motion: reduce) {
  .liq-agenda-item,
  .liq-estrategia,
  .liq-cuando-tarjeta {
    transition: none;}
}

/* ─── 360px ───────────────────────────────────────────────────────────────── */

@media (max-width: 400px) {
  .liq-estrategias { grid-template-columns: 1fr;}
  .liq-form-fila { grid-template-columns: 1fr;}
  .liq-cuando-controles { flex-direction: column; align-items: stretch;}
  .liq-agenda-monto { font-size: 14px;}
  .liq-orden li { flex-direction: column; gap: 2px;}
  .liq-orden-q { align-self: flex-start;}
}

/* ─── Fecha en la agenda de contratos ─────────────────────────────────────── */
.agenda-fecha {
  background: var(--superficie-elevada);
  color: var(--texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: var(--e-1) var(--e-2);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;}