/* FacturaLista — estilos.css
 * Tokens del ESTANDAR-UI-UX de la casa, matiz propio: verde billete + ambar sobre noche verde.
 * Vidrio de 3 capas, auroras, numerales tabulares, curva de movimiento propia.
 */

:root{
  --bg0:#06110c; --bg1:#0a1a13;
  --ink:#eaf6ef; --muted:#9db3a7; --faint:#7d948a; /* faint >= 4.5:1 sobre bg0 (hallazgo critico E9) */
  /* PALETA DE MARCA (FacturaLista): esmeralda + ambar — jamas azules por defecto */
  --verde:#2fbf8f; --verde-2:#6fe3b8; --ambar:#f2c14e; --ambar-2:#ffd98a;
  --danger:#fb7185; --vio:#a78bfa;
  --glass:rgba(10,26,19,.58); --glass-3:rgba(255,255,255,.045);
  --line:rgba(147,168,156,.16); --line-soft:rgba(147,168,156,.09);
  --r-xl:24px; --r-lg:18px; --r-md:13px; --r-sm:9px;
  --blur:saturate(1.5) blur(16px);
  --shadow-1:0 18px 50px rgba(2,10,6,.5); --shadow-2:0 6px 18px rgba(2,10,6,.35);
  --glow:0 0 0 1px rgba(47,191,143,.28), 0 10px 30px rgba(47,191,143,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0}
html{scrollbar-color:rgba(147,168,156,.35) transparent}
body{
  background:var(--bg0); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.sin-scroll{overflow:hidden}

/* Scrollbar fino y translucido */
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-thumb{background:rgba(147,168,156,.28); border-radius:99px; border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:rgba(147,168,156,.45)}
::-webkit-scrollbar-track{background:transparent}

/* ── Aurora de fondo (jamais color plano) ─────────────────────────── */
.bg-aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; background:
  radial-gradient(1200px 800px at 85% -10%, rgba(47,191,143,.07), transparent 60%),
  radial-gradient(1000px 700px at -10% 110%, rgba(242,193,78,.05), transparent 55%),
  linear-gradient(180deg, var(--bg0), var(--bg1) 60%, var(--bg0));}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:deriva 26s var(--ease) infinite alternate}
.b1{width:44vw; height:44vw; left:-12vw; top:-14vw; background:rgba(47,191,143,.16)}
.b2{width:36vw; height:36vw; right:-10vw; top:24vh; background:rgba(242,193,78,.10); animation-delay:-9s}
.b3{width:40vw; height:40vw; left:22vw; bottom:-18vw; background:rgba(111,227,184,.10); animation-delay:-17s}
@keyframes deriva{from{transform:translate(0,0) scale(1)} to{transform:translate(6vw,4vh) scale(1.12)}}

/* ── Vidrio de la casa: 3 capas ───────────────────────────────────── */
.panel, .cabecera, .modal, .barra-filtros, .zona-carga, .tarjeta-total, .toast, .plantilla-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── Cabecera sticky de vidrio ────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:12px clamp(16px,4vw,42px);
  border-left:none; border-right:none; border-top:none; border-radius:0;
}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logo{width:38px; height:38px; filter:drop-shadow(0 4px 14px rgba(47,191,143,.35))}
.marca-nombre{font-size:1.22rem; font-weight:800; letter-spacing:-.02em}
.marca-acento{background:linear-gradient(90deg,var(--verde-2),var(--ambar)); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav{display:flex; gap:4px; margin-left:8px; margin-inline:auto}
.nav-enlace{
  color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem;
  padding:9px 15px; border-radius:var(--r-sm); transition:all .18s var(--ease);
}
.nav-enlace:hover, .nav-enlace.activo{color:var(--ink); background:var(--glass-3); box-shadow:var(--glow)}
.cabecera-acciones{display:flex; gap:6px}

/* ── Botones ───────────────────────────────────────────────────────── */
.btn{
  border:none; cursor:pointer; font:inherit; font-weight:700; color:var(--ink);
  padding:11px 20px; border-radius:var(--r-md); transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primario{background:linear-gradient(135deg,var(--verde),#1e9d74); box-shadow:var(--glow)}
.btn-primario:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(47,191,143,.5), 0 14px 34px rgba(47,191,143,.22)}
.btn-secundario{background:linear-gradient(135deg,rgba(242,193,78,.16),rgba(242,193,78,.07)); border:1px solid rgba(242,193,78,.35); color:var(--ambar-2)}
.btn-secundario:hover{transform:translateY(-2px)}
.btn-fantasma{background:var(--glass-3); border:1px solid var(--line); color:var(--muted)}
.btn-fantasma:hover{color:var(--ink); transform:translateY(-2px); border-color:var(--line)}
.btn-peligro{background:linear-gradient(135deg,rgba(251,113,133,.2),rgba(251,113,133,.09)); border:1px solid rgba(251,113,133,.4); color:var(--danger)}
.btn-peligro:hover{transform:translateY(-2px)}
.btn-grande{padding:15px 30px; font-size:1.06rem}
.btn-icono{
  background:var(--glass-3); border:1px solid var(--line-soft); color:var(--muted); cursor:pointer;
  width:40px; height:40px; border-radius:var(--r-sm); font-size:1.05rem; line-height:1;
  transition:all .18s var(--ease);
}
.btn-icono:hover{color:var(--ink); transform:translateY(-2px); border-color:var(--line)}

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

/* Estado activo en TODO lo clicable + checkbox tocable (>= 40px efectivos) */
.nav-enlace:active, .plantilla-card:active, .btn-icono:active, .fila-mini:active{transform:translateY(0) scale(.97)}
input[type="checkbox"]{width:22px; height:22px; accent-color:var(--verde); cursor:pointer}
.fila-comp > input[type="checkbox"]{margin-right:6px}

/* ── Layout ────────────────────────────────────────────────────────── */
main{max-width:1180px; margin:0 auto; padding:26px clamp(16px,4vw,42px) 90px}
.vista{animation:entra .3s var(--ease)}
@keyframes entra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{display:grid; grid-template-columns:1.25fr .9fr; gap:28px; align-items:center; margin-bottom:26px}
.hero-texto h1{font-size:clamp(1.9rem,4.4vw,3.1rem); letter-spacing:-.03em; line-height:1.08; font-weight:800}
.grad-texto{background:linear-gradient(90deg,var(--verde-2),var(--ambar)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-bajada{color:var(--muted); margin-top:14px; max-width:52ch; font-size:1.04rem}
.hero-privacidad{display:flex; align-items:center; gap:8px; margin-top:14px; color:var(--verde-2); font-size:.92rem; font-weight:600}
.ico-candado{width:17px; height:17px}
.hero-escena{width:100%; max-width:340px; justify-self:center; overflow:visible}
.flota-factura{animation:flotar 7s var(--ease) infinite alternate}
.flota-excel{animation:flotar 7s var(--ease) infinite alternate-reverse}
.flota-flecha{animation:latiguito 3.2s var(--ease) infinite}
.latido-anillo{animation:latido 3.2s var(--ease) infinite; transform-origin:196px 160px}
.pulso-check{animation:latido 3.2s var(--ease) infinite; transform-origin:105px 102px}
@keyframes flotar{from{transform:translateY(-7px)} to{transform:translateY(7px)}}
@keyframes latiguito{0%,100%{opacity:.35; transform:translateX(-3px)} 50%{opacity:1; transform:translateX(3px)}}
@keyframes latido{0%,100%{opacity:.25; transform:scale(.92)} 50%{opacity:.75; transform:scale(1.05)}}

/* ── Zona de carga ─────────────────────────────────────────────────── */
.zona-carga{
  border:1.6px dashed rgba(47,191,143,.4); border-radius:var(--r-xl);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:46px 22px; cursor:pointer; text-align:center;
  transition:all .2s var(--ease);
}
.zona-carga svg{width:52px; height:52px; margin-bottom:6px}
.zona-carga strong{font-size:1.16rem; letter-spacing:-.01em}
.zona-sub{color:var(--muted); font-size:.92rem; max-width:46ch}
.zona-carga:hover, .zona-carga.encima{transform:translateY(-3px); border-color:var(--verde); box-shadow:var(--glow)}
.cargar-pie{display:flex; justify-content:center; margin-top:16px}
.btn.centrado{align-self:center; margin-top:12px}
.ultima-exportacion{text-align:center; color:var(--muted); font-size:.88rem; margin-top:12px}

/* ── Cola de proceso ───────────────────────────────────────────────── */
.cola{margin-top:22px; display:flex; flex-direction:column; gap:10px}
.fila-proceso{
  display:grid; grid-template-columns:1fr 140px 110px; gap:14px; align-items:center;
  padding:12px 16px; border-radius:var(--r-md); background:var(--glass-3);
  border:1px solid var(--line-soft); font-size:.93rem;
}
.fila-proceso-nombre{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.fila-proceso.estado{justify-self:end; color:var(--faint); font-size:.86rem}
.fila-proceso.ok .fila-proceso-estado{color:var(--verde-2)}
.fila-proceso.revisar .fila-proceso-estado{color:var(--ambar)}
.fila-proceso.error .fila-proceso-estado{color:var(--danger)}
.barra{height:7px; border-radius:99px; background:rgba(147,168,156,.15); overflow:hidden}
.barra-relleno{height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--verde),var(--ambar)); transition:width .4s var(--ease)}

.titulo-seccion{font-size:.8rem; letter-spacing:.22em; color:var(--faint); font-weight:700; margin:26px 0 12px}

/* ── Filas recientes / comprobantes ───────────────────────────────── */
.fila-mini{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 14px; margin-top:8px; border-radius:var(--r-md); cursor:pointer;
  background:var(--glass-3); border:1px solid var(--line-soft); color:var(--ink); font:inherit; text-align:left;
  transition:all .18s var(--ease);
}
.fila-mini:hover{transform:translateY(-2px); border-color:var(--line)}
.fila-mini-quien{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.93rem}
.fila-mini-monto{font-variant-numeric:tabular-nums; font-weight:700}

.lista-comprobantes{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.fila-comp{
  display:grid; grid-template-columns:auto auto auto 1fr auto auto auto auto; gap:13px; align-items:center;
  padding:13px 16px; border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--glass);
  border:1px solid var(--line-soft); backdrop-filter:var(--blur);
  transition:all .18s var(--ease);
}
.fila-comp:hover{transform:translateY(-2px); border-color:var(--line); box-shadow:var(--shadow-2)}
.fila-comp.con-revisar{border-left:3px solid var(--ambar)}
.fila-comp:not(.con-revisar){border-left:3px solid var(--verde)}
.fila-quien{min-width:0}
.fila-quien strong{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em}
.fila-sub{color:var(--faint); font-size:.8rem; font-variant-numeric:tabular-nums}
.fila-fecha{color:var(--muted); font-size:.9rem; white-space:nowrap}
.fila-monto{font-variant-numeric:tabular-nums; font-weight:800; font-size:1.02rem; white-space:nowrap;
  background:linear-gradient(90deg,var(--ink),var(--verde-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.fila-acciones{display:flex; gap:6px}
.thumb{width:42px; height:42px; border-radius:8px; overflow:hidden; border:1px solid var(--line-soft); cursor:pointer; flex-shrink:0}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:800; letter-spacing:.06em;
  padding:4px 9px; border-radius:7px; white-space:nowrap;
  background:rgba(47,191,143,.14); color:var(--verde-2); border:1px solid rgba(47,191,143,.3);
}
.badge-A{background:rgba(47,191,143,.14); color:var(--verde-2); border-color:rgba(47,191,143,.3)}
.badge-B{background:rgba(242,193,78,.13); color:var(--ambar-2); border-color:rgba(242,193,78,.3)}
.badge-C, .badge-X{background:rgba(167,139,250,.13); color:var(--vio); border-color:rgba(167,139,250,.3)}
.badge-conf{font-size:.72rem; font-weight:700; padding:4px 9px; border-radius:99px; white-space:nowrap}
.conf-ok{background:rgba(47,191,143,.13); color:var(--verde-2)}
.conf-revisar{background:rgba(242,193,78,.13); color:var(--ambar)}

.vacio{display:flex; flex-direction:column; align-items:center; gap:14px; padding:44px; color:var(--muted);
  border:1.6px dashed var(--line-soft); border-radius:var(--r-lg); text-align:center}

/* ── Filtros ───────────────────────────────────────────────────────── */
.barra-filtros{display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-lg); margin-bottom:16px; flex-wrap:wrap}
.filtro{display:flex; flex-direction:column; gap:5px}
.filtro-rotulo{font-size:.66rem; letter-spacing:.2em; color:var(--faint); font-weight:700}
.filtro select, .filtro input{
  background:var(--glass-3); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-sm); padding:9px 12px; font:inherit; min-width:120px;
}
.filtro input{min-width:200px}
.filtro-ancho{flex:1}
.filtro select:hover, .filtro input:hover{border-color:var(--line)}

/* ── Totales ───────────────────────────────────────────────────────── */
.tarjetas-totales{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:6px}
.tarjeta-total{border-radius:var(--r-lg); padding:15px 17px; display:flex; flex-direction:column; gap:4px}
.tt-rotulo{font-size:.66rem; letter-spacing:.2em; color:var(--faint); font-weight:700}
.tt-num{font-variant-numeric:tabular-nums; font-weight:800; font-size:1.3rem; letter-spacing:-.01em}
.tt-destacada{border-color:rgba(242,193,78,.35)}
.tt-destacada .tt-num{background:linear-gradient(90deg,var(--ambar-2),var(--verde-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1.45rem}

/* ── Exportar ──────────────────────────────────────────────────────── */
.titulo-vista{letter-spacing:-.02em; font-size:1.7rem}
.export-alcance{color:var(--muted); margin:6px 0 20px}
.plantillas{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.plantilla-card{
  position:relative; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  border-radius:var(--r-lg); padding:16px 17px; display:flex; flex-direction:column; gap:7px;
  transition:all .18s var(--ease);
}
.plantilla-card:hover{transform:translateY(-3px); border-color:var(--line)}
.plantilla-card.activa{border-color:rgba(47,191,143,.55); box-shadow:var(--glow)}
.plantilla-card p{color:var(--muted); font-size:.85rem; line-height:1.45}
.plantilla-formato{position:absolute; top:14px; right:15px; font-size:.64rem; letter-spacing:.16em; color:var(--faint); font-weight:800}
.tag-recomendada{align-self:flex-start; font-size:.68rem; font-weight:800; letter-spacing:.08em; color:var(--ambar);
  background:rgba(242,193,78,.12); border:1px solid rgba(242,193,78,.3); padding:3px 9px; border-radius:99px}
.tag-borrar-custom{align-self:flex-start; font-size:.7rem; color:var(--danger); cursor:pointer; text-decoration:underline}
.plantilla-nueva{border-style:dashed; border-color:rgba(242,193,78,.4)}
.plantilla-nueva:hover{border-color:var(--ambar)}

.ayuda-tango{margin:20px 0; border-radius:var(--r-lg); border:1px solid var(--line-soft);
  background:var(--glass-3); padding:14px 18px}
.ayuda-tango summary{cursor:pointer; font-weight:700; color:var(--ambar-2)}
.ayuda-tango ol{margin:10px 0 4px 20px; color:var(--muted); font-size:.93rem; display:grid; gap:7px}

.envuelve-tabla{overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line-soft)}
.tabla-preview{border-collapse:collapse; width:100%; font-size:.86rem; min-width:720px}
.tabla-preview th{
  text-align:left; font-size:.66rem; letter-spacing:.14em; color:var(--faint); font-weight:800;
  padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--glass-3);
  position:sticky; top:0;
}
.tabla-preview td{padding:9px 12px; border-bottom:1px solid var(--line-soft); color:var(--muted); white-space:nowrap}
.tabla-preview td.num{font-variant-numeric:tabular-nums; text-align:right; color:var(--ink)}
.tabla-preview td.mas{text-align:center; color:var(--faint)}

.pie-accion{position:sticky; bottom:14px; display:flex; justify-content:center; margin-top:26px}
.pie-accion .btn{box-shadow:var(--shadow-1), var(--glow)}

/* ── Toasts (aria-live) ────────────────────────────────────────────── */
.toasts{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:100;
  display:flex; flex-direction:column; gap:9px; width:min(94vw,480px); pointer-events:none}
.toast{
  pointer-events:auto; display:flex; align-items:center; gap:10px; cursor:pointer;
  border-radius:var(--r-md); padding:13px 17px; font-size:.94rem; font-weight:600;
  animation:toast-entra .26s var(--ease); box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.05);
}
@keyframes toast-entra{from{opacity:0; transform:translateY(12px) scale(.97)} to{opacity:1; transform:none}}
.toast.saliendo{opacity:0; transform:translateY(8px); transition:all .24s var(--ease)}
.toast-ok{border-color:rgba(47,191,143,.45)} .toast-ok .toast-ico{color:var(--verde-2)}
.toast-error{border-color:rgba(251,113,133,.5)} .toast-error .toast-ico{color:var(--danger)}
.toast-info{border-color:rgba(242,193,78,.4)} .toast-info .toast-ico{color:var(--ambar)}
.toast-ico{font-weight:800}

/* ── Modal (3 salidas: X + fondo + Escape) ────────────────────────── */
.modal-overlay{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(3,8,5,.66); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  padding:18px; animation:aparece .2s var(--ease);
}
@keyframes aparece{from{opacity:0} to{opacity:1}}
.modal{
  width:min(760px,94vw); max-height:88vh; overflow-y:auto; border-radius:var(--r-xl);
  padding:0; animation:pop .22s var(--ease);
}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(10px)} to{opacity:1; transform:none}}
.modal.cerrandose{opacity:0; transform:scale(.96); transition:all .18s var(--ease)}
.modal-encabezado{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:19px 24px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--glass);
  backdrop-filter:var(--blur);
}
.modal-encabezado h2{font-size:1.15rem; letter-spacing:-.01em}
.modal-cerrar{
  background:var(--glass-3); border:1px solid var(--line-soft); color:var(--muted); cursor:pointer;
  width:40px; height:40px; border-radius:var(--r-sm); font-size:1rem; transition:all .18s var(--ease);
}
.modal-cerrar:hover{color:var(--ink); transform:rotate(-6deg)}
.modal-cuerpo{padding:22px 24px}
.modal-pie{margin-top:20px}
.fila-botones{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.texto-modal{color:var(--muted)}
.visor-adjunto{max-width:100%; border-radius:var(--r-md); display:block; margin:0 auto}

/* Bienvenida */
.pasos-bienvenida{list-style:none; display:grid; gap:16px; margin-bottom:16px}
.pasos-bienvenida li{display:flex; gap:14px; align-items:flex-start}
.paso-num{
  flex-shrink:0; width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  font-weight:800; color:var(--ambar-2); background:rgba(242,193,78,.1); border:1px solid rgba(242,193,78,.3);
}
.nota-privacidad{color:var(--verde-2); font-size:.9rem; font-weight:600}
.version-pie{color:var(--faint); font-size:.8rem; margin-top:14px}
.separador{border:none; border-top:1px solid var(--line-soft); margin:18px 0}

/* Edicion */
.grilla-edicion{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
.campo{display:flex; flex-direction:column; gap:5px}
.campo-rotulo{font-size:.64rem; letter-spacing:.18em; color:var(--faint); font-weight:800}
.campo input, .campo select{
  background:var(--glass-3); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-sm); padding:9px 11px; font:inherit; width:100%;
}
.aviso-validacion{grid-column:1/-1; color:var(--danger); font-size:.88rem; min-height:1.2em; font-weight:600}

/* Builder de plantillas */
.builder{display:flex; flex-direction:column; gap:14px}
.builder-nombre{background:var(--glass-3); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:10px 12px; font:inherit}
.builder-inicio p{color:var(--faint); font-size:.85rem; margin-bottom:7px}
.builder-agregar{display:flex; gap:9px}
.builder-select{flex:1; background:var(--glass-3); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:9px 11px; font:inherit}
.builder-lista{display:flex; flex-direction:column; gap:7px; max-height:260px; overflow-y:auto}
.builder-fila{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 13px; border-radius:var(--r-sm); background:var(--glass-3); border:1px solid var(--line-soft); font-size:.92rem}
.builder-acciones{display:flex; gap:5px}

/* Mapeo de plantilla importada */
.mapeo{display:flex; flex-direction:column; gap:14px}
.mapeo-lista{display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto}
.mapeo-fila{display:grid; grid-template-columns:1.1fr 1fr 1fr 40px; gap:9px; align-items:center;
  padding:9px 13px; border-radius:var(--r-sm); background:var(--glass-3); border:1px solid var(--line-soft)}
.mapeo-quien{display:flex; flex-direction:column; gap:2px; min-width:0}
.mapeo-col{font-size:.64rem; letter-spacing:.18em; color:var(--faint); font-weight:800}
.mapeo-header{font-size:.86rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mapeo-select, .mapeo-titulo{background:var(--bg1); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:8px 10px; font:inherit; width:100%}
.importar-excel{border-color:rgba(111,227,184,.4)}
.importar-excel:hover{border-color:var(--verde-2)}
@media (max-width: 640px){ .mapeo-fila{grid-template-columns:1fr; } }
.ayuda h3{margin:14px 0 6px; letter-spacing:-.01em}
.ayuda p{color:var(--muted); font-size:.94rem}

/* ── Pie ───────────────────────────────────────────────────────────── */
.pie{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto; padding:20px clamp(16px,4vw,42px) 34px;
  color:var(--faint); font-size:.83rem; border-top:1px solid var(--line-soft);
}
.pie-version{background:var(--glass-3); border:1px solid var(--line-soft); padding:1px 8px; border-radius:99px; font-size:.74rem}

/* ── Movimiento respetuoso ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ── Responsive (se prueba a 375px antes de publicar) ─────────────── */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero-escena{max-width:250px}
  .grilla-edicion{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .cabecera{flex-wrap:wrap; gap:10px}
  .nav{order:3; width:100%; margin-left:0; justify-content:space-between; gap:2px}
  .nav-enlace{flex:1; text-align:center; padding:10px 6px}
  .tarjetas-totales{grid-template-columns:repeat(2,1fr)}
  .fila-comp{grid-template-columns:auto 1fr auto; grid-template-areas:
    "sel quien monto" "sel meta meta" "sel acciones acciones"; row-gap:8px}
  .fila-comp > .thumb{display:none}
  .fila-comp > .badge{grid-area:meta; justify-self:start}
  .fila-comp > .badge-conf{grid-area:meta; justify-self:end}
  .fila-comp > .fila-quien{grid-area:quien}
  .fila-comp > .fila-fecha{display:none}
  .fila-comp > .fila-monto{grid-area:monto}
  .fila-comp > .fila-acciones{grid-area:acciones; justify-self:end}
  .fila-proceso{grid-template-columns:1fr 90px; }
  .fila-proceso .fila-proceso-estado{display:none}
  .grilla-edicion{grid-template-columns:1fr}
  .zona-carga{padding:34px 16px}
}