/* ==================================================================== */
/*  Panel de facturas — design system moderno (CSS propio)              */
/* ==================================================================== */
:root {
  /* Neutrales (slate) */
  --tinta:   #15171a;
  --tinta-2: #3b3f46;
  --gris:    #6a6f78;
  --gris-2:  #9ca1a9;
  --borde:   #e3e3de;
  --borde-2: #eeeeea;
  --fondo:   #f7f7f4;
  --panel:   #ffffff;
  /* Acento (indigo) */
  --acento:       #2451e6;
  --acento-2:     #1c40bd;
  --acento-suave: #eef2fd;
  --acento-borde: #d5ddfa;
  /* Semánticos */
  --ok: #047857;    --ok-bg: #ecfdf5;   --ok-borde:#a7f3d0;
  --ok-bg2:#d1fae5;
  --falta: #b45309; --falta-bg: #fffbeb; --falta-borde:#fde9c8;
  --error: #dc2626; --error-bg: #fef2f2; --error-borde:#fbdcdc;
  --gris-bg: #f0f0ec;
  /* Escala tipográfica: OCHO pasos y nada más. Antes había 22 tamaños sueltos
     (.64, .68, .7, .72, .74, .78, .8, .82, .84, .85, .86, .88, .9, .92, .95…),
     que es lo que hacía ver "cada texto con una letra distinta". */
  --fs-xs:   .72rem;   /* micro-etiquetas en mayúscula, badges */
  --fs-sm:   .8rem;    /* letra chica, notas al pie */
  --fs-md:   .875rem;  /* texto secundario, botones, links de acción */
  --fs-base: .92rem;   /* cuerpo */
  --fs-lg:   1.05rem;  /* títulos de tarjeta (h3) */
  --fs-xl:   1.25rem;  /* h2 e importes destacados */
  --fs-2xl:  1.7rem;   /* h1 */
  --fs-3xl:  1.95rem;  /* números de KPI */
  /* Segunda familia de acento (violeta) y celeste: las usan el país y el estado
     "resuelta fuera del sistema". Estaban repetidas a mano en cinco lugares. */
  --violeta: #6d28d9; --violeta-bg: #ede9fe;
  --celeste: #0369a1; --celeste-bg: #e0f2fe;
  /* Sombras + radios */
  --sombra:    0 1px 0 rgba(21,23,26,.03);
  --sombra-lg: 0 8px 24px rgba(21,23,26,.10);
  --radio: 6px;
  --radio-sm: 4px;
  --sidebar: #0b1120;
  --sidebar-2: #111a2e;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--fs-base)/1.55 "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--acento); text-underline-offset: 2px; }

/* ---------- Shell con sidebar ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 244px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, var(--sidebar-2), var(--sidebar));
  color: #c7d0de; display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sb-marca {
  display: flex; align-items: center; gap: 12px; padding: 22px 20px 20px;
  color: #fff; text-decoration: none; font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
}
.sb-marca em { color: var(--gris-2); font-style: normal; font-weight: 500; font-size: .82em; }
.sb-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radio-sm);
  background: var(--acento);
  display: grid; place-items: center; color: #fff; font-size: var(--fs-lg);
  
}
.sb-nav { display: flex; flex-direction: column; padding: 10px 12px; gap: 3px; }
.sb-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: var(--radio-sm); text-decoration: none; color: #93a1b8;
  font-weight: 500; font-size: var(--fs-base); transition: background .14s, color .14s;
}
.sb-nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sb-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.sb-nav a.activo {
  background: var(--acento); color: #fff;
}
.sb-nav a.activo svg { opacity: 1; }
.sb-sep { height: 1px; background: rgba(255,255,255,.07); margin: 10px 16px; }
.sb-foot { margin-top: auto; padding: 16px; font-size: var(--fs-sm); color: #5b6579; display: flex; flex-direction: column; gap: 10px; }
.sb-logout button {
  width: 100%; margin: 0; background: rgba(255,255,255,.05); color: #c7d0de;
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radio-sm); padding: 9px; font-weight: 500;
}
.sb-logout button:hover { background: rgba(255,255,255,.1); filter: none; }
.content { flex: 1; min-width: 0; max-width: 1340px; margin: 0 auto; padding: 34px 40px 72px; width: 100%; }
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; border-right: none; }
  .sb-marca { padding: 14px 18px; }
  .sb-nav { flex-direction: row; margin-left: auto; padding: 10px; }
  .sb-nav a span { display: none; }
  .sb-sep, .sb-foot { display: none; }
  .content { padding: 24px 18px 56px; }
}

/* ---------- Tipografía ---------- */
h1 { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 20px; letter-spacing: -.03em; line-height: 1.15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
h1 small { color: var(--gris); font-weight: 500; font-size: .6em; letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); font-weight: 600; margin: 34px 0 14px; letter-spacing: -.02em; }
h2 small { color: var(--gris); font-weight: 500; }
small, .ayuda, .muted { color: var(--gris); }
.vacio { color: var(--gris); }
.migas { margin: 0 0 6px; font-size: var(--fs-md); }
.migas a { color: var(--gris); text-decoration: none; font-weight: 500; }
.migas a:hover { color: var(--acento); }
.ayuda { font-size: var(--fs-base); margin: 6px 0; line-height: 1.5; }
code { background: var(--gris-bg); padding: 1.5px 6px; border-radius: var(--radio-sm); font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- KPIs / tiles ---------- */
.kpis, .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin: 6px 0 10px; }
.tiles { margin: 20px 0 22px; }
.kpi, .tile {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px 20px; box-shadow: var(--sombra); transition: box-shadow .16s, transform .16s;
}
.kpi:hover, .tile:hover { box-shadow: none; transform: none; }
a.tile:hover, .tile--filtro:hover { border-color: var(--gris-2); }
.kpi .k-num, .tile-n { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--tinta); }
.tile-n--sm { font-size: var(--fs-xl); }
.kpi .k-lbl, .tile-l { color: var(--gris); font-size: var(--fs-md); margin-top: 5px; font-weight: 500; }
.kpi .k-sub, .tile-sub { color: var(--gris-2); font-size: var(--fs-sm); margin-top: 4px; }
/* Los tiles de una fila miden lo mismo aunque a uno se le parta el subtítulo
   en dos renglones ("1 con error · 3 esperando decisión"). */
.tiles .tile, .kpis .kpi { display: flex; flex-direction: column; justify-content: flex-start; }
a.tile { color: inherit; text-decoration: none; }
/* Filtro de período de Inicio: select + fecha + botones en una línea. */
.ini-filtro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ini-filtro select, .ini-filtro input { width: auto; margin: 0; height: 34px; padding: 0 10px; font-size: var(--fs-md); }
.ini-filtro .btn-mini { height: 34px; display: inline-flex; align-items: center; }
.ini-paso { display: inline-flex; align-items: center; gap: 6px; }
.ini-paso .btn-mini { min-width: 34px; justify-content: center; font-size: var(--fs-base); }
.ini-paso-txt { min-width: 150px; text-align: center; font-weight: 600; font-size: var(--fs-md); color: var(--tinta); }
.ini-paso-off { opacity: .35; pointer-events: none; }
.tile-l, .kpi .k-lbl { line-height: 1.4; }
.kpi.k-alerta, .tile--warn { border-color: var(--falta-borde); background: var(--panel); }
.kpi.k-alerta .k-num, .tile--warn .tile-n { color: var(--falta); }
.tile--ok .tile-n { color: var(--ok); }
.tile--filtro { cursor: pointer; user-select: none; }
.tile--filtro:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tile--activo { border-color: var(--acento); background: var(--acento-suave); box-shadow: var(--sombra-lg); }
.tile--activo .tile-l { color: var(--acento); }
.seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.seccion-cab h2 { margin: 0; }
.seccion-cab a { font-size: var(--fs-base); text-decoration: none; font-weight: 500; }
.pg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* Acciones de la cabecera: una fila por acción, con su estado al lado (cuándo corrió). */
.pg-head-accion {
  flex-shrink: 0; min-width: 330px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); box-shadow: var(--sombra);
}
.accion-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; }
.accion-fila + .accion-fila { border-top: 1px solid var(--borde-2); }
.accion-texto { display: flex; flex-direction: column; gap: 2px; }
.accion-texto strong { font-size: var(--fs-md); font-weight: 600; color: var(--tinta); }
.accion-texto small { font-size: var(--fs-sm); }
.accion-fila form { margin: 0; }
/* Ficha de factura: el mismo form, sin marco de fieldset; deshabilitado = consulta. */
.ficha-campos { border: 0; padding: 0; margin: 0; min-width: 0; }
.accion-fila .btn-mini { min-width: 108px; justify-content: center; }
@media (max-width: 760px) { .pg-head { flex-direction: column; } .pg-head-accion { min-width: 0; width: 100%; } }

/* ---------- Cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px 22px; margin: 16px 0; box-shadow: var(--sombra);
}
.card--tabla { padding: 0; overflow: hidden; }

/* ---------- Tablas (páginas sin AG Grid) ---------- */
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--borde-2); vertical-align: middle; }
th { background: var(--fondo); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 600; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--fondo); }
tr:last-child td { border-bottom: none; }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Acordeón (details) ---------- */
.acordeon > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::before { content: "▸"; color: var(--gris-2); font-size: var(--fs-md); transition: transform .14s ease; display: inline-block; }
.acordeon[open] > summary::before { transform: rotate(90deg); }
.acordeon > summary h2 { margin: 0; display: inline; font-size: var(--fs-lg); }
.acordeon > summary + * { margin-top: 16px; }
.colector summary { padding: 4px 0; }
.colector-titulo { font-size: var(--fs-lg); font-weight: 600; }
.colector-sub { color: var(--gris); font-size: var(--fs-sm); margin-left: auto; }
details:not(.acordeon) { margin: 12px 0; border-top: 1px solid var(--borde-2); padding-top: 12px; }
details:not(.acordeon) > summary { cursor: pointer; color: var(--acento); font-size: var(--fs-base); font-weight: 500; }

/* ---------- Formularios ---------- */
.fila { display: flex; gap: 18px; flex-wrap: wrap; }
label { display: block; margin: 12px 0; font-size: var(--fs-md); color: var(--tinta-2); font-weight: 500; }
label.check { display: inline-flex; align-items: center; gap: 8px; }
input, select {
  display: block; margin-top: 6px; padding: 9px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-sm); font: inherit; width: 100%; max-width: 400px;
  background: #fff; color: var(--tinta); transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3.5px var(--acento-suave); }
label.check input { display: inline; width: auto; margin: 0; accent-color: var(--acento); }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio-sm); margin: 16px 0; padding: 12px 18px 18px; }
legend { color: var(--gris); font-size: var(--fs-sm); padding: 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Botones ---------- */
button {
  font: inherit; font-weight: 600; font-size: var(--fs-md); padding: 9px 17px;
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
  border-radius: var(--radio-sm); cursor: pointer; margin-top: 10px;
  box-shadow: none; transition: background .14s, box-shadow .14s, transform .06s;
}
/* El hover violeta es SOLO para los botones primarios (sólidos, texto blanco).
   Los secundarios/chips tienen fondo claro y texto oscuro: si les cae el fondo
   violeta quedan ilegibles, así que se excluyen y usan su propio :hover. */
button:not(.boton-sec):not(.btn-sec):not(.chip-toggle):not(.chip-pais):not(.peligro):not(.link-accion):hover {
  background: var(--acento-2); box-shadow: none;
}
button:active { transform: translateY(1px); }
button.peligro { background: #fff; color: var(--error); border-color: var(--error-borde); box-shadow: none; }
button.peligro:hover { background: var(--error-bg); }
form.inline { display: inline; margin: 0; }
form.inline button { margin: 0; }
.acciones-cabecera { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; flex-wrap: wrap; }
.boton-sec, .btn-sec {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--borde);
  border-radius: var(--radio-sm); background: #fff; color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: var(--fs-md);
  cursor: pointer; white-space: nowrap; transition: border-color .14s, color .14s, box-shadow .14s;
}
.boton-sec:hover, .btn-sec:hover { border-color: var(--tinta-2); color: var(--tinta); box-shadow: none; }
.botonera { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde-2); }
.botonera button { margin: 0; }
.botonera form.inline { margin: 0; line-height: 0; }
.link-accion { font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.link-accion:hover { text-decoration: underline; }

/* ---------- Badges / pills ---------- */
.badge, .estado {
  display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; padding: 3.5px 10px;
  border-radius: 3px; background: var(--gris-bg); color: var(--gris); white-space: nowrap; line-height: 1.4;
}
.badge-ok { background: var(--ok-bg2); color: var(--ok); }
.badge-falta { background: var(--falta-bg); color: var(--falta); }
.badge-fuente { background: var(--acento-suave); color: var(--acento); }
.badge-neutral { background: var(--gris-bg); color: var(--gris); }
/* País: AR celeste, UY otro tono, para distinguir de un vistazo */
.badge-pais { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.badge-pais-ar { background: var(--celeste-bg); color: var(--celeste); }
.badge-pais-uy { background: var(--violeta-bg); color: var(--violeta); }
/* Circuito de carga: uno solo neutro. Tienen color los DOS que cambian lo que
   hay que hacer: anticipo (queda una vinculación a mano) y energía (circuito
   propio). Los demás no se distinguen por color porque no se actúa distinto. */
.badge-circ, .badge-circ-servicio, .badge-circ-insumos,
.badge-circ-tasas, .badge-circ-intermediario { background: var(--gris-bg); color: var(--tinta-2); }
.badge-circ-anticipo { background: var(--falta-bg); color: var(--falta); }
.badge-circ-energia { background: var(--acento-suave); color: var(--acento-2); }
/* Carga a Finnegans en modo simulación (se armó todo pero no se envió) */
.badge-sim { background: var(--acento-suave); color: var(--acento-2); }
/* Resuelta fuera del sistema: distinta del verde "cargada" (fue a mano/otra vía). */
.badge-resuelta { background: var(--violeta-bg); color: var(--violeta); }
.estado { text-transform: capitalize; }
.estado-completada, .estado-res-ok { background: var(--ok-bg2); color: var(--ok); }
.estado-en_curso { background: var(--acento-suave); color: var(--acento); }
.estado-error, .estado-res-error { background: var(--error-bg); color: var(--error); }
.estado-cancelada { background: var(--gris-bg); color: var(--gris); }
.estado-res-salteado, .estado-res-intervencion_humana { background: var(--falta-bg); color: var(--falta); }
a .estado { cursor: pointer; }
.conf-pill { display: inline-block; min-width: 46px; text-align: center; padding: 3px 9px; border-radius: 3px; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.conf-ok { background: var(--ok-bg2); color: var(--ok); }
.conf-warn { background: var(--falta-bg); color: var(--falta); }
.conf-bad { background: var(--error-bg); color: var(--error); }

/* ---------- Aviso ---------- */
.aviso {
  background: var(--acento-suave); border: 1px solid var(--acento-borde); color: var(--acento-2);
  padding: 13px 16px; border-radius: var(--radio); margin-bottom: 20px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.aviso-nota { color: var(--acento); }
.aviso-ok { background: var(--ok-bg2); border-color: var(--ok); color: var(--ok); }
.aviso-error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.aviso-demora { display: block; background: var(--falta-bg); border-color: var(--falta-borde); color: var(--tinta-2); }
.av-dem-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.av-dem-cab p { margin: 0; }
.av-dem-cab strong { color: var(--falta); }
.av-dem-cab .btn-mini { flex-shrink: 0; }
.av-dem-lista { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-md); }
.av-dem-lista li { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.av-dem-lista .num { color: var(--tinta-2); }
.av-dem-falta { color: var(--falta); font-size: var(--fs-sm); }
@media (max-width: 700px) { .av-dem-cab { flex-direction: column; } }
.spinner { width: 14px; height: 14px; border: 2px solid #c3cbf5; border-top-color: var(--acento); border-radius: 50%; display: inline-block; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
/* Spinner embebido en un botón mientras se procesa el submit (reusa @keyframes girar).
   Usa currentColor para contrastar en cualquier botón (primario blanco / secundario). */
.spinner-btn { width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: -2px; animation: girar .6s linear infinite; }
button.cargando { cursor: progress; }
form[data-enviando] .boton-sec, form[data-enviando] .link-accion { pointer-events: none; opacity: .45; }

/* ---------- Detalle de corrida ---------- */
.resumen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.resumen-grid .etq { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); margin-bottom: 4px; font-weight: 600; }
.log-corrida {
  background: #0b1120; color: #d7deea; border-radius: var(--radio); padding: 16px 18px; margin: 0 0 16px;
  max-height: 440px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  border: 1px solid rgba(255,255,255,.06);
}

/* ---------- Página de error / vacío ---------- */
.estado-vacio { text-align: center; padding: 44px 22px; }
.estado-vacio h1 { justify-content: center; }

/* ---------- Documentos (grid de cards) ---------- */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.doc-card { margin: 0; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .16s, transform .16s; }
.doc-card:hover { box-shadow: var(--sombra-lg); transform: translateY(-2px); }
.doc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doc-meta { color: var(--gris); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.doc-ctx { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.doc-ctx > div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: baseline; }
.doc-ctx dt { color: var(--gris); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; margin: 0; font-weight: 600; }
.doc-ctx dd { margin: 0; font-size: var(--fs-base); word-break: break-word; }
.doc-card .link-accion { margin-top: auto; }
.doc-acciones { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.doc-acciones .link-accion { margin-top: 0; }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.filtros label { margin: 0; }

/* ---------- Facturas: revisión, edición, planilla ---------- */
.card-revision { border-color: var(--falta-borde); margin-bottom: 26px; }
.revision-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 18px 6px; background: var(--falta-bg); }
.revision-cab h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.fila-revision td { background: var(--falta-bg); }
.acciones-fila { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.acciones-fila button { margin: 0; padding: 6px 13px; font-size: var(--fs-md); }
/* Marca de campos en el editor de factura: `req` = lo usa la carga a Finnegans,
   `falta` = además está vacío y hay que completarlo antes de poder cargarla. */
.badge-req { background: var(--acento-suave); color: var(--acento); }
.badge-req-falta { background: var(--error-bg); color: var(--error); }
.campo--falta { color: var(--error); }
.campo--falta > input { border-color: var(--error-borde); background: var(--error-bg); }
.campo--falta > input:focus { border-color: var(--error); }

/* El PDF acompaña el alto del formulario: `stretch` en vez de `start`. Antes el
   visor se cortaba arriba y quedaba media pantalla en blanco al lado de los
   campos, justo cuando se está cotejando un dato contra el PDF. */
.editor-factura { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: 20px; align-items: stretch; }
.editor-factura form { margin: 0; }
.editor-factura button.boton-sec { background: #fff; color: var(--tinta-2); }
/* El visor se pega arriba y ocupa lo que le dé la columna: si el formulario es
   largo, el PDF llega hasta abajo; si el PDF es más corto, termina donde termina
   su contenido y no se estira de gusto. */
.visor-pdf { padding: 0; overflow: hidden; position: sticky; top: 72px;
             display: flex; flex-direction: column; align-self: stretch;
             max-height: calc(100vh - 88px); }
@media (max-width: 980px) { .editor-factura { grid-template-columns: 1fr; } }
.visor-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--borde-2); }
.visor-barra .ayuda { margin: 0; }
/* Sin `max-height` fija: el visor crece con su columna y el scroll queda acá
   adentro. `min-height: 0` es lo que permite que un hijo de flex scrollee. */
#visor-paginas { flex: 1; min-height: 320px; overflow-y: auto; background: var(--gris-bg); }
#visor-paginas canvas { display: block; margin: 0 auto 10px; box-shadow: 0 1px 6px rgba(0,0,0,.15); }

/* ---------- Vista de cliente: shell con header arriba ---------- */
body.app-cliente { display: block; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px;
  padding: 0 28px; height: 56px; background: var(--panel); border-bottom: 1px solid var(--borde);
}
.tb-left { display: flex; align-items: center; flex-shrink: 0; }
.tb-marca { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.02em; }
/* Logo del cliente (reemplaza el nombre cuando hay SVG cargado). */
.tb-logo-img { height: 30px; width: auto; max-width: 140px; display: block; }
.topnav { display: flex; align-items: stretch; gap: 2px; height: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav a {
  display: flex; align-items: center; padding: 0 12px; font-size: var(--fs-md); font-weight: 500; color: var(--gris);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.topnav a:hover { color: var(--tinta); }
.topnav a.activo { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento); }
.tb-right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }
.tb-paises { display: inline-flex; gap: 2px; padding: 2px; background: var(--gris-bg); border-radius: var(--radio-sm); }
.tb-pais { padding: 4px 10px; border-radius: 3px; font-size: var(--fs-sm); font-weight: 600; color: var(--gris); text-decoration: none; }
.tb-pais:hover { color: var(--tinta-2); }
.tb-pais.activo { background: var(--panel); color: var(--tinta); box-shadow: 0 0 0 1px var(--borde); }
.tb-pais-solo { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em; color: var(--tinta-2); background: var(--gris-bg); padding: 4px 10px; border-radius: 3px; }
.tb-user { color: var(--gris); font-size: var(--fs-md); }
/* Aviso de facturas demoradas (esperan cert/OC hace más de una semana). */
.tb-aviso { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radio-sm);
  background: var(--falta-bg); border: 1px solid var(--falta-borde); color: var(--falta);
  font-size: var(--fs-md); font-weight: 600; text-decoration: none; }
.tb-aviso:hover { border-color: var(--falta); }
.tb-logout { margin: 0; padding: 6px 12px; font-size: var(--fs-md); font-weight: 500; background: transparent; color: var(--tinta-2); border: 1px solid var(--borde); }
.tb-logout:hover { border-color: var(--gris-2); background: var(--gris-bg); }
/* Pendientes de Decisiones, al lado del link. */
.nav-badge {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; text-align: center;
  color: #fff; background: var(--error); border-radius: 3px;
}
/* Con un país elegido: rojo = las de ese país; gris al lado = el total de todos. */
.nav-badge-total {
  display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; text-align: center;
  color: var(--tinta-2); background: var(--gris-bg); border-radius: 3px; white-space: nowrap;
}
@media (max-width: 900px) { .tb-user { display: none; } .topbar { gap: 14px; padding: 0 14px; } }
.content-cliente { max-width: 1400px; margin: 0 auto; padding: 30px 28px 60px; }
/* "Marcar como resuelta" en las tarjetas de Decisiones: plegado y discreto. */
.resuelta-box { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 8px; }
.resuelta-box > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--gris); list-style: none; }
.resuelta-box > summary:hover { color: var(--tinta-2); }
.resuelta-box[open] > summary { color: var(--tinta-2); font-weight: 600; margin-bottom: 6px; }
.form-resuelta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.form-resuelta .ayuda { flex-basis: 100%; margin: 0 0 4px; }
.campo-inline { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--gris); gap: 3px; }
.campo-inline input { padding: 6px 8px; font-size: var(--fs-md); border: 1px solid var(--borde); border-radius: var(--radio-sm); min-width: 180px; }

/* Tabs de configuración */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 24px; }
.tabs .tab {
  padding: 10px 16px; font-size: var(--fs-base); font-weight: 600; color: var(--gris); text-decoration: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.tabs .tab:hover { color: var(--tinta-2); }
.tabs .tab.activo { color: var(--acento); border-bottom-color: var(--acento); }

/* Webhook: filas clave/valor */
.kv { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde-2); flex-wrap: wrap; }
.kv:last-of-type { border-bottom: none; }
.kv-l { min-width: 90px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); font-weight: 600; }
.kv-v { font-size: var(--fs-md); word-break: break-all; background: var(--gris-bg); padding: 4px 10px; border-radius: var(--radio-sm); }
.grid-vacio { color: var(--gris); font-size: var(--fs-base); }

/* Filtro de fechas en la toolbar */
.gt-fechas { display: flex; align-items: flex-end; gap: 10px; margin: 0; flex-wrap: wrap; }
.gt-fechas label { margin: 0; font-size: var(--fs-sm); color: var(--gris); font-weight: 600; }
.gt-fechas input[type="date"] { margin: 0; padding: 8px 10px; font-size: var(--fs-md); width: auto; }
.gt-fechas .btn-sec { padding: 8px 14px; }

/* ---------- Toolbar de la planilla (AG Grid) ---------- */
/* Una sola línea de base para toda la toolbar: los chips, los desplegables y
   los botones miden distinto por dentro, así que sin esto quedaban a alturas
   distintas. `align-items: center` + alto fijo los alinea de verdad. */
.grid-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.grid-toolbar select { width: auto; height: 38px; margin: 0; padding: 0 12px; }
.card.dc[hidden] { display: none; }
/* `:not([hidden])` NO es un detalle: sin eso, este `display: inline-flex` pisa
   al `display:none` del atributo y el chip oculto seguía ocupando 30 px — el
   hueco en blanco que quedaba entre dos botones. */
.grid-toolbar .btn-sec:not([hidden]),
.grid-toolbar .chip-toggle:not([hidden]) {
  /* `margin: 0` incluido: el `button` base trae `margin-top: 10px`, que en una
     fila con `align-items: center` bajaba esos botones 5 px respecto del resto. */
  height: 38px; margin: 0; display: inline-flex; align-items: center;
}
/* El desplegable es un <details>, y le pegaba la regla genérica
   `details:not(.acordeon)` —margen de 12 px arriba y abajo más un borde
   superior—, que por especificidad (0,1,1) le ganaba a `.gt-multi` (0,1,0).
   Resultado: 51 px de alto contra los 38 de los botones de al lado. */
.grid-toolbar .gt-multi { margin: 0; padding: 0; border: 0; }
.grid-toolbar .gt-multi > summary { height: 38px; padding: 0 14px; }
.gt-search { position: relative; flex: 1; min-width: 220px; max-width: 400px; display: flex; align-items: center; }
.gt-search svg { position: absolute; left: 13px; color: var(--gris-2); pointer-events: none; }
.gt-search input {
  /* 38 px, el mismo alto que los chips y los botones de la toolbar: con 45 el
     buscador quedaba 5 px más abajo que todo lo demás. */
  width: 100%; height: 38px; margin: 0; padding: 0 12px 0 38px; border: 1px solid var(--borde);
  border-radius: var(--radio-sm); font-size: var(--fs-base); background: var(--panel); color: var(--tinta);
  max-width: none; box-shadow: var(--sombra);
}
.gt-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.gt-count { color: var(--gris); font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-toggle {
  border: 1px solid var(--borde); background: var(--panel); color: var(--tinta-2); margin: 0;
  padding: 9px 14px; border-radius: var(--radio-sm); font-size: var(--fs-md); cursor: pointer; font-weight: 600; box-shadow: var(--sombra); white-space: nowrap;
}
.chip-toggle:hover { border-color: var(--gris-2); }
.chip-toggle.activo { background: var(--falta-bg); border-color: var(--falta-borde); color: var(--falta); }
/* Chips de filtro por país (segmentado): comparten grupo, el activo resalta */
.gt-paises { display: inline-flex; gap: 4px; padding: 3px; background: var(--gris-bg); border-radius: var(--radio-sm); }
.chip-pais {
  border: 1px solid transparent; background: transparent; color: var(--gris); margin: 0;
  padding: 6px 12px; border-radius: var(--radio-sm); font-size: var(--fs-md); cursor: pointer; font-weight: 600; box-shadow: none;
}
.chip-pais:hover { color: var(--tinta-2); background: rgba(0,0,0,.03); }
.chip-pais.activo { background: var(--panel); border-color: var(--borde); color: var(--acento); box-shadow: var(--sombra); }
/* Id fiscal: valor + tag chico con el tipo (CUIT/RUT) según el país de la fila */
.idf-val { font-variant-numeric: tabular-nums; }
.idf-tag {
  margin-left: 7px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gris-2); background: var(--gris-bg); padding: 1.5px 5px; border-radius: var(--radio-sm); vertical-align: middle;
}
.cell-acc { display: flex; gap: 12px; align-items: center; height: 100%; white-space: nowrap; }
/* Acción inline dentro de una celda del grid (ej. Cargar a Finnegans) */
.cell-form { display: inline-flex; align-items: center; height: 100%; margin: 0; }
.btn-mini { margin: 0; padding: 5px 12px; font-size: var(--fs-sm); border-radius: var(--radio-sm); box-shadow: none; }
.ico-link { color: var(--acento); text-decoration: none; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.ico-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--radio-sm); color: var(--gris); text-decoration: none; transition: background .12s, color .12s;
}
.ico-btn:hover { background: var(--acento-suave); color: var(--acento); }
.ico-link:hover { text-decoration: underline; }
.grid-planilla { height: calc(100vh - 210px); min-height: 560px; width: 100%; }
/* El tuneo del tema AG Grid vive inline en cada página (después del CSS del tema). */


/* ===== Decisiones: tarjeta compacta (.dc) ===== */
.dc { padding: 18px 22px 14px; }
.dc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dc-title h3 { margin: 0; font-size: var(--fs-lg); letter-spacing: -.01em; }
.dc-importe { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.dc-importe small { font-size: .7em; font-weight: 600; color: var(--gris); margin-left: 2px; }
.dc-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 4px; padding: 10px 0; border-top: 1px solid var(--borde-2); border-bottom: 1px solid var(--borde-2); }
.dc-meta > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dc-meta small { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gris-2); font-weight: 600; }
.dc-meta strong { font-size: var(--fs-base); font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.dc-meta strong .badge { vertical-align: 1px; }
.dc-alerta { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--radio-sm); background: var(--gris-bg); border: 1px solid var(--borde); font-size: var(--fs-md); line-height: 1.5; color: var(--tinta-2); }
.dc-alerta--error { background: var(--error-bg); border-color: var(--error-borde); }
.dc-alerta strong { color: var(--tinta); }
.dc-alerta .dc-inline-form { display: inline; margin: 0 0 0 8px; }
.dc-alerta .dc-inline-form button { margin: 0; padding: 4px 10px; font-size: var(--fs-sm); }
details.dc-mas { display: inline; margin: 0; border: 0; padding: 0; }
details.dc-mas > summary { display: inline; cursor: pointer; color: var(--acento); font-size: var(--fs-md); font-weight: 500; list-style: none; }
details.dc-mas > summary::-webkit-details-marker { display: none; }
details.dc-mas > summary::after { content: " ▾"; font-size: .75em; }
details.dc-mas[open] > summary { display: block; margin-bottom: 4px; }
.dc-nota { margin: 10px 0 0; font-size: var(--fs-md); color: var(--gris); line-height: 1.5; }
.dc-cands { margin: 12px 0 0; padding: 12px 14px 10px; border: 1px solid var(--acento-borde); background: var(--panel); border-radius: var(--radio-sm); }
.dc-cands-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.dc-cands-head strong { font-size: var(--fs-base); color: var(--acento-2); }
.dc-cands-head small { font-size: var(--fs-sm); color: var(--gris); }
.dc-cands-total { color: var(--tinta); font-variant-numeric: tabular-nums; }
.dc-tabla { width: 100%; border-collapse: collapse; background: transparent; }
.dc-tabla th, .dc-tabla td { padding: 6px 10px; font-size: var(--fs-md); border-bottom: 1px solid var(--borde-2); vertical-align: middle; text-align: left; }
.dc-tabla th { background: transparent; font-size: var(--fs-xs); letter-spacing: .05em; padding-top: 2px; }
.dc-tabla tbody tr:last-child td { border-bottom: 0; }
.dc-tabla tbody tr:hover td { background: var(--acento-suave); }
.dc-tabla td.chk { width: 34px; padding-right: 0; }
.dc-tabla input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); display: block; }
.dc-tabla label { display: inline; margin: 0; font-weight: 600; color: var(--tinta); cursor: pointer; font-size: var(--fs-md); }
.dc-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-tabla .nowrap { white-space: nowrap; }
.dc-sitios { color: var(--acento); font-weight: 600; }
.dc-tabla .dc-desc { color: var(--gris); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-cands-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.dc-cands-foot button { margin: 0; }
.dc-cands-foot small { color: var(--gris); font-size: var(--fs-sm); }
.dc-campos { margin-top: 12px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--borde); border-left: 3px solid var(--falta); border-radius: var(--radio-sm); }
.dc-campos-titulo { margin: 0 0 2px; font-size: var(--fs-md); font-weight: 600; color: var(--tinta); }
.dc-campo { margin: 8px 0; }
.dc-campo input { margin-top: 4px; }
/* La ayuda de cada campo aparece al hacer foco: con todas a la vista, cada tarjeta era un párrafo. */
.dc-campo .ayuda { display: none; margin: 4px 0 0; font-size: var(--fs-sm); }
.dc-campo:focus-within .ayuda { display: block; }
details.dc-opcionales { margin: 8px 0 0; border-top: 0; padding-top: 4px; }
details.dc-opcionales > summary { font-size: var(--fs-md); }
.dc-campos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.dc-botonera { margin-top: 14px; padding-top: 12px; }
.dc-links { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.dc-resuelta { margin-top: 10px; padding-top: 8px; }
.dc-resuelta > summary { color: var(--gris); font-size: var(--fs-sm); }
@media (max-width: 720px) { .dc-tabla .dc-desc { display: none; } .dc-tabla th:last-child { display: none; } }


/* ===== Filtro multi-selección de la toolbar (fuente) ===== */
/* `details.gt-multi` y no `.gt-multi`: con la clase sola perdía contra
   `details:not(.acordeon)`, que le metía margen y borde superior. */
details.gt-multi { position: relative; margin: 0; border: 0; padding: 0; }
.gt-multi > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 14px; border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--panel); color: var(--tinta-2); font-size: var(--fs-md); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.gt-multi > summary::-webkit-details-marker { display: none; }
.gt-multi > summary::after { content: "▾"; color: var(--gris-2); font-size: .75em; }
.gt-multi > summary:hover { border-color: var(--gris-2); }
.gt-multi.activo > summary { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.gt-multi-panel {
  position: absolute; z-index: 30; right: 0; margin-top: 6px; min-width: 260px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-sm);
  box-shadow: var(--sombra-lg); padding: 8px;
}
.gt-multi-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; border-bottom: 1px solid var(--borde-2); margin-bottom: 4px; }
.gt-multi-head strong { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.gt-multi-clear { margin: 0; padding: 2px 8px; font-size: var(--fs-sm); background: transparent; border: 0; color: var(--acento); cursor: pointer; font-weight: 600; box-shadow: none; }
.gt-multi-clear:hover { text-decoration: underline; }
.gt-multi-op { display: flex; align-items: center; gap: 9px; margin: 0; padding: 7px 8px; border-radius: var(--radio-sm); cursor: pointer; font-size: var(--fs-md); font-weight: 500; color: var(--tinta); }
.gt-multi-op:hover { background: var(--acento-suave); }
.gt-multi-op input { width: 15px; height: 15px; margin: 0; accent-color: var(--acento); flex: none; }
.gt-multi-op span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-multi-op em { font-style: normal; color: var(--gris-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* "Eliminar del panel" va en la misma botonera que el resto, con el estilo
   `peligro` que el panel ya usa para borrar. Queda a la derecha del todo y, si
   la fila se parte en dos renglones, sigue a la derecha en el suyo. */
.dc-eliminar { display: inline-flex; align-items: center; gap: 18px; margin: 0 0 0 auto; }
.dc-botonera .dc-links { margin-left: 22px; margin-right: auto; }

/* ---------- Login ----------
   Antes esta pantalla traía su propio CSS embebido, con colores y radios a mano
   que no eran los del panel (otro rojo de error, otro radio, otra tipografía).
   Ahora usa las mismas piezas que el resto: .card, .aviso, label, button. */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-wrap { width: 100%; max-width: 360px; }
.login-card { margin: 0; padding: 30px 28px 28px; box-shadow: var(--sombra-lg); }
.login-marca { text-align: center; margin-bottom: 22px; }
.login-logo { height: 54px; width: auto; max-width: 220px; margin: 0 auto; display: block; }
.login-marca .tb-logo { margin: 0 auto; }
.login-sub { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--gris); font-weight: 500; }
.login-card label { margin: 14px 0 0; }
.login-card input { max-width: none; }
.login-error { margin-bottom: 0; margin-top: 16px; font-size: var(--fs-md); justify-content: center; }
.login-enviar { width: 100%; margin-top: 22px; padding: 11px; }

/* ---------- Pantallas chicas: shell de cliente ----------
   El único @media que existía era el del shell de ADMIN (sidebar). La vista de
   cliente (topbar + topnav) no tenía ninguna, así que en un teléfono el nav se
   desbordaba en silencio. Con siete secciones ya no da para ignorarlo: el nav
   scrollea en horizontal en vez de romperse, y el header se apila. */
.topnav { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { white-space: nowrap; }
@media (max-width: 760px) {
  .topbar { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 10px; }
  .tb-left { gap: 10px; flex-wrap: wrap; }
  .tb-user { display: none; }               /* el nombre no aporta y come el ancho */
  .topnav { position: static; padding: 0 10px; }
  .topnav a { padding: 12px 11px; font-size: var(--fs-md); }
  .content-cliente { padding: 20px 14px 48px; }
  .tiles, .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  /* Las tablas anchas scrollean adentro de su tarjeta, no arrastran la página. */
  .card--tabla { overflow-x: auto; }
  .botonera { gap: 8px; }
  .dc-eliminar { margin-left: 0; }
}

/* ---------- Inicio: colas y distribución ---------- */
.ini-colas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.ini-cola {
  margin: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit;
  border-left: 3px solid var(--borde); transition: box-shadow .16s, transform .16s, border-color .16s;
}
.ini-cola:hover { box-shadow: none; transform: none; border-color: var(--gris-2); }
.ini-cola-n { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ini-cola-t { font-weight: 600; font-size: var(--fs-md); margin-top: 4px; }
.ini-cola-s { color: var(--gris); font-size: var(--fs-sm); }
.ini-cola--ok { border-left-color: var(--ok); }
.ini-cola--ok .ini-cola-n { color: var(--ok); }
.ini-cola--espera { border-left-color: var(--falta); }
.ini-cola--espera .ini-cola-n { color: var(--falta); }
.ini-cola--error { border-left-color: var(--error); }
.ini-cola--error .ini-cola-n { color: var(--error); }
.ini-limpio { text-align: center; padding: 34px 22px; }
.ini-limpio-n { margin: 0 0 6px; font-size: var(--fs-xl); font-weight: 700; color: var(--ok); letter-spacing: -.02em; }

/* Una barra con TODAS las facturas repartidas por estado: de un vistazo se ve
   cuánto está cargado y cuánto espera, sin leer números. */
.ini-barra-card { padding: 18px 22px 14px; }
.ini-barra { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--gris-bg); gap: 2px; }
.ini-tramo { display: block; min-width: 5px; }
.ini-tramo--cargada { background: var(--ok); }
.ini-tramo--lista { background: #34d399; }
.ini-tramo--falta_algo { background: var(--falta); }
.ini-tramo--esperando { background: #f59e0b; }
.ini-tramo--error { background: var(--error); }
.ini-tramo--simulada { background: var(--acento); }
.ini-tramo--resuelta { background: var(--violeta); }
.ini-tramo--sin_circuito { background: var(--gris-2); }
.ini-leyenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ini-leyenda li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); color: var(--tinta-2); }
.ini-leyenda strong { font-variant-numeric: tabular-nums; }
.ini-punto { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* Copia de una factura que ya entró por otra casilla: se ve como lo que es,
   una fila colgada de la original, no una factura más. */
.fila-copia { display: inline-flex; align-items: center; gap: 7px; color: var(--gris); }
.fila-copia .comp-link { color: var(--gris); }

/* Filtros que casi no se usan (fechas): plegados debajo de la toolbar, para que
   arriba queden solo los tres que importan — país, casilla y tipo de factura. */
.gt-avanzado { margin: 0 0 14px; border: 0; padding: 0; }
.gt-avanzado > summary { font-size: var(--fs-md); color: var(--gris); cursor: pointer; }
.gt-avanzado > summary:hover { color: var(--acento); }
.gt-avanzado[open] > summary { margin-bottom: 10px; }

/* Estado + motivo en la ficha de la factura: lo mismo que muestran la planilla y
   Decisiones. Estaba en todos lados menos acá, que es donde se viene a arreglar. */
/* El badge arriba y el motivo al lado, pero el motivo puede ser largo: se lee
   entero, en varias líneas si hace falta. `align-items: flex-start` para que el
   badge no quede centrado contra un párrafo de tres renglones. */
.ficha-estado { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.ficha-estado .badge { flex: none; margin-top: 1px; }
.ficha-motivo { color: var(--tinta-2); font-size: var(--fs-md); flex: 1; min-width: 240px; line-height: 1.5; }

/* ---------- Editar factura (una sola pantalla, orden de Finnegans) ---------- */
/* El resumen queda fijo debajo del menú mientras se baja por el formulario. */
.ed-resumen { position: sticky; top: 64px; z-index: 15; margin-bottom: 14px; }
.ed-form h3 { font-size: var(--fs-base); margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--borde-2); }
.ed-form h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ed-otros { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--borde-2); }
.ed-otros summary { cursor: pointer; font-weight: 600; font-size: var(--fs-md); color: var(--tinta-2); }
.ed-otros[open] summary { margin-bottom: 10px; }
.ed-json { white-space: pre-wrap; font-size: var(--fs-xs); max-height: 420px; overflow: auto; }
.ed-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde-2); }
.ed-acciones button { margin: 0; }

/* Botón con aspecto de link (Marcar como resuelta): sin el fondo del botón primario. */
button.link-accion { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; color: var(--acento); cursor: pointer; }
button.link-accion:hover { text-decoration: underline; }
/* Con el resumen fijo arriba, el visor del PDF se pega debajo de él y no por detrás. */
.ed-resumen ~ .editor-factura .visor-pdf { top: 262px; max-height: calc(100vh - 278px); }
.ed-sub { font-size: var(--fs-md); font-weight: 600; margin: 16px 0 6px; color: var(--tinta-2); }
/* Editar factura: formulario y PDF mitad y mitad; los campos de una fila se reparten el ancho. */
.editor-factura { grid-template-columns: minmax(360px, 1fr) minmax(380px, 1fr); }
.ed-form .fila > label.campo { flex: 1 1 140px; min-width: 0; }
.ed-form .fila > label.campo input, .ed-form .fila > label.campo select { max-width: none; }

/* Editar factura: los avisos, separados entre sí y del formulario. */
.ed-avisos { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.ed-avisos:empty { display: none; }
.ed-avisos > .dc-alerta, .ed-avisos > .aviso, .ed-avisos > .dc-nota, .ed-avisos > .dc-cands { margin: 0; }