/**
 * Deudas — desglose del saldo y simulador de compra.
 * Todo el color sale de css/tokens.css. Aquí no hay un solo hex.
 */

/* ─── Controles compartidos ───────────────────────────────────────────────── */

.des-controles,
.cmp-form {
  display: grid;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.des-controles-fila,
.cmp-form-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}

.des-controles label,
.cmp-form label {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

.des-controles input,
.des-controles select,
.cmp-form input {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.cmp-opcional {
  font-weight: var(--peso-normal);
  text-transform: none;
  letter-spacing: normal;
}

.cmp-form-acciones {
  display: flex;
  gap: var(--e-3);
}
.cmp-form-acciones .btn { flex: 1; min-height: var(--toque-min); }

/* ─── Desglose: resumen ───────────────────────────────────────────────────── */

.des-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--regla);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--borde-fuerte);
  margin-bottom: var(--e-4);
}

.des-dato {
  background: var(--superficie);
  padding: var(--e-3) var(--e-2);
  text-align: center;
}

.des-dato-etiqueta {
  display: block;
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e-1);
}

.des-dato-valor {
  display: block;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-cifra);
}

.des-interes { color: var(--interes); }

.des-proyeccion {
  margin: 0 0 var(--e-4);
  padding: var(--e-3);
  border: var(--regla-fina) solid var(--borde);
  border-radius: var(--radio);
  font-size: var(--txt-2);
  line-height: var(--alto-linea);
}

.des-mas-vieja {
  margin: 0 0 var(--e-4);
  padding: var(--e-3);
  border-left: var(--e-2) solid var(--urgencia-media);
  background: var(--urgencia-media-fondo);
  font-size: var(--txt-2);
}

/* ─── Desglose: compras ───────────────────────────────────────────────────── */

.des-titulo {
  margin: var(--e-5) 0 var(--e-3);
  font-size: var(--txt-1);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  border-bottom: var(--regla-fina) solid var(--borde);
  padding-bottom: var(--e-2);
}

.des-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }

.des-compra {
  border: var(--regla-fina) solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-3);
  background: var(--superficie);
}

.des-compra-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

.des-compra-fecha {
  flex-shrink: 0;
  font-size: var(--txt-1);
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Capital contra interés, a escala. Se lee de un vistazo cuánto es puro cobro. */
.des-barra {
  display: flex;
  height: var(--e-3);
  border: var(--regla-fina) solid var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--e-2);
}

.des-barra-capital { background: var(--capital); }
.des-barra-interes { background: var(--interes); }

.des-compra-cifras {
  margin: 0;
  font-size: var(--txt-1);
  color: var(--texto-suave);
  line-height: var(--alto-linea);
}

.des-al-corriente {
  padding: var(--e-4);
  border: var(--regla) solid var(--capital);
  border-radius: var(--radio);
  background: var(--capital-fondo);
  text-align: center;
  font-weight: var(--peso-fuerte);
}

/* ─── Desglose: rankings ──────────────────────────────────────────────────── */

.des-ranking { list-style: none; margin: 0; padding: 0; }

.des-ranking li {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding: var(--e-2) 0;
  border-bottom: var(--regla-fina) solid var(--borde);
}
.des-ranking li:last-child { border-bottom: 0; }
.des-ranking li > span:first-child { flex: 1; min-width: 40%; }
.des-ranking strong { font-variant-numeric: tabular-nums; }

.des-sobrecosto {
  width: 100%;
  font-size: var(--txt-1);
  color: var(--texto-suave);
}

.des-nota,
.des-advertencia {
  margin: var(--e-3) 0 0;
  font-size: var(--txt-1);
  color: var(--texto-suave);
  line-height: var(--alto-linea);
}

.des-advertencia {
  margin-top: var(--e-5);
  padding: var(--e-3);
  border: var(--regla-fina) dashed var(--borde-fuerte);
  border-radius: var(--radio);
}

/* ─── Simulador: veredicto ────────────────────────────────────────────────── */

.cmp-veredicto {
  border: var(--regla) solid var(--borde-fuerte);
  border-top: var(--regla-activa) solid var(--acento);
  border-radius: var(--radio);
  background: var(--superficie-elevada);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}

.cmp-veredicto-texto {
  margin: 0;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  line-height: var(--alto-linea);
}

/* Cuando no alcanza ninguna, el borde superior no promete nada. */
.cmp-veredicto[data-recomendacion='ninguna'] { border-top-color: var(--interes); }

/* ─── Simulador: columnas ─────────────────────────────────────────────────── */

.cmp-columnas { display: grid; gap: var(--e-3); }

.cmp-opcion {
  border: var(--regla) solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-3);
  background: var(--superficie);
}

.cmp-elegida {
  border-color: var(--meta-regla);
  border-left-width: var(--e-2);
  background: var(--meta-fondo);
}

.cmp-opcion h4 {
  margin: 0 0 var(--e-2);
  font-size: var(--txt-2);
  font-weight: var(--peso-fuerte);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.cmp-sello {
  font-size: var(--txt-1);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--meta-texto);
  border: var(--regla-fina) solid var(--meta-regla);
  border-radius: var(--radio);
  padding: 0 var(--e-2);
}

.cmp-precio {
  margin: 0 0 var(--e-2);
  font-size: var(--txt-4);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-cifra);
}

.cmp-mensualidad {
  margin: 0 0 var(--e-3);
  font-size: var(--txt-2);
  font-weight: var(--peso-medio);
}

.cmp-quincenal {
  display: block;
  font-size: var(--txt-1);
  font-weight: var(--peso-normal);
  color: var(--texto-suave);
}

.cmp-detalle { margin: 0; font-size: var(--txt-1); }

.cmp-detalle > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-1) 0;
  border-top: var(--regla-fina) solid var(--borde);
}

.cmp-detalle dt { color: var(--texto-suave); }
.cmp-detalle dd {
  margin: 0;
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ─── Simulador: alertas ──────────────────────────────────────────────────── */

.cmp-alertas {
  list-style: none;
  margin: var(--e-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}

.cmp-alertas li {
  border-left: var(--e-2) solid var(--urgencia-media);
  background: var(--urgencia-media-fondo);
  padding: var(--e-3);
  font-size: var(--txt-2);
  line-height: var(--alto-linea);
}

/* El sobreprecio no es una advertencia suave: el "0%" era mentira. */
.cmp-alertas li[data-alerta='sobreprecio'] {
  border-left-color: var(--interes);
  background: var(--interes-fondo);
}

/* ─── Pantallas anchas ────────────────────────────────────────────────────── */

@media (min-width: 560px) {
  .cmp-columnas { grid-template-columns: 1fr 1fr; }
}