@font-face {
  font-family: "Inter";
  src: url("/lib/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-2: #f1f3f6;
  --tinta: #0f172a;
  --tinta-2: #475569;
  --tinta-3: #64748b;
  --borde: #e4e7eb;
  --borde-fuerte: #cfd5dd;
  --marca: #1e3a5f;
  --azul: #2563eb;
  --azul-suave: #eef3fe;
  --primario: #1e3a5f;
  --primario-hover: #274b79;
  --verde: #047857;
  --verde-suave: #ecfdf5;
  --ambar: #92400e;
  --ambar-suave: #fff7e6;
  --ambar-borde: #f2c46d;
  --rojo: #c62828;
  --rojo-suave: #fef2f2;
  --sombra: 0 1px 2px rgb(15 23 42 / .05), 0 1px 1px rgb(15 23 42 / .03);
  --sombra-alta: 0 10px 30px -12px rgb(15 23 42 / .25);
  --radio: 12px;
  --radio-chico: 8px;
  --rapido: 160ms cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0a0a0a;
    --superficie: #131313;
    --superficie-2: #1b1b1b;
    --tinta: #ededed;
    --tinta-2: #a9a9a9;
    --tinta-3: #7e7e7e;
    --borde: #262626;
    --borde-fuerte: #363636;
    --marca: #6ee7b7;
    --azul: #34d399;
    --azul-suave: #0e2a1f;
    --primario: #059669;
    --primario-hover: #10b981;
    --verde: #4ade80;
    --verde-suave: #0e2a1f;
    --ambar: #fbc85a;
    --ambar-suave: #241d10;
    --ambar-borde: #6b5216;
    --rojo: #f88787;
    --rojo-suave: #2a1414;
    --sombra: 0 1px 2px rgb(0 0 0 / .4);
    --sombra-alta: 0 10px 30px -12px rgb(0 0 0 / .7);
  }
}
  :root[data-tema="oscuro"] {
    --fondo: #0a0a0a;
    --superficie: #131313;
    --superficie-2: #1b1b1b;
    --tinta: #ededed;
    --tinta-2: #a9a9a9;
    --tinta-3: #7e7e7e;
    --borde: #262626;
    --borde-fuerte: #363636;
    --marca: #6ee7b7;
    --azul: #34d399;
    --azul-suave: #0e2a1f;
    --primario: #059669;
    --primario-hover: #10b981;
    --verde: #4ade80;
    --verde-suave: #0e2a1f;
    --ambar: #fbc85a;
    --ambar-suave: #241d10;
    --ambar-borde: #6b5216;
    --rojo: #f88787;
    --rojo-suave: #2a1414;
    --sombra: 0 1px 2px rgb(0 0 0 / .4);
    --sombra-alta: 0 10px 30px -12px rgb(0 0 0 / .7);
  }


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 650; margin: 0; }
h2 { font-size: .95rem; font-weight: 600; margin: 0; }
.num, .mono { font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.tenue { color: var(--tinta-3); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

svg.icono { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }

/* ── Estructura ──────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.25rem .9rem;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: .65rem; font-weight: 650; font-size: 1.05rem; color: var(--tinta); padding: 0 .4rem; letter-spacing: -.01em; }
.marca:hover { text-decoration: none; }
.marca-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--primario);
  color: #fff;
}
nav { display: flex; flex-direction: column; gap: 2px; }
nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 40px;
  padding: 0 .75rem;
  border-radius: var(--radio-chico);
  color: var(--tinta-2);
  font-weight: 500;
  transition: background var(--rapido), color var(--rapido);
}
nav a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
nav a.activa { background: var(--azul-suave); color: var(--azul); }
.contador {
  margin-left: auto;
  min-width: 22px;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--ambar-suave);
  color: var(--ambar);
  font-size: .75rem;
  font-weight: 650;
  text-align: center;
  line-height: 20px;
  border: 1px solid var(--ambar-borde);
}
main { padding: 2rem 2.25rem 5rem; max-width: 1480px; width: 100%; }
.vista-entra { animation: entrar 260ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

.angosta { max-width: 920px; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.encabezado p { margin: .35rem 0 0; color: var(--tinta-2); }

/* ── Botones y piezas comunes ────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: 0 1.1rem;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.boton:hover { text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton.primario { background: var(--primario); color: #fff; box-shadow: var(--sombra); }
.boton.primario:hover { background: var(--primario-hover); }
.boton.confirmar { background: #047857; color: #fff; box-shadow: var(--sombra); }
.boton.confirmar:hover { background: #05664b; }
.boton.secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton.secundario:hover { background: var(--superficie-2); }
.boton.fantasma { background: transparent; color: var(--tinta-2); }
.boton.fantasma:hover { background: var(--superficie-2); color: var(--tinta); }
.boton.peligro:hover { background: var(--rojo-suave); color: var(--rojo); }
.boton.peligro.seguro, .boton.peligro.seguro:hover { background: #c62828; color: #fff; }
.boton[disabled] { opacity: .6; cursor: wait; }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pastilla.revisar { background: var(--ambar-suave); color: var(--ambar); border-color: var(--ambar-borde); }
.pastilla.lista { background: var(--verde-suave); color: var(--verde); }
.pastilla.tipo { background: var(--superficie-2); color: var(--tinta-2); }
.pastilla .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.sello {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .05rem .4rem;
  border-radius: 5px;
  background: var(--verde-suave);
  color: var(--verde);
}
.sello svg.icono { width: 11px; height: 11px; stroke-width: 2.6; }
.sello.gris { background: var(--superficie-2); color: var(--tinta-2); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.vacio { display: grid; justify-items: center; gap: .5rem; padding: 3.5rem 1rem; text-align: center; color: var(--tinta-2); }
.vacio .icono-grande { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--superficie-2); color: var(--tinta-3); margin-bottom: .25rem; }
.vacio .icono-grande svg { width: 24px; height: 24px; }
.vacio strong { color: var(--tinta); font-weight: 600; }

/* ── Cargar ──────────────────────────────────────────────────── */
.zona {
  display: grid;
  justify-items: center;
  gap: .4rem;
  padding: 3.25rem 1.5rem;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: 16px;
  background: var(--superficie);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido), transform var(--rapido);
}
.zona:hover, .zona.encima { border-color: var(--azul); background: var(--azul-suave); }
.boton:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.zona.encima { transform: scale(1.005); }
.zona .burbuja {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--azul);
  margin-bottom: .5rem;
  transition: transform var(--rapido);
}
.zona:hover .burbuja, .zona.encima .burbuja { transform: translateY(-3px); }
.zona .burbuja svg { width: 24px; height: 24px; }
.zona strong { font-size: 1.05rem; font-weight: 600; }
.zona span { color: var(--tinta-2); }
.zona .botones { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; }
.solo-celu { display: none; }
@media (pointer: coarse) { .solo-celu { display: inline-flex; } }

.cola { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .65rem; }
.cola > li { padding: 1rem 1.15rem; display: grid; gap: .85rem; animation: entrar 260ms cubic-bezier(.2, .7, .3, 1) both; }
.cola .arriba { display: flex; align-items: center; gap: .75rem; }
.cola .archivo-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--superficie-2); color: var(--tinta-2); flex: none; }
.cola .nombre { font-weight: 600; overflow-wrap: anywhere; }
.cola .peso { color: var(--tinta-3); font-size: .85rem; }
.cola .derecha { margin-left: auto; }
.pasos { display: flex; gap: .4rem 1.25rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.paso { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--tinta-3); transition: color var(--rapido); }
.paso .marca-paso {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte);
  transition: background var(--rapido), border-color var(--rapido);
}
.paso .marca-paso svg { width: 12px; height: 12px; stroke-width: 3; }
.paso.hecho { color: var(--tinta-2); }
.paso.hecho .marca-paso { background: var(--verde); border-color: var(--verde); color: var(--superficie); }
.paso.activo { color: var(--tinta); font-weight: 500; }
.paso.activo .marca-paso { border-color: var(--azul); border-top-color: transparent; animation: girar .8s linear infinite; }
.paso.salteado .marca-paso { border-style: dashed; }
.paso.aviso { color: var(--ambar); }
.paso.aviso .marca-paso { background: var(--ambar); border-color: var(--ambar); color: var(--superficie); }
.paso.fallo { color: var(--rojo); }
.paso.fallo .marca-paso { background: var(--rojo); border-color: var(--rojo); color: var(--superficie); }
@keyframes girar { to { transform: rotate(360deg); } }
.cola .mensaje { font-size: .88rem; color: var(--tinta-2); margin: 0; }
.cola .mensaje.error { color: var(--rojo); }

/* ── Bandeja ─────────────────────────────────────────────────── */
.herramientas { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.solapas { display: inline-flex; padding: 3px; gap: 2px; background: var(--superficie-2); border-radius: 10px; }
.solapas button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 36px;
  padding: 0 .9rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-2);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.solapas button:hover { color: var(--tinta); }
.solapas button[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.solapas .n { font-size: .75rem; color: var(--tinta-3); font-weight: 600; }
.buscador { position: relative; flex: 1 1 260px; max-width: 380px; margin-left: auto; }
.buscador svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.buscador input { padding-left: 2.3rem; min-height: 42px; }

.filas { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.filas li + li { border-top: 1px solid var(--borde); }
.fila, .filas .titulos {
  display: grid;
  grid-template-columns: 104px minmax(0, 1.6fr) minmax(0, 1.25fr) minmax(0, .9fr) 150px 116px 20px;
  gap: 1rem;
  align-items: center;
  padding: .85rem 1.15rem;
}
.filas .titulos { font-size: .78rem; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; background: var(--superficie-2); padding-block: .6rem; }
.fila { color: inherit; transition: background var(--rapido); }
.fila:hover { background: var(--superficie-2); text-decoration: none; }
.fila:hover .flecha { transform: translateX(2px); color: var(--tinta); }
.fila .flecha { color: var(--tinta-3); transition: transform var(--rapido), color var(--rapido); }
.fila .emisor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .sub { font-size: .82rem; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .total { font-weight: 650; text-align: right; }
.fila .comprobante { display: grid; gap: .3rem; justify-items: start; }
.fila .comprobante .numero { font-size: 1rem; font-weight: 600; color: var(--tinta); letter-spacing: .01em; white-space: nowrap; }

.lista-caja { container: lista / inline-size; overflow: hidden; }
@container lista (max-width: 900px) {
  .fila, .filas .titulos { grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 1.2fr) 140px 112px 18px; }
  .col-rubro { display: none; }
}
@container lista (max-width: 680px) {
  .filas .titulos { display: none; }
  .fila { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; padding: .9rem 1rem; }
  .fila > * { grid-column: 1; }
  .fila .col-fecha { order: 3; font-size: .82rem; color: var(--tinta-3); }
  .fila .col-emisor { order: 1; }
  .fila .col-comp { order: 2; grid-column: 1 / -1; }
  .fila .comprobante .numero { font-size: .95rem; }
  .fila .comprobante { display: flex; gap: .4rem; align-items: center; }
  .fila .total { grid-column: 2; grid-row: 1; }
  .fila .col-estado { grid-column: 2; grid-row: 3; justify-self: end; }
  .fila .flecha { display: none; }
  .fila .col-rubro { display: none; }
}

/* ── Ficha ───────────────────────────────────────────────────── */
.volver { display: inline-flex; align-items: center; gap: .3rem; color: var(--tinta-2); font-weight: 500; margin-bottom: .9rem; min-height: 32px; }
.volver:hover { color: var(--tinta); text-decoration: none; }
.titulo-ficha { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.titulo-ficha h1 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.titulo-ficha h1 .mono { font-weight: 500; color: var(--tinta-2); font-size: 1.25rem; }
.titulo-ficha p { margin: .35rem 0 0; color: var(--tinta-2); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.25rem; }
.resumen > div { padding: 1rem 1.25rem; }
.resumen > div + div { border-left: 1px solid var(--borde); }
.resumen .etiqueta { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
.resumen .valor { font-size: 1.15rem; font-weight: 600; margin-top: .2rem; }
.resumen .valor.grande { font-size: 1.5rem; color: var(--azul); letter-spacing: -.01em; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1100px) {
  .ficha { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; }
  .original { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); }
}
.original { overflow: hidden; display: flex; flex-direction: column; }
.original .barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--borde); }
.original .barra h2 { display: flex; align-items: center; gap: .5rem; }
.original .barra a { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 500; }
.original .hoja { overflow: auto; padding: .75rem; background: var(--superficie-2); max-height: 62vh; }
@media (min-width: 1100px) { .original .hoja { max-height: none; flex: 1; } }
.original img, .original canvas { display: block; width: calc(var(--zoom, 1) * 100%); max-width: none; height: auto; border-radius: 4px; box-shadow: var(--sombra-alta); background: #fff; }
.original .hoja { cursor: zoom-in; }
.original .hoja.acercado { cursor: zoom-out; }
.zoom { display: flex; align-items: center; gap: .1rem; flex: none; }
.original .barra h2 { min-width: 0; white-space: nowrap; }
.zoom .nivel { min-width: 3.4rem; min-height: 32px; border: 0; border-radius: 8px; background: none; color: var(--tinta-2); font: inherit; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.zoom .nivel:hover { background: var(--superficie-2); color: var(--tinta); }
.zoom a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--tinta-2); }
.zoom a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.original canvas + canvas { margin-top: .75rem; }

.datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.datos > * { min-width: 0; }
.leyenda { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radio); background: var(--azul-suave); color: var(--tinta); font-size: .9rem; }
.leyenda.dudas { background: var(--ambar-suave); border: 1px solid var(--ambar-borde); }
.leyenda svg { margin-top: .1rem; color: var(--azul); }
.leyenda.dudas svg { color: var(--ambar); }
.leyenda p { margin: 0; }

.seccion { padding: 0; }
.seccion > header { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--borde); }
.seccion > header .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--superficie-2); color: var(--tinta-2); }
.seccion > header .ic svg { width: 15px; height: 15px; }
.seccion > header .extra { margin-left: auto; font-size: .88rem; display: inline-flex; align-items: center; gap: .3rem; }
.seccion .cuerpo { padding: 1rem 1.15rem 1.15rem; }

.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.campo { display: grid; gap: .3rem; min-width: 0; border-radius: 10px; transition: background var(--rapido), box-shadow var(--rapido); }
.campo > span { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; color: var(--tinta-2); }
.campo.ancho { grid-column: 1 / -1; }
.campo.dudoso { background: var(--ambar-suave); box-shadow: 0 0 0 6px var(--ambar-suave), 0 0 0 7px var(--ambar-borde); }
.campo.dudoso > span::after { content: "Revisar"; margin-left: auto; font-size: .72rem; font-weight: 650; color: var(--ambar); }
.campo.total input { font-size: 1.15rem; font-weight: 650; color: var(--azul); }
.nota { color: var(--tinta-3); font-size: .78rem; }

input, select {
  width: 100%;
  min-height: 40px;
  font: inherit;
  color: inherit;
  padding: .45rem .65rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input:hover, select:hover { border-color: var(--tinta-3); }
input:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla-envoltura { overflow-x: auto; margin: 0 -.25rem; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); padding: 0 .25rem .45rem; white-space: nowrap; }
th.num { text-align: right; }
td { padding: .2rem .25rem; }
table.editable input, table.editable select { min-width: 6rem; min-height: 36px; }
table.editable td:first-child input { min-width: 5rem; }
table.editable [name=descripcion] { min-width: 12rem; }
.quitar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinta-3);
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.quitar:hover { background: var(--rojo-suave); color: var(--rojo); }
.agregar {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  min-height: 34px;
  padding: 0 .6rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 8px;
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--rapido), color var(--rapido);
}
.agregar:hover { border-color: var(--azul); color: var(--azul); }
table.editable:has(tbody:empty) thead { display: none; }
.tabla-envoltura:has(tbody:empty)::before { content: "Sin filas cargadas."; display: block; padding: .25rem; color: var(--tinta-3); font-size: .9rem; }

.barra-acciones {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  margin-top: .25rem;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.barra-acciones .peligro { margin-left: auto; }
.error-caja { margin: 0; padding: .7rem 1rem; border-radius: var(--radio-chico); background: var(--rojo-suave); color: var(--rojo); }

/* ── Celular y tablet ────────────────────────────────────────── */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: sticky;
    height: auto;
    z-index: 5;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 16px;
    border-right: 0;
    border-bottom: 1px solid var(--borde);
  }
  .marca span:last-child { display: none; }
  nav { flex-direction: row; }
  nav a { min-height: 44px; }
  main { padding: 1.25rem 16px 4rem; }
  .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumen > div:nth-child(3) { border-left: 0; }
  .resumen > div:nth-child(n+3) { border-top: 1px solid var(--borde); }
  .buscador { max-width: none; margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 520px) {
  h1 { font-size: 1.35rem; }
  .resumen > div { padding: .85rem 1rem; }
  .resumen .valor.grande { font-size: 1.2rem; }
  .grilla { grid-template-columns: minmax(0, 1fr); }
  .zona { padding: 2.25rem 1rem; }
  .barra-acciones .boton:not(.peligro) { flex: 1; }
  .solapas { width: 100%; }
  .solapas button { flex: 1; justify-content: center; padding: 0 .4rem; font-size: .88rem; white-space: nowrap; }
}

/* ── Cuentas a pagar ─────────────────────────────────────────── */
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cargar-caja { display: flex; gap: .75rem; margin-bottom: 1.75rem; }
.cargar-caja > a { flex: 1; min-width: 0; }
.cargar-grande.foto { flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 1.25rem; cursor: pointer; }
@media (max-width: 600px) {
  .cargar-caja { flex-direction: column; }
  .cargar-grande.foto { flex-direction: row; justify-content: flex-start; gap: 1.1rem; padding: 1rem 1.5rem; }
  .cargar-grande.foto strong { font-size: 1.15rem; }
}
.cargar-grande.foto strong { font-size: 1rem; }
.cargar-grande.solo-celu { display: none; }
@media (pointer: coarse) { .cargar-grande.solo-celu { display: flex; } }
.ojo { color: var(--ambar); display: inline-flex; vertical-align: -2px; }
.ojo .icono { width: 1rem; height: 1rem; }
.cargar-grande { display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 1.5rem; border-radius: 16px; color: #fff; text-decoration: none; background: linear-gradient(120deg, #047857, #0d9488); box-shadow: 0 8px 24px -10px rgba(4, 120, 87, .55); transition: transform .15s, box-shadow .15s; }
.cargar-grande:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(4, 120, 87, .65); }
.cargar-grande:focus-visible { outline: 3px solid #34d399; outline-offset: 3px; }
.cargar-grande > span:nth-child(2):not(.cargar-icono) { flex: 1; display: grid; gap: .2rem; min-width: 0; }
.cargar-grande strong { font-size: 1.3rem; font-weight: 700; }
.cargar-grande strong + span { opacity: .9; }
.cargar-icono { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.cargar-icono .icono { width: 1.6rem; height: 1.6rem; }
.cargar-grande > .icono { width: 1.4rem; height: 1.4rem; flex: none; }
.filtros select { width: auto; min-width: 8.5rem; font-weight: 500; }
.titulo-bloque { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin: 1.75rem 0 .75rem; }
.encabezado + .titulo-bloque { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.tile { padding: 1rem 1.15rem 1.05rem; display: grid; gap: .3rem; position: relative; overflow: hidden; container-type: inline-size; }
.tile .etiqueta { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.tile .valor { font-size: clamp(.95rem, 9.5cqi, 1.65rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.tile .pie { font-size: .85rem; color: var(--tinta-2); }
.tile.destacado .valor { color: var(--azul); }
.tile.malo { border-color: color-mix(in srgb, var(--rojo) 35%, var(--borde)); }
.tile.malo .valor, .tile.malo .etiqueta { color: var(--rojo); }
.tile.atento .etiqueta { color: var(--ambar); }
.tile.bueno .etiqueta { color: var(--verde); }
.tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.tile.malo::before { background: var(--rojo); }
.tile.atento::before { background: var(--ambar-borde); }
.tile.destacado::before { background: var(--azul); }

.paneles { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: .9rem; margin-top: 1.75rem; }
.paneles.tres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: .9rem; }
.paneles > section { padding: 1rem 1.15rem 1.15rem; min-width: 0; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.panel-cab h2 { display: flex; align-items: center; gap: .45rem; }
.panel-cab .tenue, .panel-cab a { font-size: .85rem; }
.nada { color: var(--tinta-3); font-size: .9rem; margin: 0; }

/* Barras por mes: una serie, eje recesivo, punta redondeada arriba */
.barras { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; height: 240px; padding-bottom: 1.6rem; }
.eje { position: relative; width: 3.6rem; }
.eje span { position: absolute; right: 0; transform: translateY(50%); font-size: .72rem; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.area { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; align-items: end; }
.guia { position: absolute; left: 0; right: 0; border-top: 1px solid var(--borde); pointer-events: none; }
.guia:nth-child(3) { border-top-color: var(--borde-fuerte); }
.col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; border-radius: 6px; }
.col:hover { background: color-mix(in srgb, var(--azul) 6%, transparent); }
.barra-mes { width: min(70%, 34px); background: var(--azul); border-radius: 4px 4px 0 0; transition: height 420ms cubic-bezier(.2, .7, .3, 1), opacity var(--rapido); }
.area:has(.elegida) .col:not(.elegida) .barra-mes { opacity: .35; }
.col .mes { position: absolute; bottom: -1.5rem; font-size: .75rem; color: var(--tinta-3); }
.col.actual .mes { color: var(--tinta); font-weight: 650; }
.tip { position: absolute; transform: translate(-50%, -100%); padding: .35rem .6rem; border-radius: 8px; background: var(--tinta); color: var(--fondo); font-size: .82rem; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--sombra-alta); z-index: 2; }
.ver-tabla { margin-top: .9rem; font-size: .88rem; }
.ver-tabla summary { cursor: pointer; color: var(--tinta-2); font-weight: 500; }
.ver-tabla table { margin-top: .5rem; max-width: 360px; }
.ver-tabla td { padding: .25rem; border-bottom: 1px solid var(--borde); }

/* Lista de vencimientos */
.vence { list-style: none; margin: 0; padding: 0; }
.vence li + li { border-top: 1px solid var(--borde); }
.vence a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .6rem .25rem; color: inherit; border-radius: 6px; transition: background var(--rapido); }
.vence a:hover { background: var(--superficie-2); text-decoration: none; }
.vence .cuando { grid-column: 1; display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--tinta-3); }
.vence .cuando.malo { color: var(--rojo); font-weight: 600; }
.vence .cuando.atento { color: var(--ambar); font-weight: 600; }
.vence .quien { grid-column: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vence .cuanto { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; }
.vence.chica .quien { grid-row: 1; font-weight: 500; }
.vence.chica .cuanto { grid-row: 1; }

/* Barras horizontales */
.hbarras { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hbarras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .75rem; align-items: center; }
.hbarras .nombre { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbarras .monto { grid-row: 1; grid-column: 2; font-size: .9rem; font-weight: 600; }
.hbarras .pista { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; }
.hbarras .hbarra { display: block; height: 100%; border-radius: 4px; background: var(--azul); transition: width 420ms cubic-bezier(.2, .7, .3, 1); }

/* Calendario */
.nav-cal { display: flex; gap: .15rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.cal .sem { font-size: .72rem; font-weight: 600; color: var(--tinta-3); padding-bottom: .25rem; }
.dia { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 34px; border-radius: 8px; font-size: .85rem; color: var(--tinta-2); border: 0; background: none; font: inherit; font-variant-numeric: tabular-nums; }
.dia.hoy { box-shadow: inset 0 0 0 1.5px var(--azul); color: var(--azul); font-weight: 650; }
.dia.con { cursor: pointer; color: var(--tinta); font-weight: 600; background: var(--superficie-2); transition: background var(--rapido), transform var(--rapido); }
.dia.con:hover { transform: translateY(-1px); }
.dia .punto { position: absolute; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; }
.dia.malo { background: var(--rojo-suave); }
.dia.malo .punto, .leyenda-cal .malo { background: var(--rojo); }
.dia.atento { background: var(--ambar-suave); }
.dia.atento .punto, .leyenda-cal .atento { background: var(--ambar-borde); }
.dia.pagado .punto, .leyenda-cal .pagado { background: var(--verde); }
.dia.elegido { box-shadow: inset 0 0 0 2px var(--tinta); }
.cal-pie { margin-top: .75rem; display: grid; gap: .6rem; }
.leyenda-cal { display: flex; gap: .9rem; flex-wrap: wrap; margin: 0; font-size: .78rem; color: var(--tinta-3); }
.leyenda-cal span { display: inline-flex; align-items: center; gap: .3rem; }
.leyenda-cal i { width: 8px; height: 8px; border-radius: 50%; }

@media (max-width: 1200px) {
  .paneles.tres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .paneles.tres > #calendario { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paneles, .paneles.tres { grid-template-columns: minmax(0, 1fr); }
  .paneles.tres > #calendario { max-width: none; }
}
@media (max-width: 520px) {
  .nav-texto { display: none; }
  nav a { padding: 0 .7rem; }
  .tiles { gap: .6rem; }
  .tile { padding: .85rem .9rem; }
  .tile .etiqueta { font-size: .7rem; }
  .barras { height: 200px; }
  .eje { width: 2.8rem; }
  .col .mes { font-size: .65rem; }
}

/* ── Entrada con clave ───────────────────────────────────────── */
body.sin-sesion .app { grid-template-columns: minmax(0, 1fr); }
body.sin-sesion .lateral { display: none; }
body.sin-sesion main { display: grid; place-items: center; min-height: 100vh; max-width: none; }
.entrada { width: min(400px, 100%); padding: 2rem 1.75rem; display: grid; gap: 1rem; text-align: left; }
.entrada .marca-icono { width: 44px; height: 44px; border-radius: 12px; }
.entrada .marca-icono svg { width: 22px; height: 22px; }
.entrada p { margin: 0; color: var(--tinta-2); }
.entrada .error-caja { color: var(--rojo); }
.salir {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
  min-height: 40px;
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.salir:hover { background: var(--superficie-2); color: var(--tinta); }
.salir[hidden] { display: none; }
@media (max-width: 860px) {
  .salir { margin-top: 0; min-height: 44px; }
  .salir .nav-texto { display: none; }
}

/* ── Elegir varias: casillas, barra de acciones y grupos ─────── */
.filas .item { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: stretch; transition: background var(--rapido); }
.filas .item.elegida, .filas .item.elegida .fila { background: var(--azul-suave); }
.filas .item-titulos { background: var(--superficie-2); }
.filas .item .fila { padding-left: .25rem; }
.filas .item-titulos .titulos { padding-left: .25rem; }
.marcar { display: grid; place-items: center; cursor: pointer; padding-left: .5rem; }
.marcar input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--azul); cursor: pointer; }

.barra-lote {
  position: sticky;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  animation: entrar 200ms cubic-bezier(.2, .7, .3, 1) both;
}
.barra-lote[hidden] { display: none; }
.barra-lote .cuantas { font-weight: 650; white-space: nowrap; }
.acciones-lote { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-left: auto; }
.acciones-lote .boton { min-height: 38px; padding: 0 .85rem; }
.panel-grupo { flex-basis: 100%; display: grid; gap: .6rem; padding: .25rem .1rem .75rem; border-bottom: 1px solid var(--borde); }
.panel-grupo[hidden] { display: none; }
.elegir-grupo { display: flex; gap: .4rem; flex-wrap: wrap; }
.nuevo-grupo, .renombrar { display: flex; gap: .5rem; }
.nuevo-grupo input, .renombrar input { flex: 1; min-width: 0; }
.aviso-lote { margin: .75rem 0 0; padding: .6rem .9rem; border-radius: var(--radio-chico); background: var(--verde-suave); color: var(--verde); font-weight: 500; }
.aviso-lote[hidden] { display: none; }

.grupos { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.grupos-titulo { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); margin-right: .25rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  padding: 0 .8rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.chip:hover { border-color: var(--azul); }
.chip.activa { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip .n { font-size: .75rem; font-weight: 650; opacity: .75; }

.grupo-cabeza { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .8rem 1rem; margin-bottom: 1rem; }
.grupo-cabeza .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--azul-suave); color: var(--azul); }
.grupo-nombre { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.grupo-nombre .tenue { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.grupo-nombre strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.grupo-acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.grupo-acciones .boton { min-height: 38px; padding: 0 .8rem; }

@container lista (max-width: 680px) {
  .filas .item-titulos { grid-template-columns: 44px auto; align-items: center; min-height: 44px; }
  .filas .item-titulos::after { content: "Elegir todas"; font-size: .85rem; color: var(--tinta-2); }
}
@media (max-width: 600px) {
  .solapas { flex-wrap: wrap; }
  .solapas button { flex: 1 1 40%; }
  .barra-lote { bottom: .5rem; }
  .acciones-lote { margin-left: 0; width: 100%; }
  .acciones-lote .boton { flex: 1 1 auto; }
  .nuevo-grupo { flex-direction: column; }
}

/* ── Ordenar y filtrar la Bandeja ────────────────────────────── */
.titulos .orden {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 30px;
  margin: -.3rem -.4rem;
  padding: 0 .4rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rapido), color var(--rapido);
}
.titulos .orden:hover { background: var(--superficie); color: var(--tinta); }
.titulos .orden.activo { color: var(--azul); }
.titulos .orden.num { justify-self: end; }
.titulos .flechita { font-size: .7rem; opacity: .55; }
.titulos .orden.activo .flechita { opacity: 1; }

.boton.filtrar { min-height: 42px; }
.boton.filtrar.con-filtros { border-color: var(--azul); color: var(--azul); }
.boton.filtrar .n { min-width: 20px; padding: 0 .35rem; border-radius: 999px; background: var(--azul); color: #fff; font-size: .75rem; line-height: 20px; }
.panel-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .75rem 1rem;
  align-items: end;
  padding: 1rem 1.15rem;
  margin: -.25rem 0 1rem;
  animation: entrar 200ms cubic-bezier(.2, .7, .3, 1) both;
}
.panel-filtros[hidden] { display: none; }
.panel-filtros .boton { justify-self: start; min-height: 40px; }

/* ── De qué es la factura ────────────────────────────────────── */
.seccion > header .extra { gap: .9rem; }
.seccion > header .extra a { display: inline-flex; align-items: center; gap: .3rem; }
/* Pensar con IA: borde arcoíris que corre y un resplandor del mismo arcoíris en los cuatro lados */
.pensar {
  --arcoiris: linear-gradient(90deg, hsl(0 100% 63%), hsl(90 100% 63%), hsl(210 100% 63%), hsl(195 100% 63%), hsl(270 100% 63%), hsl(0 100% 63%));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 13rem;
  min-height: 42px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: .92rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 200ms;
}
/* El relleno liso y el borde van en ::after, encima del resplandor (::before): así el centro no brilla. */
.pensar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2px solid transparent;
  border-radius: inherit;
  background: linear-gradient(var(--superficie), var(--superficie)) padding-box, var(--arcoiris) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: arcoiris 3s linear infinite;
}
.pensar::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -2;
  border-radius: inherit;
  background: var(--arcoiris);
  background-size: 200% 100%;
  filter: blur(10px);
  opacity: .5;
  animation: arcoiris-luz 3s linear infinite;
  transition: opacity 200ms;
}
.pensar .icono { width: 1.1rem; height: 1.1rem; }
.pensar:hover { transform: scale(1.04); }
.pensar:hover::before { opacity: .85; }
.pensar:active { transform: scale(.97); }
.pensar:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }
.pensar[disabled] { cursor: wait; }
.pensar[disabled]::before { opacity: .9; animation-duration: 1s; }
@keyframes arcoiris { to { background-position: 0 0, 200% 0; } }
@keyframes arcoiris-luz { to { background-position: 200% 0; } }
.campo.recien { animation: destello 1.2s ease-out; }
@keyframes destello { 0% { box-shadow: 0 0 0 6px var(--azul-suave), 0 0 0 7px var(--azul); } 100% { box-shadow: 0 0 0 6px transparent, 0 0 0 7px transparent; } }
.fila .col-rubro { display: grid; gap: .1rem; min-width: 0; }
.fila .rubro { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .seccion > header { flex-wrap: wrap; }
  .seccion > header .extra { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ── Control de sumas ────────────────────────────────────────── */
.cuadre { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; padding: .65rem .85rem; border-radius: var(--radio-chico); background: var(--superficie-2); color: var(--tinta-2); font-size: .9rem; }
.cuadre[hidden] { display: none; }
.cuadre svg { margin-top: .1rem; }
.cuadre.ok { background: var(--verde-suave); color: var(--verde); }
.cuadre.mal { background: var(--ambar-suave); color: var(--ambar); border: 1px solid var(--ambar-borde); }

/* ── Color por tipo de comprobante ───────────────────────────── */
.pastilla.tipo[class*="tipo-"] { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.tipo-fa { --c: #4f46e5; }
.tipo-fb { --c: #047857; }
.tipo-fc { --c: #7c3aed; }
.tipo-fm, .tipo-fe { --c: #a21caf; }
.tipo-nc { --c: #c2410c; }
.tipo-nd { --c: #be123c; }
.tipo-rec { --c: #0f766e; }
.tipo-fce { --c: #475569; }
.tipo-tq { --c: #0e7490; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tipo-fa { --c: #a5b4fc; }
  :root:not([data-tema="claro"]) .tipo-fb { --c: #5fd4a4; }
  :root:not([data-tema="claro"]) .tipo-fc { --c: #c4a5ff; }
  :root:not([data-tema="claro"]) .tipo-fm, :root:not([data-tema="claro"]) .tipo-fe { --c: #f0abfc; }
  :root:not([data-tema="claro"]) .tipo-nc { --c: #fb9a6a; }
  :root:not([data-tema="claro"]) .tipo-nd { --c: #fda4af; }
  :root:not([data-tema="claro"]) .tipo-rec { --c: #5ed6c8; }
  :root:not([data-tema="claro"]) .tipo-fce { --c: #cbd5e1; }
  :root:not([data-tema="claro"]) .tipo-tq { --c: #67d4ea; }
}
  :root[data-tema="oscuro"] .tipo-fa { --c: #a5b4fc; }
  :root[data-tema="oscuro"] .tipo-fb { --c: #5fd4a4; }
  :root[data-tema="oscuro"] .tipo-fc { --c: #c4a5ff; }
  :root[data-tema="oscuro"] .tipo-fm, :root[data-tema="oscuro"] .tipo-fe { --c: #f0abfc; }
  :root[data-tema="oscuro"] .tipo-nc { --c: #fb9a6a; }
  :root[data-tema="oscuro"] .tipo-nd { --c: #fda4af; }
  :root[data-tema="oscuro"] .tipo-rec { --c: #5ed6c8; }
  :root[data-tema="oscuro"] .tipo-fce { --c: #cbd5e1; }
  :root[data-tema="oscuro"] .tipo-tq { --c: #67d4ea; }


/* ── Tema elegido a mano ─────────────────────────────────────── */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; } }
.tema {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
  min-height: 40px;
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.tema:hover { background: var(--superficie-2); color: var(--tinta); }
.tema .icono { transition: transform 300ms cubic-bezier(.2, .7, .3, 1); }
.tema:active .icono { transform: rotate(-30deg) scale(.9); }
.tema + .salir { margin-top: 0; }
body, .lateral, .tarjeta, input, select { transition: background-color 200ms, border-color 200ms, color 200ms; }
@media (max-width: 860px) {
  .tema { margin-top: 0; min-height: 44px; }
  .tema .nav-texto { display: none; }
}

/* ── Interruptor claro / oscuro ──────────────────────────────── */
.pista-tema {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  flex: none;
  transition: background 250ms, border-color 250ms;
}
.pista-tema svg.icono { width: 14px; height: 14px; color: var(--tinta-3); position: relative; z-index: 1; }
.pista-tema .perilla {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1);
}
.tema[aria-checked="true"] .pista-tema { background: var(--primario); border-color: var(--primario-hover); }
.tema[aria-checked="true"] .pista-tema .perilla { transform: translateX(24px); background: #e5eaf2; }
.tema[aria-checked="false"] .pista-tema svg.icono:first-of-type { color: #d97706; }
.tema[aria-checked="true"] .pista-tema svg.icono:last-of-type { color: #fbc85a; }
.tema:active .icono { transform: none; }

/* ── Libro de IVA y proveedores ──────────────────────────────── */
.libro { padding: 1rem 1.15rem; }
.libro table { font-size: .9rem; }
.libro th, .libro td { padding: .55rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.libro td.num, .libro th.num { text-align: right; white-space: nowrap; }
.libro tbody tr:last-child td { border-bottom: 0; }
.libro tfoot td { font-weight: 700; border-top: 2px solid var(--borde); border-bottom: 0; }
.libro tr.resta td { color: var(--tinta-2); }
.libro a { color: inherit; text-decoration: none; }
.libro a:hover { color: var(--azul); text-decoration: underline; }
.libro tr[data-ir] { cursor: pointer; }
.libro tr[data-ir]:hover td { background: var(--superficie-2); }
.libro .vencido { color: var(--rojo); font-size: .82rem; }
.libro + .titulo-bloque, .tiles + .titulo-bloque, .cuadre + .titulo-bloque { margin-top: 1.75rem; }
.tiles + .cuadre { margin-top: 1rem; }
.libro td.mono { white-space: nowrap; }
.pastilla.repetida { background: var(--ambar-suave); color: var(--ambar); border: 1px solid var(--ambar-borde); font-size: .72rem; padding: .05rem .45rem; vertical-align: 1px; }
.repetida-aviso { align-items: center; flex-wrap: wrap; }
.repetida-aviso > span { flex: 1; min-width: 14rem; }
.repetida-aviso a { color: inherit; font-weight: 600; }
.repetida-aviso .boton { margin-left: auto; }

/* Gasto por rubro mes a mes: este año contra el anterior */
.rubro-mes { margin-top: .9rem; padding: 1rem 1.15rem 1.15rem; }
.rubro-mes select { width: auto; min-width: 11rem; font-weight: 500; }
.conclusion { margin: .25rem 0 .75rem; color: var(--tinta-2); }
.conclusion strong { color: var(--tinta); }
.conclusion.sube strong { color: var(--rojo); }
.conclusion.baja strong { color: var(--verde); }
.leyenda-graf { display: flex; gap: 1rem; font-size: .8rem; color: var(--tinta-2); margin-bottom: .6rem; }
.leyenda-graf span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda-graf i { width: .75rem; height: .75rem; border-radius: 3px; background: var(--azul); }
.leyenda-graf i.antes, .col.doble .barra-mes.antes { background: color-mix(in srgb, var(--tinta-3) 45%, transparent); }
.col.doble { gap: 2px; cursor: default; }
.col.doble .barra-mes { width: min(36%, 16px); }

/* Fotos seguidas desde el celular */
.otra-foto { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 16px 16px 0 0; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta); }
.otra-foto[hidden] { display: none; }
.otra-foto .boton { flex: 1; justify-content: center; min-height: 52px; font-size: 1.05rem; }
.otra-foto span { color: var(--tinta-2); font-size: .9rem; }

/* Plan de pagos de la semana */
.plan { margin-top: .9rem; padding: 1rem 1.15rem 1.15rem; }
.plan h2 { display: flex; align-items: center; gap: .45rem; }
.plan-total { font-size: .95rem; }
.plan-total strong { font-size: 1.3rem; margin-left: .25rem; }
.plan-lista { list-style: none; margin: .25rem 0 0; padding: 0; }
.plan-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .25rem; border-top: 1px solid var(--borde); }
.plan-quien { display: grid; gap: .2rem; min-width: 0; }
.plan-quien a { color: inherit; }
.plan-quien .tenue a { color: var(--tinta-2); font-size: .85rem; }
.plan-quien .cuando { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; color: var(--ambar); font-weight: 600; }
.plan-quien .cuando.malo { color: var(--rojo); }
.plan-quien .cuando .icono { width: 1rem; height: 1rem; }
.plan-cuanto { display: grid; justify-items: end; align-content: start; gap: .45rem; text-align: right; }
.plan-cuanto strong { font-size: 1.1rem; }
.boton.chico { min-height: 34px; padding: .3rem .7rem; font-size: .85rem; }
.transferir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; }
.copiar { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 8px; border: 1px dashed var(--borde-fuerte); background: var(--superficie-2); color: var(--tinta-2); font-size: .82rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.copiar strong { color: var(--tinta); font-weight: 600; }
.copiar:hover { border-color: var(--azul); }
.banco { margin-top: .9rem; padding: 1rem 1.15rem 1.15rem; }
.banco-form { display: grid; grid-template-columns: 2fr 1.4fr 1fr auto; gap: .75rem; align-items: end; }
.banco-form[hidden] { display: none; }
.banco-form .error-caja { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .banco-form { grid-template-columns: 1fr; } .plan-lista li { flex-direction: column; } .plan-cuanto { justify-items: start; text-align: left; } }
.libro .panel-cab { gap: 1rem; flex-wrap: wrap; }
.libro .panel-cab p { margin: 0; flex: 1; min-width: 16rem; }
.libro table.anual td, .libro table.anual th { padding: .45rem .5rem; font-size: .84rem; }

/* Botones con el ícono a la derecha (Borrar, Guardar cambios): al pasar el mouse el ícono ocupa todo el botón.
   Cada uno pone sus colores: --fondo, --fondo-hover, --linea. */
.boton-lateral { --fondo: #e62222; --fondo-hover: #ff3636; --linea: #c41b1b; position: relative; overflow: hidden; display: inline-flex; align-items: center; min-width: 150px; height: 46px; padding: 0 3.6rem 0 1.15rem; border: 0; border-radius: 6px; background: var(--fondo); box-shadow: 1px 1px 3px rgb(0 0 0 / .15); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background 200ms; }
.boton-lateral .texto { white-space: nowrap; transition: color 200ms; }
.boton-lateral .lado { position: absolute; top: 3px; bottom: 3px; right: 0; width: 44px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--linea); transition: width 200ms, border-color 200ms; }
.boton-lateral .lado .icono { width: 17px; height: 17px; color: #eee; transition: transform 200ms; }
.boton-lateral:hover { background: var(--fondo-hover); }
.boton-lateral:hover .texto { color: transparent; }
.boton-lateral:hover .lado { width: 100%; border-left-color: transparent; }
.boton-lateral:active .lado .icono { transform: scale(.8); }
.boton-lateral:focus-visible { outline: 2px solid var(--fondo-hover); outline-offset: 3px; }
.boton-lateral[disabled] { opacity: .6; cursor: wait; }
.boton-guardar { --fondo: #16a34a; --fondo-hover: #22c55e; --linea: #12843c; min-width: 190px; }
.boton-guardar .lado .icono { stroke-width: 2.6; }
/* Fijo: sin la animación (el texto siempre a la vista, sólo se aclara el color) */
.boton-lateral.fijo:hover .texto { color: #fff; }
.boton-lateral.fijo:hover .lado { width: 44px; border-left-color: var(--linea); }
.boton-lateral[disabled]:hover { background: var(--fondo); }
/* Borrar esperando el segundo toque: se lee el aviso aunque el mouse esté encima */
.boton-borrar.seguro, .boton-borrar.seguro:hover { background: #b91c1c; }
.boton-borrar.seguro:hover .texto { color: #fff; }
.boton-borrar.seguro:hover .lado { width: 44px; border-left-color: #8f1414; }
.barra-acciones .boton-borrar { margin-left: auto; }

/* Control con ARCA y comprobantes sin original */
.pasos-arca { padding: 1.25rem 1.4rem; max-width: 640px; }
.pasos-arca h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.pasos-arca ol { margin: 0 0 1.1rem; padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--tinta-2); }
.pasos-arca .error-caja { margin-top: .9rem; }
.pastilla.sin-pdf { margin-left: .35rem; background: var(--superficie-2); color: var(--tinta-3); border: 1px dashed var(--borde-fuerte); }
.sin-original { display: grid; justify-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--tinta-2); }
.sin-original > .icono { width: 2rem; height: 2rem; color: var(--tinta-3); }
.sin-original strong { color: var(--tinta); font-size: 1.05rem; }
.sin-original .boton { margin-top: .5rem; }
#error-arca:not([hidden]) { margin-bottom: 1rem; }
.acciones-arca { display: flex; flex-wrap: wrap; gap: .6rem; }
.quitados-arca { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; color: var(--tinta-2); font-size: .9rem; }
.quitados-arca .icono { width: 1rem; height: 1rem; }
.enlace { padding: 0; border: 0; background: none; color: var(--azul); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* Quitar y Agregar: mismo ancho siempre, diga lo que diga el texto (1, 627, "Tocá de nuevo…") */
.acciones-arca .boton-lateral { width: 11.5rem; min-width: 0; }
@media (max-width: 600px) { .acciones-arca { width: 100%; } .acciones-arca .boton-lateral { width: 100%; } }


/* ── Asistente ───────────────────────────────────────────────── */
.nav-ia .icono { color: #8b5cf6; }
.asistente { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100vh - 4rem); }
.asistente-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.asistente-cab h1 { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.asistente-cab h1 .icono { color: #8b5cf6; width: 1.4rem; height: 1.4rem; }
.chat-mensajes { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; }
.msj { max-width: 85%; padding: .75rem 1rem; border-radius: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.msj.yo { align-self: flex-end; background: #4f46e5; color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.msj.ia { align-self: stretch; max-width: none; background: var(--superficie); border: 1px solid var(--borde); color: var(--tinta); border-bottom-left-radius: 4px; }
.msj.ia p { margin: 0 0 .6rem; } .msj.ia > :last-child { margin-bottom: 0; }
.msj.ia h3 { margin: .9rem 0 .4rem; font-size: 1rem; } .msj.ia h3:first-child { margin-top: 0; }
.msj.ia ul { margin: .2rem 0 .7rem; padding-left: 1.2rem; display: grid; gap: .2rem; }
.msj.ia a { color: var(--azul); font-weight: 600; }
.msj.ia .tabla-envoltura { margin: .4rem 0 .8rem; }
.msj.ia table { font-size: .88rem; }
.msj.ia th, .msj.ia td { padding: .4rem .55rem; border-bottom: 1px solid var(--borde); text-align: left; }
.msj.ia td.num, .msj.ia th.num { text-align: right; white-space: nowrap; }
.msj.ia.error { background: var(--ambar-suave); color: var(--ambar); border-color: var(--ambar-borde); }
.msj .costo { display: block; margin-top: .6rem; font-size: .72rem; color: var(--tinta-3); }
.msj.pensando { align-self: flex-start; display: flex; gap: .35rem; padding: 1rem 1.1rem; }
.msj.pensando span { width: .5rem; height: .5rem; border-radius: 50%; background: #8b5cf6; animation: latido 1s infinite ease-in-out; }
.msj.pensando span:nth-child(2) { animation-delay: .15s; } .msj.pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes latido { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.chat-vacio { text-align: center; padding: 3rem 0 1rem; color: var(--tinta-2); }
.chat-vacio h2 { margin: 0 0 .5rem; font-size: 1.6rem; color: var(--tinta); }
.chat-vacio p { margin: 0 auto 1.5rem; max-width: 520px; }
.sugerencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; text-align: left; }
.sugerencia { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem 1rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: .9rem; cursor: pointer; transition: border-color 150ms, transform 150ms; }
.sugerencia:hover { border-color: #8b5cf6; transform: translateY(-1px); }
.sugerencia .icono { flex: none; width: 1.1rem; height: 1.1rem; color: #8b5cf6; margin-top: .1rem; }
.chat-form { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: .5rem; padding: .75rem 0 .25rem; background: var(--fondo); }
.chat-form textarea { flex: 1; resize: none; min-height: 52px; max-height: 200px; padding: .85rem 1rem; border-radius: 14px; font: inherit; field-sizing: content; box-shadow: var(--sombra); }
.chat-enviar { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 0; border-radius: 14px; background: #4f46e5; color: #fff; cursor: pointer; }
.chat-enviar:hover { background: #4338ca; }
.chat-nota { margin: .35rem 0 0; text-align: center; font-size: .75rem; color: var(--tinta-3); }

/* Gráficos del asistente: paleta categórica validada (claro / oscuro) */
:root { --g1: #2a78d6; --g2: #eb6834; --g3: #1baf7a; --g4: #eda100; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --g1: #3987e5; --g2: #d95926; --g3: #199e70; --g4: #c98500; } }
:root[data-tema="oscuro"] { --g1: #3987e5; --g2: #d95926; --g3: #199e70; --g4: #c98500; }
.grafico { margin: .6rem 0 .9rem; padding: .9rem 1rem .6rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); }
.grafico figcaption { font-weight: 650; margin-bottom: .4rem; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-guia { stroke: var(--borde); stroke-width: 1; }
.g-cero { stroke: var(--borde-fuerte); stroke-width: 1; }
.g-eje { fill: var(--tinta-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.g-valor { fill: var(--tinta-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-s1 { fill: var(--g1); background: var(--g1); } .g-s2 { fill: var(--g2); background: var(--g2); }
.g-s3 { fill: var(--g3); background: var(--g3); } .g-s4 { fill: var(--g4); background: var(--g4); }
.g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; }
.g-t1 { stroke: var(--g1); } .g-t2 { stroke: var(--g2); } .g-t3 { stroke: var(--g3); } .g-t4 { stroke: var(--g4); }
.g-punto { stroke: var(--fondo); stroke-width: 2; }
.grafico rect:hover, .g-punto:hover { opacity: .8; }
.g-leyenda { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .82rem; color: var(--tinta-2); margin-bottom: .3rem; }
.g-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.g-leyenda i { width: .75rem; height: .75rem; border-radius: 3px; }
@media (max-width: 600px) { .msj { max-width: 92%; } .asistente { min-height: calc(100vh - 8rem); } }

/* ── Asistente: estilo "AI-Native" (un solo acento índigo, poco cromo) ── */
:root { --ia: #6366f1; --ia-2: #8b5cf6; --ia-suave: rgb(99 102 241 / .12); }
/* En el menú: el mismo arcoíris de "Analizar con IA", con brillo alrededor */
.nav-ia { position: relative; isolation: isolate; box-shadow: -3px 0 12px -2px rgb(255 80 80 / .45), 3px 0 12px -2px rgb(80 150 255 / .5), 0 -3px 12px -3px rgb(110 230 120 / .4), 0 3px 12px -3px rgb(170 90 255 / .5); }
.nav-ia::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(90deg, hsl(0 100% 63%), hsl(90 100% 63%), hsl(210 100% 63%), hsl(195 100% 63%), hsl(270 100% 63%), hsl(0 100% 63%)) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: arcoiris-luz 3s linear infinite; }
.nav-ia .icono { color: var(--ia-2); }
.asistente-cab h1 { background: linear-gradient(90deg, var(--ia), var(--ia-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.asistente-cab p { margin: .2rem 0 0; color: var(--tinta-2); }
.fila-ia { display: flex; align-items: flex-start; gap: .7rem; }
.avatar-ia { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: .15rem; border-radius: 10px; background: linear-gradient(135deg, var(--ia), var(--ia-2)); color: #fff; box-shadow: 0 4px 14px -4px rgb(99 102 241 / .6); }
.avatar-ia .icono { width: 1.05rem; height: 1.05rem; }
.fila-ia .msj.ia { flex: 1; min-width: 0; border-left: 3px solid var(--ia); border-radius: 4px 14px 14px 14px; }
.fila-ia .msj.pensando { flex: none; }
.msj.pensando span { background: var(--ia); }
.msj.yo { background: linear-gradient(135deg, var(--ia), var(--ia-2)); box-shadow: 0 6px 18px -8px rgb(99 102 241 / .7); }
.hero-ia { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; border-radius: 20px; background: linear-gradient(135deg, var(--ia), var(--ia-2)); color: #fff; box-shadow: 0 10px 34px -8px rgb(139 92 246 / .7); }
.hero-ia .icono { width: 1.9rem; height: 1.9rem; }
.chat-vacio h2 { font-size: 1.8rem; }
.sugerencia { align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 14px; }
.sugerencia:hover, .sugerencia:focus-visible { border-color: var(--ia); box-shadow: 0 8px 22px -12px rgb(99 102 241 / .7); }
.sugerencia-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ia-suave); }
.sugerencia-ic .icono { margin: 0; color: var(--ia); }
.chat-form { padding: .5rem .5rem .5rem .9rem; margin-top: .5rem; border: 1px solid var(--borde-fuerte); border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra-alta); transition: border-color 150ms, box-shadow 150ms; }
.chat-form:focus-within { border-color: var(--ia); box-shadow: 0 0 0 4px var(--ia-suave), var(--sombra-alta); }
.chat-form textarea { border: 0; background: transparent; box-shadow: none; padding: .75rem .25rem; min-height: 48px; }
.chat-form textarea:focus { box-shadow: none; outline: none; }
.chat-enviar { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--ia), var(--ia-2)); transition: transform 150ms, filter 150ms; }
.chat-enviar:hover { background: linear-gradient(135deg, var(--ia), var(--ia-2)); filter: brightness(1.1); transform: translateY(-1px); }
.chat-enviar:focus-visible { outline: 2px solid var(--ia); outline-offset: 3px; }
.chat-form { position: sticky; bottom: .75rem; }
/* Ajustes del Asistente en el menú: brillo más suave, ícono centrado y texto en violeta */
.nav-ia { box-shadow: -2px 0 8px -3px rgb(255 80 80 / .3), 2px 0 8px -3px rgb(80 150 255 / .35), 0 -2px 8px -4px rgb(110 230 120 / .25), 0 2px 8px -4px rgb(170 90 255 / .35); }
.nav-ia::after { opacity: .8; }
.nav-ia [data-icono] { display: grid; place-items: center; }
.nav-ia .icono { transform: translateY(1px); }
.nav-ia .nav-texto { font-weight: 650; background: linear-gradient(90deg, #4f46e5, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .nav-ia .nav-texto { background-image: linear-gradient(90deg, #a5b4fc, #d8b4fe); } }
:root[data-tema="oscuro"] .nav-ia .nav-texto { background-image: linear-gradient(90deg, #a5b4fc, #d8b4fe); }
/* La pantalla del Asistente entra justa: sin el margen de abajo que la hacía deslizar */
main:has(> .asistente) { padding-bottom: .5rem; }
.asistente { min-height: calc(100vh - 2.5rem); }

/* ── Celular y tablet: barra arriba con las 3 rayitas; el menú sale como panel desde la izquierda ── */
.barra-celu, .fondo-menu { display: none; }
@media (max-width: 860px) {
  .barra-celu { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem; padding: .5rem 12px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
  .barra-celu .marca span:last-child { display: inline; }
  .menu-abrir { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta); cursor: pointer; }
  .menu-abrir:hover { background: var(--superficie-2); }
  .menu-abrir .icono { width: 1.4rem; height: 1.4rem; }
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(280px, 84vw); height: 100dvh; overflow-y: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.5rem; padding: 1.25rem .9rem;
    border-right: 1px solid var(--borde); border-bottom: 0; box-shadow: var(--sombra-alta);
    transform: translateX(-105%); transition: transform 240ms cubic-bezier(.2, .7, .3, 1); }
  body.menu-abierto .lateral { transform: none; }
  .lateral .marca span:last-child { display: inline; }
  .lateral nav { flex-direction: column; }
  .tema, .salir { margin-top: auto; }
  .salir { margin-top: 0; }
  .lateral .nav-texto { display: inline; }
  .lateral nav a { justify-content: flex-start; }
  .panel-cab { flex-wrap: wrap; }
  .fondo-menu { position: fixed; inset: 0; z-index: 45; display: block; background: rgb(0 0 0 / .45); }
  .fondo-menu[hidden] { display: none; }
  body.sin-sesion .barra-celu { display: none; }
  /* Que la barra de arriba no se estire en las pantallas cortas (Cargar, Control con ARCA) */
  .app { align-content: start; }
}
/* Título y filtros de año/mes: en la misma línea y centrados; en pantalla chica, los filtros abajo y a lo ancho */
.encabezado { align-items: center; }
@media (max-width: 600px) {
  .encabezado .filtros { width: 100%; }
  .encabezado .filtros label { flex: 1; }
  .encabezado .filtros select { width: 100%; min-width: 0; }
}
/* Cargar: la zona para soltar facturas, verde como el recuadro de Inicio */
.zona { background: linear-gradient(120deg, #047857, #0d9488); border: 2px dashed rgb(255 255 255 / .45); color: #fff; box-shadow: 0 8px 24px -10px rgb(4 120 87 / .55); }
.zona > span:not(.burbuja):not(.botones) { color: rgb(255 255 255 / .88); }
.zona .burbuja { background: rgb(255 255 255 / .18); color: #fff; }
.zona.encima { border-color: #fff; background: linear-gradient(120deg, #05966a, #10a99c); }
.zona .boton.primario { background: #fff; color: #047857; }
.zona .boton.primario:hover { background: #ecfdf5; }
.zona .boton.secundario { background: rgb(255 255 255 / .15); color: #fff; border-color: rgb(255 255 255 / .5); }
/* Las etiquetas invisibles de las tablas quedan dentro de su caja (antes estiraban la página en el celular) */
.tabla-envoltura { position: relative; }
html, body { overflow-x: clip; }
/* Ficha por revisar: arriba "Guardar sin confirmar" (izq.) y "Borrar" (der.); abajo, ancho y más grande, "Confirmar" */
.barra-acciones:has([data-confirmar]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "guardar borrar" "confirmar confirmar"; gap: .75rem; align-items: stretch; }
.barra-acciones:has([data-confirmar]) [data-confirmar] { grid-area: confirmar; width: 100%; min-height: 56px; font-size: 1.05rem; justify-content: center; }
.barra-acciones:has([data-confirmar]) .boton.secundario { grid-area: guardar; justify-self: start; min-height: 46px; }
.barra-acciones:has([data-confirmar]) .boton-borrar { grid-area: borrar; margin-left: 0; }
/* Guardar sin confirmar y Borrar: mitad y mitad */
.barra-acciones:has([data-confirmar]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.barra-acciones:has([data-confirmar]) .boton.secundario, .barra-acciones:has([data-confirmar]) .boton-borrar { width: 100%; min-width: 0; justify-self: stretch; }
.barra-acciones:has([data-confirmar]) .boton.secundario { justify-content: center; }
@media (max-width: 600px) { .barra-acciones:has([data-confirmar]) .boton.secundario { padding: 0 .5rem; font-size: .88rem; } }
/* Ficha confirmada: Guardar cambios (65 %) y Borrar (35 %) en una línea */
.barra-acciones:has(.boton-guardar) { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: .75rem; }
.barra-acciones:has(.boton-guardar) > .boton-lateral { width: 100%; min-width: 0; margin-left: 0; }
.barra-acciones:has(.boton-guardar) .texto { overflow: hidden; text-overflow: ellipsis; }
/* iPhone: los campos de fecha no se pasan del ancho */
input[type="date"] { min-width: 0; max-width: 100%; display: block; }
@media (max-width: 600px) {
  .barra-acciones .boton-lateral { padding: 0 2.9rem 0 .8rem; font-size: .9rem; justify-content: center; }
  .barra-acciones .boton-lateral .lado { width: 38px; }
  .barra-acciones .boton-lateral.seguro .lado { width: 38px; }
}

/* ── Cuentas: empresa en el menú, pantalla Empresa y sólo lectura ── */
.cuenta { margin-top: auto; display: grid; gap: .4rem; padding: .7rem .6rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); font-size: .88rem; }
.cuenta[hidden] { display: none; }
.cuenta + .tema { margin-top: .5rem; }
.cuenta-quien { display: inline-flex; align-items: center; gap: .45rem; color: var(--tinta-2); min-width: 0; }
.cuenta-quien .nav-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-empresa { font-weight: 650; color: var(--tinta); }
.cuenta select { width: 100%; font-weight: 600; min-height: 38px; }
.seccion-cuenta { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.seccion-cuenta h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: 1.05rem; }
.seccion-cuenta h3 { margin: 1.2rem 0 .5rem; font-size: .95rem; }
.fila-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.fila-form .campo { flex: 1 1 200px; margin: 0; }
.personas { list-style: none; margin: 0 0 1rem; padding: 0; }
.personas li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.acciones-persona { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.acciones-persona select { width: auto; min-height: 36px; }
.link-listo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 1rem; padding: .75rem; border-radius: 10px; background: var(--verde-suave); }
.link-listo input { flex: 1 1 260px; font-family: ui-monospace, monospace; font-size: .82rem; }
.tenue.chico, .chico.tenue { font-size: .82rem; }
.entrada .tenue.chico { margin: .75rem 0 0; text-align: center; }
/* Sólo lectura: se ve todo, pero sin lo que cambia datos (el servidor igual lo rechaza) */
body.solo-lectura .lateral a[data-ruta="cargar"], body.solo-lectura .cargar-caja, body.solo-lectura .barra-acciones,
body.solo-lectura .barra-lote, body.solo-lectura .marcar, body.solo-lectura #pensar, body.solo-lectura [data-pague],
body.solo-lectura .banco-form, body.solo-lectura #editar-banco, body.solo-lectura .acciones-arca, body.solo-lectura #filtros a[href="#/cargar"],
body.solo-lectura .encabezado a[href="#/cargar"], body.solo-lectura .repetida-aviso .boton, body.solo-lectura .sin-original label { display: none !important; }

/* Cargar: borrar la repetida e historial */
.cola .derecha { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.historial a.arriba { color: inherit; text-decoration: none; }
.encabezado .solapas { align-self: flex-start; }

/* Cierre de mes y Libro IVA Digital */
.cierre-mes { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 20px; }
.cierre-mes h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 4px; }
.cierre-mes h2 svg { width: 18px; height: 18px; }
.cierre-mes.cerrado { border-color: var(--verde); }
.cierre-mes .botones-cierre { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .cierre-mes .botones-cierre, .cierre-mes .botones-cierre .boton { width: 100%; } }

/* Contador: Bandeja y Libro de IVA (Empresa está en la tarjeta de la persona) */
body.contador nav a:not([data-ruta="facturas"]):not([data-ruta="iva"]) { display: none; }

/* La tarjeta de la persona lleva a Empresa */
.cuenta-link { display: grid; gap: .4rem; color: inherit; text-decoration: none; border-radius: 8px; margin: -.3rem; padding: .3rem; }
.cuenta-link:hover { background: var(--superficie); }
.cuenta-link.activa .cuenta-ir { color: var(--acento, var(--tinta)); }
.cuenta-ir { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--tinta-3, var(--tinta-2)); }
.cuenta-ir svg { width: 14px; height: 14px; }

/* Sin textos de ayuda: los encabezados de tarjeta con sólo botones van a la derecha */
.panel-cab.solo-acciones { justify-content: flex-end; }
.cuenta-link { position: relative; padding-right: 1.6rem; }
.cuenta-ir { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); }

/* ── Panel izquierdo, sobrio ─────────────────────────────────────
   Sin brillos ni arcoíris: la sección activa se marca con una barrita y el texto más fuerte. */
.lateral { gap: 1.25rem; }
.marca-icono { width: 30px; height: 30px; border-radius: 7px; }
nav { gap: 1px; }
nav a { position: relative; min-height: 38px; gap: .75rem; padding: 0 .7rem; border-radius: 6px; color: var(--tinta-2); }
nav a .icono { width: 18px; height: 18px; stroke-width: 1.6; color: var(--tinta-3); transition: color var(--rapido); }
nav a:hover .icono { color: var(--tinta-2); }
nav a.activa { background: var(--superficie-2); color: var(--tinta); font-weight: 600; }
nav a.activa .icono { color: var(--azul); }
nav a.activa::before { content: ""; position: absolute; left: -.9rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--azul); }
.nav-sep { border: 0; border-top: 1px solid var(--borde); margin: .55rem .7rem; }
.nav-ia .icono { color: var(--ia-2); }
/* Persona: fila con iniciales, sin recuadro */
.cuenta { border: 0; border-top: 1px solid var(--borde); border-radius: 0; background: none; padding: .9rem .2rem 0; }
.cuenta-link { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .65rem; row-gap: 0; align-items: center; margin: 0; padding: .35rem 1.6rem .35rem .4rem; border-radius: 6px; }
.cuenta-link:hover { background: var(--superficie-2); }
.cuenta-avatar { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.cuenta-link .cuenta-quien { color: var(--tinta); font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-link .cuenta-empresa { color: var(--tinta-3); font-weight: 500; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-ir { color: var(--tinta-3); }
.tema, .salir { min-height: 36px; padding: 0 .7rem; font-size: .88rem; }

/* ── Modo oscuro: más acentos en verde ───────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .titulo-bloque { color: var(--azul); }
:root:not([data-tema="claro"]) .titulo-bloque .icono, :root:not([data-tema="claro"]) .tarjeta h2 .icono, :root:not([data-tema="claro"]) .seccion-cuenta h2 .icono { color: var(--azul); }
:root:not([data-tema="claro"]) .tile .etiqueta .icono { color: var(--azul); }
:root:not([data-tema="claro"]) .tile { border-top: 1px solid color-mix(in srgb, var(--azul) 22%, var(--borde)); }
:root:not([data-tema="claro"]) .tarjeta:hover { border-color: color-mix(in srgb, var(--azul) 30%, var(--borde)); }
:root:not([data-tema="claro"]) .solapas button[aria-selected="true"] { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }
:root:not([data-tema="claro"]) th { color: color-mix(in srgb, var(--azul) 55%, var(--tinta-3)); }
:root:not([data-tema="claro"]) .encabezado h1::after { content: ""; display: block; width: 28px; height: 3px; margin-top: .45rem; border-radius: 3px; background: var(--azul); }
:root:not([data-tema="claro"]) .marca-icono { box-shadow: 0 0 0 1px color-mix(in srgb, var(--azul) 45%, transparent), 0 0 14px -4px var(--azul); }
:root:not([data-tema="claro"]) .cuenta-avatar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--azul) 40%, transparent); }
:root:not([data-tema="claro"]) input:focus, :root:not([data-tema="claro"]) select:focus, :root:not([data-tema="claro"]) textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
}
:root[data-tema="oscuro"] .titulo-bloque { color: var(--azul); }
:root[data-tema="oscuro"] .titulo-bloque .icono, :root[data-tema="oscuro"] .tarjeta h2 .icono, :root[data-tema="oscuro"] .seccion-cuenta h2 .icono { color: var(--azul); }
:root[data-tema="oscuro"] .tile .etiqueta .icono { color: var(--azul); }
:root[data-tema="oscuro"] .tile { border-top: 1px solid color-mix(in srgb, var(--azul) 22%, var(--borde)); }
:root[data-tema="oscuro"] .tarjeta:hover { border-color: color-mix(in srgb, var(--azul) 30%, var(--borde)); }
:root[data-tema="oscuro"] .solapas button[aria-selected="true"] { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }
:root[data-tema="oscuro"] th { color: color-mix(in srgb, var(--azul) 55%, var(--tinta-3)); }
:root[data-tema="oscuro"] .encabezado h1::after { content: ""; display: block; width: 28px; height: 3px; margin-top: .45rem; border-radius: 3px; background: var(--azul); }
:root[data-tema="oscuro"] .marca-icono { box-shadow: 0 0 0 1px color-mix(in srgb, var(--azul) 45%, transparent), 0 0 14px -4px var(--azul); }
:root[data-tema="oscuro"] .cuenta-avatar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--azul) 40%, transparent); }
:root[data-tema="oscuro"] input:focus, :root[data-tema="oscuro"] select:focus, :root[data-tema="oscuro"] textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
/* Las tarjetas con estado (vencido, atento, bien) mantienen el color de su estado en el ícono */
:root .tile.malo .etiqueta .icono, :root .tile.atento .etiqueta .icono, :root .tile.bueno .etiqueta .icono { color: inherit !important; }
/* Asistente vacío: una factura con una chispita, en vez de la estrella sola */
.hero-ia { position: relative; width: 72px; height: 72px; border-radius: 22px;
  background: radial-gradient(120% 120% at 30% 15%, #8b8cf8 0%, var(--ia) 45%, var(--ia-2) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 12px 30px -12px rgb(139 92 246 / .6); }
.hero-ia > .icono { width: 2rem; height: 2rem; stroke-width: 1.7; }
.hero-chispa { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fondo); color: #c4b5fd; box-shadow: 0 0 0 2px var(--ia-2); }
.hero-chispa .icono { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.2; }

/* Sello de constatación en ARCA */
.pastilla.sello { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; padding: .05rem .45rem; vertical-align: 1px; }
.pastilla.sello .icono { width: 12px; height: 12px; }
.pastilla.mal { background: var(--rojo-suave); color: var(--rojo); }
.titulo-ficha #constatar { margin-left: .4rem; vertical-align: middle; }
/* El botón "Asistente IA" queda como lo diseñamos: el panel sobrio no lo toca */
nav a.nav-ia { min-height: 40px; padding: 0 .75rem; gap: .7rem; border-radius: var(--radio-chico); }
nav a.nav-ia .icono { width: 1.15em; height: 1.15em; stroke-width: 1.8; color: var(--ia-2); transform: translateY(1px); }
nav a.nav-ia.activa::before { content: none; }
nav a.nav-ia.activa { background: var(--azul-suave); color: var(--azul); font-weight: 500; }

/* ── Entrar ─────────────────────────────────────────────────────── */
body.sin-sesion main {
  position: relative; isolation: isolate; overflow: hidden; padding: 1.5rem 1rem;
  background:
    radial-gradient(600px 420px at 15% 10%, color-mix(in srgb, var(--azul) 14%, transparent), transparent 70%),
    radial-gradient(520px 380px at 90% 95%, color-mix(in srgb, var(--azul) 10%, transparent), transparent 70%);
}
body.sin-sesion main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--tinta) 9%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.entrada {
  width: min(400px, 100%); padding: 2.25rem 2rem 1.75rem; gap: 1.1rem; border-radius: 16px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 24px 48px -24px color-mix(in srgb, var(--azul) 35%, transparent);
  animation: entrar .45s cubic-bezier(.2, .8, .2, 1) both;
}
.entrada-marca { display: flex; align-items: center; gap: .6rem; font-weight: 650; font-size: 1rem; letter-spacing: -.01em; color: var(--tinta); }
.entrada .entrada-marca .marca-icono { width: 34px; height: 34px; border-radius: 9px; }
.entrada .entrada-marca .marca-icono svg { width: 18px; height: 18px; }
.entrada h1 { margin: .6rem 0 .15rem; font-size: 1.65rem; letter-spacing: -.02em; }
.entrada input { min-height: 44px; }
.campo > .con-ojo { display: block; position: relative; font-size: 1rem; font-weight: 400; color: inherit; }
.con-ojo input { width: 100%; padding-right: 2.9rem; }
.ver-clave {
  position: absolute; top: 50%; right: .3rem; translate: 0 -50%; display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 6px; background: none; color: var(--tinta-3); cursor: pointer;
}
.ver-clave:hover { color: var(--tinta); background: var(--superficie-2); }
.ver-clave .icono { width: 18px; height: 18px; }
.entrada #entrar { min-height: 46px; margin-top: .3rem; font-size: 1rem; position: relative; }
.boton.cargando { color: transparent !important; pointer-events: none; }
.boton.cargando::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: girar .7s linear infinite;
}
.olvide { text-align: center; font-size: .85rem; color: var(--tinta-2); }
.olvide summary { list-style: none; cursor: pointer; display: inline-block; padding: .25rem .4rem; border-radius: 6px; }
.olvide summary::-webkit-details-marker { display: none; }
.olvide summary:hover { color: var(--azul); }
.olvide p { margin: .35rem 0 0 !important; color: var(--tinta-2); }
@media (max-width: 480px) {
  .entrada { padding: 1.75rem 1.25rem 1.25rem; box-shadow: none; }
}

/* Hasta saber si hay sesión no se pinta nada: sin el parpadeo del menú antes de Ingresar */
body:not(.listo) .app { visibility: hidden; }