/* Componentes `ing-*` que usa Agencia (web/agencia.js): acciones del encabezado, pestañas, KPIs, secciones, logo, vacíos,
   bitácora y la hoja por pasos (`#dlgAgc`). Nacieron en Ingresos; cuando Ingresos se quitó del mando (9-oct-2026) se
   quedaron aquí tal cual, sin cambios de estilo. Solo var(--…) de mando.css; los tonos de la Agencia los pone agencia.css.
   Celular primero: texto ≥ 14 px, toques ≥ 44 px, zonas seguras. */
/* Tokens del componente (#167: sin hex sueltos). La Agencia los remapea a los suyos, así la hoja y sus controles siguen
   el tema claro u oscuro de la vista. */
:root{--ing-sobre-tinta:var(--sobre-tinta);--ing-tinta-tab:var(--sobre-tinta-2);--ing-heroe-a:#16294A;--ing-heroe-t:#C7DDF0}
.ing-acc{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Montos y notas tapados: mismo trazo punteado que «revelar» en Datos */
.ing-tapado{display:inline-block;padding:0 6px;border:1px dashed var(--linea);border-radius:6px;color:var(--tinta-2);letter-spacing:.02em}
.ing-acc .btn .i3d{width:22px;height:22px}

/* Pestañas: enlaces con la forma de los chips del mando */
.ing-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.ing-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea);background:var(--tarjeta);font-weight:600;color:var(--tinta-2);text-decoration:none}
.ing-tabs a small{font-size:.875rem;color:var(--tinta-2)}
.ing-tabs a[aria-current="page"]{background:var(--tinta);border-color:var(--tinta);color:var(--ing-sobre-tinta)}
.ing-tabs a[aria-current="page"] small{color:var(--ing-tinta-tab)}
.chips button small{margin-left:6px}

/* Indicadores */
.ing-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:28px}
.ing-kpi{display:flex;flex-direction:column;gap:4px;min-width:0;padding:18px 18px 16px;border-radius:20px;background:var(--tarjeta);color:var(--tinta);text-decoration:none;
  box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06),0 8px 24px -14px rgba(var(--sombra-rgb),.22);transition:transform .2s,box-shadow .2s}
a.ing-kpi:hover,a.ing-kpi:focus-visible{transform:translateY(-2px);box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06),0 16px 30px -14px rgba(var(--sombra-rgb),.3)}
.ing-kpi-e{font-size:.875rem;font-weight:600;color:var(--tinta-2)}
.ing-kpi b{font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.ing-kpi small{font-size:.875rem;color:var(--tinta-2)}
.ing-kpi.heroe{background:linear-gradient(150deg,var(--ing-heroe-a) 0%,var(--ing-marino) 70%);color:var(--ing-sobre-tinta);position:relative;overflow:hidden}
.ing-kpi.heroe::after{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(125,211,252,.35),transparent 70%)}
.ing-kpi.heroe .ing-kpi-e,.ing-kpi.heroe small{color:var(--ing-heroe-t)}
.ing-kpi.heroe b{color:var(--ing-sobre-tinta)}
.ing-kpi.alerta{box-shadow:inset 4px 0 0 var(--err),0 8px 24px -14px rgba(var(--sombra-rgb),.22)}
.ing-kpi.alerta b{color:var(--err)}

/* Secciones */
.ing-sec{margin-bottom:30px}
.ing-sec h2{font-size:1.375rem;margin-bottom:12px}
.ing-sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ing-sec-h h2{margin-bottom:0}
.ing-logo{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:var(--c,var(--ing-marino));color:var(--ci,var(--ing-sobre-tinta));font-family:var(--display);font-weight:800}
.ing-logo img{width:100%;height:100%;object-fit:contain;background:var(--logo-fondo)}
.btn.peligro{color:var(--err)}
.btn.peligro:hover{border-color:var(--err)}

/* Cambios */
.ing-bita{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ing-bita li{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:12px 14px;border-radius:12px;background:var(--tarjeta)}
.ing-bita time,.ing-bita small{font-size:.875rem;color:var(--tinta-2)}
.ing-bita b{font-weight:600;overflow-wrap:anywhere}

/* Vacío */
.ing-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 20px;border-radius:24px;background:var(--tarjeta)}
.ing-vacio .i3d{width:88px;height:88px;animation:ing-flota 3.2s ease-in-out infinite}
.ing-vacio.chico{padding:32px 18px}
.ing-vacio.chico .i3d{width:64px;height:64px}
.ing-vacio h2{font-size:1.375rem}
.ing-vacio p{max-width:46ch;margin:0;color:var(--tinta-2)}
@keyframes ing-flota{50%{transform:translateY(-6px) rotate(-3deg)}}

/* ---- Hoja por pasos ---- */
.ing-hoja{width:min(560px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
.ing-hoja .dlg-head h2{font-size:1.5rem}
.ing-paso{margin:4px 0 0;font-size:.875rem;color:var(--tinta-2);overflow-wrap:anywhere}
.ing-puntos{list-style:none;display:flex;gap:6px;margin:0 0 6px;padding:0}
.ing-puntos li{flex:1;height:4px;border-radius:4px;background:var(--papel-2);transition:background .25s}
.ing-puntos li.hecho{background:var(--tinta-2)}
.ing-puntos li.aqui{background:var(--tinta)}
.ing-cuerpo label{margin-top:12px}
.ing-ayuda{margin:8px 0 0;font-size:.875rem;color:var(--tinta-2)}
.ing-monto{display:flex;align-items:center;border:1px solid var(--linea);border-radius:12px;background:var(--tarjeta);padding-left:14px}
.ing-monto:focus-within{border-color:var(--tinta)}
.ing-monto>span{color:var(--tinta-2);font-weight:600}
.ing-monto input{border:0;min-width:0;padding-left:6px;font-variant-numeric:tabular-nums}
.ing-seg{border:0;margin:12px 0 0;padding:0;min-width:0}
.ing-seg legend{font-weight:600;font-size:.875rem;color:var(--tinta-2);margin-bottom:6px;padding:0}
.ing-seg>div{display:flex;flex-wrap:wrap;gap:6px}
.ing-seg label{position:relative;margin:0;display:block}
.ing-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.ing-seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--tinta);font-weight:600;font-size:.9375rem}
.ing-seg input:checked+span{background:var(--tinta);border-color:var(--tinta);color:var(--ing-sobre-tinta)}
.ing-seg input:focus-visible+span{outline:2px solid var(--tinta);outline-offset:2px}
.ing-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:8px 0 0;font-weight:500;font-size:1rem;color:var(--tinta);cursor:pointer}
.ing-check input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--tinta)}
.ing-proys-sel{border:0;margin:14px 0 0;padding:0;min-width:0}
.ing-proys-sel legend{font-weight:600;font-size:.875rem;color:var(--tinta-2);padding:0}
.ing-proys-sel>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;max-height:240px;overflow:auto;overscroll-behavior:contain}
.ing-proys-sel .ing-check{margin:0}
.ing-opciones{display:grid;gap:10px}
.ing-opcion{position:relative;display:flex;align-items:center;gap:14px;margin:0;padding:14px 16px;border-radius:18px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--tinta);cursor:pointer;transition:border-color .15s,transform .15s}
.ing-opcion input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.ing-opcion .i3d{width:40px;height:40px}
.ing-opcion span{display:flex;flex-direction:column;min-width:0}
.ing-opcion b{font-size:1.0625rem}
.ing-opcion small{font-size:.875rem;color:var(--tinta-2)}
.ing-opcion:has(input:checked){border-color:var(--tinta);box-shadow:0 0 0 2px var(--tinta)}
.ing-opcion:has(input:focus-visible){outline:2px solid var(--tinta);outline-offset:2px}
.ing-opcion:active{transform:scale(.99)}
.ing-hoja-acc{position:sticky;bottom:calc(-1 * var(--dlg-pad,28px));z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:16px calc(-1 * var(--dlg-pad,28px)) calc(-1 * var(--dlg-pad,28px));padding:12px var(--dlg-pad,28px) calc(12px + env(safe-area-inset-bottom));background:var(--tarjeta);border-top:1px solid var(--linea)}
.ing-sep{flex:1 1 0}
.ing-hoja-acc .btn{min-height:48px}

@media (max-width:900px){
  .ing-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .ing-hoja{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - 8px);border-radius:22px 22px 0 0}
  .ing-hoja .dlg-body{--dlg-pad:18px;max-height:calc(100dvh - env(safe-area-inset-top) - 8px)}
  .ing-hoja[open]{animation:ing-sube .28s cubic-bezier(.2,0,0,1)}
  .ing-hoja-acc .btn.primary{flex:1 1 auto}
  .ing-bita li{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ing-kpis{gap:10px}
  .ing-kpi{padding:14px}
  .ing-kpi b{font-size:1.375rem}
  .ing-kpi.heroe,.ing-kpi:last-child{grid-column:1/-1}
  .ing-kpi.heroe b{font-size:2rem}
  .ing-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .ing-tabs a{flex:none}
  .ing-proys-sel>div{grid-template-columns:minmax(0,1fr)}
}
@keyframes ing-sube{from{transform:translateY(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ing-vacio .i3d,.ing-hoja[open]{animation:none}
}