:root {
  --fondo: #f5f7fa;
  --superficie: #ffffff;
  --borde: #e2e7ee;
  --texto: #1e2733;
  --suave: #66707d;
  --acento: #2f8a6b;
  --acento-suave: #e3f4ed;
  --alerta: #c8553d;
  --alerta-suave: #fcebe6;
  --usd: #3b6fc4;
  --radio: 10px;
  --sombra: 0 1px 2px rgb(30 39 51 / 0.05), 0 2px 8px rgb(30 39 51 / 0.04);
  color-scheme: light;

  /* Color de cada grupo: fuerte (borde, título) y suave (fondo del encabezado) */
  --g-ingresos: #2f9e72;  --g-ingresos-suave: #e5f6ee;
  --g-icbc: #d1343a;      --g-icbc-suave: #fdebec;   /* rojo ICBC (#C4161C) aclarado */
  --g-mc: #0a9be0;        --g-mc-suave: #e3f4fd;     /* celeste Mercado Pago (#009EE3) */
  --g-nada: #7f9a4a;      --g-nada-suave: #eff4e4;
  --g-sinmedio: #8d8679;  --g-sinmedio-suave: #f1efeb;
  --g-deben: #8063c9;     --g-deben-suave: #f1ecfb;
  --g-diario: #d39418;    --g-diario-suave: #fcf3df;
  --g-comida: #e07848;    --g-comida-suave: #fdeee5;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Barra superior */
header {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 10px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
header h1 { font-size: 16px; margin: 0 12px 0 0; }
header nav { display: flex; gap: 4px; }
header nav a {
  padding: 6px 12px; border-radius: var(--radio);
  color: var(--suave); text-decoration: none;
}
header nav a.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
header .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }

main { margin: 0 auto; padding: 24px 32px; }

/* Controles */
input, select, button { font: inherit; color: inherit; }
input[type=text], input[type=number], input[type=date], select {
  width: 100%;
  padding: 5px 7px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
}
input[type=number] { text-align: right; }
button {
  padding: 5px 10px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { border-color: var(--suave); }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.peligro:hover { color: var(--alerta); border-color: var(--alerta); }
button.chico { padding: 2px 8px; font-size: 12px; }

/* Secciones del formulario */
.bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 20px;
  overflow: hidden;
}
.bloque > h2 {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; margin: 0; padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
}
.bloque > h2 .total { font-weight: 600; }
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--suave); white-space: nowrap; }
.grupos td:not(.num) { white-space: nowrap; }
th.num { text-align: right; }
tbody tr:hover { background: var(--fondo); }
tr.pagado td:not(.acciones):not(.check) { color: var(--suave); }
td.check { text-align: center; width: 1%; }
td.acciones { white-space: nowrap; text-align: right; width: 1%; }
.etiqueta {
  display: inline-block; padding: 0 6px; border-radius: 4px;
  font-size: 11px; font-weight: 600; background: var(--fondo); color: var(--suave);
}
.etiqueta.usd { background: var(--usd); color: #fff; }
.vacio { padding: 14px; color: var(--suave); }

/* Formularios */
.carga { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.carga .bloque { margin-bottom: 0; }
.carga .lateral { display: flex; flex-direction: column; gap: 20px; }
.carga .lateral .mensaje { margin: 0; }
@media (max-width: 900px) { .carga { grid-template-columns: 1fr; } }
.formulario .cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.formulario .cuerpo.fila { flex-direction: row; align-items: flex-end; }
.grilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
#dialogo .grilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--suave); }
.campo.ancho { grid-column: span 2; }
.campo.check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; align-self: end; padding-bottom: 6px; }
.formulario input[type=text], .formulario input[type=date], .formulario select { padding: 7px 9px; }
.botones { display: flex; justify-content: flex-end; gap: 8px; }
.formulario .botones button { padding: 7px 16px; }
.mensaje { margin: 0 0 20px; padding: 8px 12px; border-radius: 6px; }
.formulario .mensaje { margin: 0; }
.mensaje.error { background: var(--alerta-suave); color: var(--alerta); }
.mensaje.ok { background: var(--acento-suave); color: var(--acento); }
@media (max-width: 600px) {
  .grilla-campos, #dialogo .grilla-campos { grid-template-columns: 1fr; }
  .campo.ancho { grid-column: auto; }
}

dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
dialog::backdrop { background: rgb(30 39 51 / 0.35); }
dialog h2 { font-size: 15px; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--borde); }

.usd-detalle { display: block; font-size: 11px; color: var(--usd); }

/* Grupos del dashboard: 3 columnas que ocupan todo el ancho.
   Debajo de 1300px la tercera columna pasa abajo a ancho completo y reparte sus grupos en grilla. */
.grupos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grupos .columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.grupos .bloque { margin-bottom: 0; }
@media (max-width: 1300px) {
  .grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grupos .columna:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-items: start; }
}
@media (max-width: 800px) {
  .grupos { grid-template-columns: 1fr; }
  .grupos .columna:nth-child(3) { display: flex; }
}

/* Color por grupo */
.bloque.grupo { border-top: 3px solid var(--g); }
.bloque.grupo > h2 { background: var(--g-suave); color: var(--g); }
.bloque.grupo > h2 .total { color: var(--texto); }
.grupo-ingresos { --g: var(--g-ingresos); --g-suave: var(--g-ingresos-suave); }
.grupo-icbc { --g: var(--g-icbc); --g-suave: var(--g-icbc-suave); }
.grupo-mc { --g: var(--g-mc); --g-suave: var(--g-mc-suave); }
.grupo-nada { --g: var(--g-nada); --g-suave: var(--g-nada-suave); }
.grupo-sinmedio { --g: var(--g-sinmedio); --g-suave: var(--g-sinmedio-suave); }
.grupo-deben { --g: var(--g-deben); --g-suave: var(--g-deben-suave); }
.grupo-diario { --g: var(--g-diario); --g-suave: var(--g-diario-suave); }
.grupo-comida { --g: var(--g-comida); --g-suave: var(--g-comida-suave); }
.etiqueta.esencial { background: var(--acento-suave); color: var(--acento); }
.etiqueta.ahorrable { background: var(--alerta-suave); color: var(--alerta); }
td .etiqueta { margin-left: 4px; vertical-align: 1px; }
.col-tarjeta { width: 1%; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.sin-tarjeta { color: var(--borde); }
.concepto-tarjeta { display: block; font-size: 12px; color: var(--suave); font-family: ui-monospace, Consolas, monospace; }
button.icono {
  width: 26px; height: 26px; padding: 0;
  border-color: transparent; background: transparent;
  color: var(--suave); font-size: 14px; line-height: 1;
}
button.icono:hover { border-color: var(--borde); color: var(--texto); background: var(--fondo); }
button.icono.peligro:hover { color: var(--alerta); border-color: var(--alerta); }
td.acciones button + button { margin-left: 2px; }
tbody tr td.acciones { opacity: 0.55; }
tbody tr:hover td.acciones, tbody tr:focus-within td.acciones { opacity: 1; }

/* Dashboard */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (min-width: 1000px) { .tarjetas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 12px 14px;
}
.tarjeta .titulo { font-size: 12px; color: var(--suave); }
.tarjeta .valor { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tarjeta .detalle { font-size: 12px; color: var(--suave); margin-top: 2px; }
.tarjeta .detalle.mal { color: var(--alerta); }
.tarjeta.destacada { border-color: var(--acento); }
.tarjeta.destacada .valor { color: var(--acento); }
.negativo { color: var(--alerta) !important; }

.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px; }
.grafico { padding: 14px; }
.grafico svg { display: block; width: 100%; height: auto; max-height: 200px; }
.leyenda { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.leyenda .item { display: flex; align-items: center; gap: 8px; }
.leyenda .color { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.leyenda .item .num { margin-left: auto; }
.dona { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.dona svg { width: 160px; flex: none; }
.dona .leyenda { flex: 1; min-width: 180px; }


@media (max-width: 600px) {
  header { padding: 10px 16px; }
  main { padding: 16px; }
}

/* Importar resumen */
.subida { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 20px; padding: 16px; align-items: start; }
@media (max-width: 900px) { .subida { grid-template-columns: 1fr; } }
.zona-archivo {
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center;
  min-height: 120px; padding: 16px; cursor: pointer;
  border: 2px dashed var(--borde); border-radius: var(--radio); background: var(--fondo); color: var(--suave);
}
.zona-archivo strong { color: var(--texto); }
.zona-archivo:hover, .zona-archivo.encima { border-color: var(--g-icbc); background: var(--g-icbc-suave); }
.zona-archivo.cargando { opacity: 0.6; pointer-events: none; }
.zona-archivo.cargando strong::after { content: ' · leyendo…'; }
.info-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; align-items: start; }
.info-resumen .titulo { display: block; font-size: 12px; font-weight: 600; color: var(--suave); }
.info-resumen .advertencias { grid-column: 1 / -1; margin: 0; padding: 8px 12px 8px 28px; background: var(--alerta-suave); color: var(--alerta); border-radius: 6px; }
.ok-texto { color: var(--acento); font-weight: 600; }
.mal-texto { color: var(--alerta); font-weight: 600; }
.resumen-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; padding-bottom: 70px; }
.resumen-grilla .columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.resumen-grilla .bloque { margin-bottom: 0; }
@media (max-width: 1100px) { .resumen-grilla { grid-template-columns: 1fr; } }
.bloque.grupo > h2 .total:not(.num) { font-size: 12px; font-weight: 500; color: var(--suave); }
.concepto-tarjeta.fuerte { font-size: 12px; color: var(--texto); font-weight: 600; }
.detalle-linea { display: block; font-size: 11px; color: var(--suave); }
.antes { color: var(--suave); text-decoration: line-through; }
.igual { color: var(--suave); }
tr.excluida td:not(.check):not(.accion-suelto) { opacity: 0.45; }
.accion-suelto { min-width: 260px; }
.accion-suelto select { width: 100%; }
.accion-suelto .crear { display: grid; grid-template-columns: 1fr 110px; gap: 6px; margin-top: 6px; }
.etiqueta.sugerido { margin-top: 4px; background: var(--g-diario-suave); color: var(--g-diario); }
.barra-aplicar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 16px; align-items: center; justify-content: flex-end;
  padding: 10px 32px; background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -2px 10px rgb(30 39 51 / 0.06);
}
.barra-aplicar span { color: var(--suave); }
.barra-aplicar button { padding: 8px 18px; }

/* Login */
.pantalla-login main.login { max-width: 380px; margin: 12vh auto 0; }
.cuerpo-login { padding: 20px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.cuerpo-login p { margin: 0; color: var(--suave); }
.cuerpo-login .mensaje { margin: 0; width: 100%; }
header .usuario { color: var(--suave); font-size: 13px; }