/* ================================================
 * TRACKR — Vista Dinero (ex-Gastos)
 * Resumen financiero, ingresos, gastos, trimestral
 * Dependencias: variables.css
 * ================================================ */

/* ── Resumen financiero Dinero ── */
.din-fin{
  background:var(--bg2);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:1.25rem;
  margin-bottom:1.25rem;
}
.din-fin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.din-fin-nav{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.din-fin-period{
  font-size:.95rem;
  font-weight:500;
}
.din-fin-body{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.din-tax-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  color:var(--t3);
}
.din-tax-row .m{
  font-family:'DM Mono',monospace;
  color:var(--t2);
}
.din-tax-total{
  font-weight:500;
  color:var(--t1);
  padding-top:.35rem;
  border-top:1px solid var(--b1);
  width:100%;
  justify-content:space-between;
}

/* ── Gastos section header ── */
.din-gastos-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem;
}

/* ── Empty state ── */
.din-empty{
  font-size:.82rem;
  color:var(--t3);
  padding:.75rem 0;
}

/* ── Trimestral cards ── */
.din-trim-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:.75rem;
  margin-top:.75rem;
}
.din-trim-card{
  background:var(--bg3);
  border:1px solid var(--b1);
  border-radius:var(--r);
  padding:1rem;
}
.din-trim-title{
  font-size:.78rem;
  font-weight:500;
  color:var(--t2);
  margin-bottom:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ── Deducibles (Renta) ── */
.din-ded-list{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin-top:.75rem;
}
.din-ded-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.55rem .75rem;
  background:var(--bg2);
  font-size:.82rem;
}
.din-ded-cat{
  font-size:.68rem;
  padding:.15rem .5rem;
  border:1px solid var(--b2);
  border-radius:var(--r);
  color:var(--t2);
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:nowrap;
  min-width:80px;
  text-align:center;
}
.din-ded-desc{
  flex:1;
  color:var(--t3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.din-ded-amount{
  font-family:'DM Mono',monospace;
  font-weight:500;
  min-width:80px;
  text-align:right;
}

/* ── Tipo de ingreso (factura/por hora) ── */
.din-tipo{font-size:.62rem;color:var(--t3);text-transform:uppercase;letter-spacing:.03em;min-width:65px;text-align:right;flex-shrink:0}

/* ── Lista de gastos (existing) ── */
.gas-list{display:flex;flex-direction:column;gap:.5rem}

/* ── Card de gasto ── */
.gas-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden}
.gas-header{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;cursor:pointer;transition:background var(--tr)}
.gas-header:hover{background:var(--bg3)}
.gas-name{flex:1;font-weight:500;font-size:.9rem}
.gas-badges{display:flex;gap:.35rem;align-items:center;flex-shrink:0;justify-content:flex-end}
.gas-cat{font-size:.68rem;padding:.15rem .5rem;border:1px solid var(--b2);border-radius:var(--r);color:var(--t2);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.gas-total{font-family:'DM Mono',monospace;font-size:.88rem;font-weight:500;min-width:85px;text-align:right;flex-shrink:0}
.gas-date-info{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--t3);min-width:80px;text-align:right;flex-shrink:0}
.gas-count{font-size:.72rem;color:var(--t3);min-width:50px;text-align:right;flex-shrink:0}
.gas-actions{display:flex;gap:.25rem;flex-shrink:0}

/* ── Chevron expandible ── */
.gas-chevron{font-size:.7rem;color:var(--t3);transition:transform .15s ease;display:inline-block}
.gas-header.expanded .gas-chevron{transform:rotate(90deg)}

/* ── Cuerpo expandible (entradas) ── */
.gas-body{display:none;border-top:1px solid var(--b1);padding:.75rem 1rem}
.gas-body.open{display:block}

/* ── Entrada de gasto ── */
.gas-entry{display:flex;align-items:center;gap:.75rem;padding:.4rem 0;font-size:.82rem;border-bottom:1px solid var(--b1)}
.gas-entry:last-child{border-bottom:none}
.gas-e-date{font-family:'DM Mono',monospace;font-size:.75rem;color:var(--t3);min-width:75px}
.gas-e-amount{font-family:'DM Mono',monospace;font-weight:500;min-width:65px}
.gas-e-nota{flex:1;color:var(--t3);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gas-e-edit,.gas-e-del{color:var(--t3);cursor:pointer;opacity:.4;transition:all var(--tr);background:none;border:none;font-size:.85rem}
.gas-e-edit:hover{color:var(--t1);opacity:1}
.gas-e-del:hover{color:var(--bad);opacity:1}

/* ── Recurrencia badge ── */
.gas-rec{font-size:.62rem;padding:.1rem .35rem;border-radius:var(--r);background:var(--bg4);color:var(--t2);text-transform:uppercase;letter-spacing:.02em}

/* ── Desgravable badge ── */
.gas-ded{font-size:.62rem;padding:.1rem .35rem;border-radius:var(--r);background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);text-transform:uppercase;letter-spacing:.02em}

/* ── Finalizado badge ── */
.gas-fin{font-size:.62rem;padding:.1rem .35rem;border-radius:var(--r);background:color-mix(in srgb,var(--t3) 15%,transparent);color:var(--t3);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}