/* Componentes reutilizables (ux.js) y ajustes de presentación. Se carga después de estilos.css.
   Escala de espacio 4/8 px, colores semánticos (rojo bloqueado/vencido · ámbar hoy/por vencer · verde completado · gris pendiente)
   siempre acompañados de ícono o texto. */
:root {
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --r2: 10px; --sombra: 0 1px 2px rgb(16 32 48 / .06), 0 1px 3px rgb(16 32 48 / .08); --sombra-alta: 0 12px 32px rgb(16 32 48 / .22);
  --gris: #5b6870; --gris-s: #eceff1; --acento-h: #174a6d;
  --peso-n: 400; --peso-f: 600;
}
@media (prefers-color-scheme: dark) { :root { --gris: #a3b0b8; --gris-s: #26323a; --acento-h: #9cc6e6; --sombra: none; --sombra-alta: 0 12px 32px rgb(0 0 0 / .5) } }

body { font-size: 15px }
.vista { gap: var(--e5); padding: var(--e5) var(--e5) var(--e7) }
.ico { flex: none; vertical-align: -3px }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px }
.btn { min-height: 36px; gap: 6px; transition: background .12s, border-color .12s }
.btn.sm { min-height: 30px }
.btn.prim:hover { background: var(--acento-h); border-color: var(--acento-h) }
.btn.peligro-prim { background: var(--mal); border-color: var(--mal); color: #fff }
.btn.peligro-prim:hover { filter: brightness(.92) }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-color: var(--tenue) transparent var(--tenue) transparent; border-radius: 50%; animation: giro .7s linear infinite }
.btn.prim[aria-busy="true"]::after { border-color: #fff transparent #fff transparent }
@keyframes giro { to { transform: rotate(360deg) } }
.panel { padding: var(--e4); gap: var(--e3); box-shadow: var(--sombra) }
abbr.termino { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help }

/* ---------- insignias ---------- */
.insignia { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 12.5px; font-weight: var(--peso-f); white-space: nowrap; line-height: 1.5; background: var(--gris-s); color: var(--gris) }
.insignia .ico { width: 14px; height: 14px }
.insignia.t-mal { background: var(--mal-s); color: var(--mal) }
.insignia.t-alerta { background: var(--alerta-s); color: var(--alerta) }
.insignia.t-ok { background: var(--ok-s); color: var(--ok) }
.insignia.t-acento, .insignia.t-info { background: var(--acento-s); color: var(--acento) }

/* ---------- encabezado de pantalla y ayuda ---------- */
.enc-ux { gap: var(--e2) }
.enc-fila { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; justify-content: space-between }
.enc-txt { display: grid; gap: var(--e1); min-width: 0 }
.enc-acc { display: flex; gap: var(--e2); flex-wrap: wrap }
.como-funciona { border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup); font-size: 14px; width: fit-content; max-width: 100% }
.como-funciona[open] { width: auto }
.como-funciona > summary { cursor: pointer; padding: 5px 12px; color: var(--acento); font-weight: var(--peso-f); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; list-style: none }
.como-funciona > summary::-webkit-details-marker { display: none }
.cf-cuerpo { padding: 0 var(--e4) var(--e3); color: var(--tenue); display: grid; gap: var(--e2) }
.cf-cuerpo p { margin: 0 }
.info-ux { position: relative; display: inline-flex; color: var(--tenue); cursor: help; vertical-align: middle; margin-left: 4px }
.info-ux:hover, .info-ux:focus { color: var(--acento) }
.info-burbuja { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 280px; background: var(--tinta); color: var(--fondo); font-size: 12.5px; font-weight: var(--peso-n); line-height: 1.4; padding: 8px 10px; border-radius: var(--r); box-shadow: var(--sombra-alta); opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 30; text-transform: none; letter-spacing: 0; white-space: normal; text-align: left }
.info-ux:hover .info-burbuja, .info-ux:focus .info-burbuja { opacity: 1; visibility: visible }

/* ---------- tarjetas KPI ---------- */
.kpis-ux { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) }
.kpi-t { font: inherit; text-align: left; cursor: pointer; display: grid; gap: var(--e1); padding: var(--e4); border: 1px solid var(--linea); border-left: 4px solid var(--gris); border-radius: var(--r2); background: var(--sup); color: var(--tinta); box-shadow: var(--sombra); transition: border-color .12s, transform .12s }
.kpi-t:hover { border-color: var(--acento); transform: translateY(-1px) }
.kpi-cab { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tenue); font-weight: var(--peso-f) }
.kpi-num { font-size: 30px; line-height: 1.1; font-weight: 700 }
.kpi-t small { font-size: 12.5px; color: var(--tenue) }
.kpi-t.t-mal { border-left-color: var(--mal) } .kpi-t.t-mal .kpi-cab, .kpi-t.t-mal .kpi-num { color: var(--mal) }
.kpi-t.t-alerta { border-left-color: var(--alerta) } .kpi-t.t-alerta .kpi-cab, .kpi-t.t-alerta .kpi-num { color: var(--alerta) }
.kpi-t.t-ok { border-left-color: var(--ok) }
.kpi-t.t-acento { border-left-color: var(--acento) }
.kpi-t.activa { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento) inset }
.kpi-activa { font-size: 12px; color: var(--acento); font-weight: var(--peso-f); display: inline-flex; gap: 4px; align-items: center }
.kpi-mini { font-size: 12.5px; display: inline-flex; align-items: center; gap: 3px; font-weight: var(--peso-f) }
.kpi-mini.sube { color: var(--ok) } .kpi-mini.baja { color: var(--mal) } .kpi-mini.igual { color: var(--tenue) }
.spark { width: 100%; height: 28px; color: var(--acento) }

/* ---------- estado vacío ---------- */
.vacio-ux { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: center; padding: var(--e5); border: 1px dashed var(--linea); border-radius: var(--r2); background: var(--sup); color: var(--tinta) }
.vacio-ux .vacio-ico { width: 28px; height: 28px; color: var(--tenue) }
.vacio-txt { flex: 1 1 260px; display: grid; gap: 2px }
.vacio-txt p { margin: 0; color: var(--tenue); font-size: 14px }
.vacio-acc { display: flex; gap: var(--e2); flex-wrap: wrap }
.vacio-ux.compacto { padding: var(--e3) var(--e4) }
.vacio-ux.compacto .vacio-ico { width: 20px; height: 20px }

/* ---------- stepper ---------- */
.stepper { display: grid; gap: var(--e3) }
.stepper-barra { height: 6px; background: var(--sup2); border-radius: 99px; overflow: hidden }
.stepper-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--acento)); border-radius: 99px }
.stepper ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--e2) }
.st-paso { display: flex; gap: var(--e2); align-items: flex-start; min-width: 0 }
.st-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linea); color: var(--tenue); background: var(--sup); font-size: 12px; font-weight: 700 }
.st-txt { display: grid; min-width: 0; line-height: 1.3 }
.st-txt b { font-size: 14px }
.st-txt small { color: var(--tenue); font-size: 12.5px }
.st-paso.hecha .st-ico { background: var(--ok); border-color: var(--ok); color: #fff }
.st-paso.actual .st-ico { border-color: var(--acento); color: var(--acento); background: var(--acento-s) }
.st-paso.actual .st-txt small { color: var(--acento); font-weight: var(--peso-f) }
.st-paso.interrumpida .st-ico, .st-paso.cerrada .st-ico { background: var(--mal); border-color: var(--mal); color: #fff }
.st-paso.pendiente .st-txt b { color: var(--tenue) }

/* ---------- avisos (toast) ---------- */
.toasts { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 60; display: grid; gap: var(--e2); width: min(420px, calc(100vw - 32px)) }
.toast { display: flex; align-items: center; gap: var(--e2); padding: 10px 10px 10px 14px; background: var(--tinta); color: var(--fondo); border-radius: var(--r2); box-shadow: var(--sombra-alta); font-size: 14px; animation: entra .18s ease-out; border-left: 4px solid var(--ok) }
.toast.t-error { border-left-color: #ff9a8d } .toast.t-info { border-left-color: var(--acento-s) }
.toast > .ico { width: 18px; height: 18px }
.toast.t-ok > .ico { color: #8fd9a8 } .toast.t-error > .ico { color: #ff9a8d }
.toast-txt { flex: 1; white-space: pre-line }
.toast .toast-deshacer { background: transparent; color: var(--fondo); border-color: rgb(255 255 255 / .4) }
.toast-cerrar { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; border-radius: 4px; display: grid; opacity: .8 }
.toast-cerrar:hover { opacity: 1 }
.toast.sale { opacity: 0; transform: translateY(6px); transition: .18s }
@keyframes entra { from { opacity: 0; transform: translateY(8px) } }
.aviso { display: none !important }   /* reemplazado por .toasts; el elemento se conserva por compatibilidad */

/* ---------- diálogos ---------- */
.dialogo-ux { border: 0; border-radius: 14px; padding: var(--e5); width: min(460px, calc(100vw - 32px)); background: var(--sup); color: var(--tinta); box-shadow: var(--sombra-alta) }
.dialogo-ux::backdrop { background: rgb(10 22 32 / .45) }
.dialogo-ux form { display: grid; gap: var(--e4) }
.dlg-cab { display: flex; gap: var(--e2); align-items: center }
.dlg-cab h2 { flex: 1; font-size: 18px }
.dlg-cab .ico { width: 22px; height: 22px; color: var(--acento) }
.dlg-cab .ico.t-mal { color: var(--mal) }
.dlg-txt { margin: 0; color: var(--tenue) }
.dlg-acc { display: flex; gap: var(--e2); justify-content: flex-end; flex-wrap: wrap }
.panel-lado { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: 0; width: min(420px, 100vw); display: grid; align-content: start; gap: var(--e3) }
.panel-lado[open] { display: grid }
.glosario { margin: 0; display: grid; gap: var(--e3); overflow-y: auto }
.glosario > div { border-bottom: 1px solid var(--linea); padding-bottom: var(--e3) }
.glosario dt { font-weight: var(--peso-f) }
.glosario dd { margin: 2px 0 0; color: var(--tenue); font-size: 14px }
/* formulario dentro de un diálogo (p. ej. alta rápida de cliente) */
.dialogo-ux.amplio { width: min(640px, calc(100vw - 32px)) }

/* ---------- buscador global ---------- */
.buscador { padding: 0; width: min(620px, calc(100vw - 32px)); margin-top: 12vh; overflow: hidden }
.bus-campo { display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea) }
.bus-campo .ico { width: 20px; height: 20px; color: var(--tenue) }
.bus-campo input { border: 0; background: none; font-size: 17px; padding: 6px 0 }
.bus-campo input:focus { outline: none }
kbd { font: 11.5px var(--mono); border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--tenue); background: var(--sup2) }
.bus-res { list-style: none; margin: 0; padding: var(--e2); max-height: 50vh; overflow-y: auto; display: grid; gap: 2px }
.bus-res a { display: flex; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--r); text-decoration: none; color: var(--tinta) }
.bus-res a span { display: grid; min-width: 0 }
.bus-res a small { color: var(--tenue) }
.bus-res [aria-selected="true"] a, .bus-res a:hover { background: var(--acento-s) }
.bus-vacio { padding: var(--e4); color: var(--tenue); font-size: 14px }
.bus-pie { margin: 0; padding: var(--e2) var(--e4); border-top: 1px solid var(--linea); font-size: 12px; color: var(--tenue); display: flex; gap: 4px; align-items: center; flex-wrap: wrap }

/* ---------- cabecera de la aplicación ---------- */
.cabecera { gap: var(--e3) var(--e4); padding: 10px var(--e5) }
.btn-buscar { min-width: 240px; justify-content: flex-start; color: var(--tenue); background: var(--sup2) }
.btn-buscar kbd { margin-left: auto }
.cabecera .btn-icono { padding: 7px 10px }
.cabecera .btn.prim.sec { background: var(--sup); color: var(--acento); border-color: var(--acento) }
.migas { padding: 6px var(--e5) }
.demo-banda { padding: 4px var(--e5); font-size: 12.5px }

/* ---------- menú lateral ---------- */
.menu { gap: var(--e3) }
.menu a { gap: 10px; justify-content: flex-start; padding: 7px 10px; font-size: 14px }
.menu a .ico { width: 17px; height: 17px; opacity: .85 }
.menu a .m-txt { flex: 1; min-width: 0 }
.menu a[aria-current="page"] .ico { opacity: 1 }
.m-num { margin-left: auto; min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--lat-activo); color: var(--lat-tinta); font-size: 11.5px; font-weight: 700; text-align: center; line-height: 20px }
.m-num.t-mal { background: #c4473a; color: #fff }
.m-num.t-alerta { background: #d79a2b; color: #1b1300 }
.menu-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--lat-tenue); padding: var(--e2) 10px 2px; font-weight: 600 }
details.menu-grupo.activo > summary { color: var(--lat-tinta) }
details.menu-grupo > summary .m-num { margin-left: auto; margin-right: 6px }

/* ---------- tablero ---------- */
.barra-filtros { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center }
.barra-filtros .bf-buscar { flex: 1 1 260px; position: relative }
.barra-filtros .bf-buscar .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tenue) }
.barra-filtros .bf-buscar input { padding-left: 34px; background: var(--sup) }
.segmentado { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; background: var(--sup) }
.segmentado button { border: 0; background: none; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 14px; color: var(--tenue) }
.segmentado button[aria-pressed="true"] { background: var(--acento); color: var(--acento-t); font-weight: var(--peso-f) }
.segmentado button + button { border-left: 1px solid var(--linea) }
.filtros-mas { flex: 0 0 auto }
.filtros-mas[open] { flex: 1 1 100% }
.filtros-mas > summary { list-style: none; display: inline-flex }
.filtros-mas > summary::-webkit-details-marker { display: none }
.filtros-mas[open] > .filtros { margin-top: var(--e3); padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--r); background: var(--sup) }
.chips-activos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px }
.chip-filtro { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--acento); color: var(--acento); background: var(--acento-s); border-radius: 99px; padding: 2px 4px 2px 10px; font-size: 13px; font-weight: var(--peso-f); cursor: pointer; font-family: inherit }
.chip-filtro .ico { width: 14px; height: 14px }
.chip-filtro:hover { background: var(--sup) }
.btn-link { background: none; border: 0; color: var(--acento); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; padding: 2px 4px }
.lista-seg .seg { border-left: 4px solid var(--linea); transition: box-shadow .12s }
.lista-seg .seg:hover { box-shadow: var(--sombra) }
.lista-seg .seg.u-mal { border-left-color: var(--mal) }
.lista-seg .seg.u-mal-bloq { border-left-color: var(--mal); background: linear-gradient(90deg, var(--mal-s), var(--sup) 30%) }
.lista-seg .seg.u-alerta { border-left-color: var(--alerta) }
.seg-fila .fecha-rel { display: block; font-size: 12.5px; font-weight: var(--peso-f) }
.fecha-rel.t-mal { color: var(--mal) } .fecha-rel.t-alerta { color: var(--alerta) }
.seg-bloqueo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.seg-urg { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px }
.seg-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.contador-lista { font-size: 13px; color: var(--tenue) }

/* ---------- expediente ---------- */
.exp-cab { position: sticky; top: var(--alto-cab, 57px); z-index: 4; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2); padding: var(--e3) var(--e4); box-shadow: var(--sombra); display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: center }
.exp-id { flex: 1 1 320px; min-width: 0; display: grid; gap: 2px }
.exp-id h1 { font-size: 21px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center }
.exp-id h1 .folio-exp { font-family: var(--mono); font-size: 16px; color: var(--acento); font-weight: 700 }
.exp-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--tenue); align-items: center }
.exp-meta b { color: var(--tinta); font-weight: var(--peso-f) }
.exp-acc { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap }
.exp-acc .proxima { display: grid; text-align: right; font-size: 12.5px; color: var(--tenue); line-height: 1.3 }
.exp-acc .proxima b { color: var(--tinta); font-size: 13px; font-weight: var(--peso-f) }
.exp-volver { font-size: 13px }
.alerta-bloqueo { display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e3); padding: var(--e4); border: 1px solid var(--mal); border-left-width: 5px; background: var(--mal-s); border-radius: var(--r2) }
.alerta-bloqueo > .ico { width: 22px; height: 22px; color: var(--mal); margin-top: 2px }
.alerta-bloqueo h2 { font-size: 16px; color: var(--mal) }
.alerta-bloqueo ul { margin: var(--e2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e2) }
.alerta-bloqueo li { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; justify-content: space-between; background: var(--sup); border-radius: var(--r); padding: var(--e2) var(--e3) }
.exp-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--e3) var(--e4); padding: var(--e4); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2) }
.exp-datos .dato b { font-size: 14.5px }
.exp-datos .editar { grid-column: 1 / -1; font-size: 13px }
.exp-avance { display: grid; gap: var(--e3); padding: var(--e4); background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r2) }
.exp-avance .otros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px }
.exp-avance details summary { cursor: pointer; font-size: 13px; color: var(--acento); width: fit-content }
.pestanas-ux { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); align-items: flex-end; flex-wrap: wrap }
.pestanas-ux > a, .pestanas-ux .mas-pest > summary { padding: 9px 14px; text-decoration: none; color: var(--tenue); border-bottom: 3px solid transparent; white-space: nowrap; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; list-style: none; margin-bottom: -1px }
.pestanas-ux .mas-pest > summary::-webkit-details-marker { display: none }
.pestanas-ux > a:hover, .pestanas-ux .mas-pest > summary:hover { color: var(--tinta); background: var(--sup2); border-radius: var(--r) var(--r) 0 0 }
.pestanas-ux a[aria-current="page"], .pestanas-ux .mas-pest.activa > summary { color: var(--tinta); border-bottom-color: var(--acento); font-weight: var(--peso-f) }
.pestanas-ux a.futuro { opacity: .62 }
.pestanas-ux .marca { width: 8px; height: 8px; border-radius: 50%; background: var(--mal); display: inline-block }
.mas-pest { position: relative }
.mas-pest .menu-pest { position: absolute; right: 0; top: 100%; z-index: 8; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: var(--sombra-alta); padding: 6px; display: grid; min-width: 230px }
.mas-pest .menu-pest a { padding: 8px 12px; border-radius: var(--r); text-decoration: none; color: var(--tinta); display: flex; justify-content: space-between; gap: 8px; align-items: center }
.mas-pest .menu-pest a:hover, .mas-pest .menu-pest a[aria-current="page"] { background: var(--acento-s) }
.resumen-integral { gap: var(--e3) }
.res-vacias { display: grid; gap: var(--e2); padding: var(--e4); border: 1px dashed var(--linea); border-radius: var(--r2); background: var(--sup) }
.res-vacias h3 { font-size: 14px; color: var(--tenue); display: flex; gap: 6px; align-items: center }
.res-vacias ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.res-vacias li { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; padding: var(--e2) 0; border-top: 1px solid var(--linea); font-size: 14px }
.res-vacias li:first-child { border-top: 0 }
.res-vacias li b { min-width: 170px }
.res-vacias li span { flex: 1 1 260px; color: var(--tenue) }
.bloque-res { padding: var(--e4); border-radius: var(--r2); box-shadow: var(--sombra) }
.estado-vacio { font-size: 12.5px; color: var(--tenue); font-style: italic; background: none; border: 0; padding: 0 }

/* ---------- nueva operación (asistente por pasos) ---------- */
.asistente { display: grid; gap: var(--e4) }
.pasos-asis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); counter-reset: paso }
.pasos-asis button { width: 100%; font: inherit; text-align: left; display: grid; gap: 2px; padding: var(--e2) var(--e3); background: var(--sup); border: 1px solid var(--linea); border-top: 4px solid var(--linea); border-radius: var(--r); cursor: pointer; color: var(--tenue) }
.pasos-asis button b { color: var(--tinta); font-size: 14px }
.pasos-asis button small { font-size: 12px }
.pasos-asis .hecho button { border-top-color: var(--ok) }
.pasos-asis .hecho button small { color: var(--ok) }
.pasos-asis .actual button { border-top-color: var(--acento); background: var(--acento-s) }
.pasos-asis .error button { border-top-color: var(--mal) }
.pasos-asis .error button small { color: var(--mal) }
.asis-barra { height: 4px; background: var(--sup2); border-radius: 99px; overflow: hidden }
.asis-barra span { display: block; height: 100%; background: var(--acento); transition: width .2s }
.asis-paso { display: grid; gap: var(--e4); border: 0; padding: 0; margin: 0; min-width: 0 }
.asis-paso[hidden] { display: none }
.asis-pie { display: flex; gap: var(--e2); justify-content: space-between; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--linea); padding-top: var(--e4) }
.asis-pie .der { display: flex; gap: var(--e2); flex-wrap: wrap }
.guardado { font-size: 12.5px; color: var(--tenue); display: inline-flex; gap: 4px; align-items: center }
.campo .req { color: var(--mal); font-weight: 700 }
.campo .error-campo { color: var(--mal); font-size: 12.5px; display: flex; gap: 4px; align-items: center; margin-top: 3px }
.campo [aria-invalid="true"] { border-color: var(--mal); box-shadow: 0 0 0 1px var(--mal) }
.campo .ayuda-campo { font-size: 12.5px; color: var(--tenue); margin-top: 3px }
.revision-asis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--e3) var(--e4); margin: 0 }
.revision-asis div { border-bottom: 1px solid var(--linea); padding-bottom: var(--e2) }
.revision-asis dt { font-size: 12px; color: var(--tenue); font-weight: var(--peso-f) }
.revision-asis dd { margin: 0 }
.cliente-sel { display: flex; gap: var(--e2); align-items: flex-end; flex-wrap: wrap }
.cliente-sel .campo { flex: 1 1 280px }

/* ---------- reportes ---------- */
.rangos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.rangos button { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--linea); background: var(--sup); cursor: pointer; color: var(--tinta) }
.rangos button[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-t); font-weight: var(--peso-f) }
.rejilla-kpi { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)) }
.kpi-rep { display: grid; gap: var(--e2); align-content: start; padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--r2); background: var(--sup); box-shadow: var(--sombra) }
.kpi-rep h3 { font-size: 13.5px; color: var(--tenue); font-weight: var(--peso-f); display: flex; gap: 4px; align-items: flex-start }
.kpi-rep .valor { font-size: 24px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere }
.kpi-rep .comp { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12.5px; color: var(--tenue) }
.kpi-rep .acc { display: flex; gap: 6px; flex-wrap: wrap }

/* ---------- tablas que pasan a tarjetas ---------- */
@media (max-width: 720px) {
  table.tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100% }
  .tabla-tarjetas thead { display: none }
  .tabla:has(.tabla-tarjetas) { border: 0; background: none; overflow: visible }
  .tabla-tarjetas tr { background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r); margin-bottom: var(--e2); padding: var(--e2) 0 }
  .tabla-tarjetas td { border: 0; padding: 4px var(--e3) }
  .tabla-tarjetas td[data-l]:not([data-l=""])::before { content: attr(data-l); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 600 }
  .exp-cab { position: static }
  .exp-acc { width: 100% }
  .exp-acc .proxima { text-align: left; flex: 1 }
  .pasos-asis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .btn-buscar { min-width: 0; flex: 1 }
  .btn-buscar kbd { display: none }
  .toasts { left: var(--e4); right: var(--e4); width: auto }
}

/* ---------- menú lateral colapsable debajo de 1280 px ---------- */
@media (max-width: 1279px) {
  .app { grid-template-columns: minmax(0, 1fr) }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 85vw); z-index: 10; transform: translateX(-105%); transition: transform .2s ease; visibility: hidden }
  .app.menu-abierto .lateral { transform: none; visibility: visible; box-shadow: var(--sombra-alta) }
  .cabecera .menu-boton { display: inline-flex }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important } }

/* ---------- carga inicial ---------- */
.cargando { display: grid; gap: var(--e3); padding: var(--e2) 0 }
.cargando span { display: block; height: 18px; border-radius: var(--r); background: linear-gradient(90deg, var(--sup2), var(--sup), var(--sup2)); background-size: 200% 100%; animation: brillo 1.2s infinite }
.cargando span:nth-child(1) { width: 40%; height: 28px } .cargando span:nth-child(2) { width: 70% } .cargando span:nth-child(3) { height: 96px }
@keyframes brillo { to { background-position: -200% 0 } }

/* Estados vacíos heredados (texto suelto «Sin registros…»): mismo aspecto que el componente, con ícono. */
.panel.vacio, p.vacio, div.vacio { border: 1px dashed var(--linea); background: var(--sup); color: var(--tenue); border-radius: var(--r2); padding: var(--e4); display: flex; gap: var(--e2); align-items: center; justify-content: flex-start; text-align: left; box-shadow: none }
.panel.vacio::before, p.vacio::before, div.vacio::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E") center / contain no-repeat }
/* Acciones de fila en tablas: secundarias con acento (el primario de la pantalla queda arriba). */
.tabla td .btn.prim, .lista li .btn.sm.prim { background: var(--sup); color: var(--acento); border-color: var(--acento) }
.tabla td .btn.prim:hover, .lista li .btn.sm.prim:hover { background: var(--acento-s) }
.valor-partes { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4) }
.valor-partes span { display: grid; line-height: 1.2 }
.valor-partes b { font-size: 20px; font-weight: 700 }
.valor-partes small { font-size: 12px; color: var(--tenue) }
.kpi-rep .spark { color: var(--acento); opacity: .85 }
.rangos .sub { margin-left: var(--e2) }
.panel > .filtros-mas { margin-top: var(--e1) }
@media (max-width: 720px) {
  .pestanas-ux { display: none }
  .btn-buscar, .cabecera .btn-icono { min-width: 0; flex: 0 0 auto; padding: 7px 10px }
  .btn-buscar span, .cabecera .btn-icono span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .barra-filtros .segmentado { flex: 1 1 auto }
  .barra-filtros .segmentado button { flex: 1 }
  .kpi-num { font-size: 26px }
  .res-vacias li b { min-width: 0; flex: 1 1 100% }
}