/* HyperForge by Riverstar · armazón de la app (diseño v2, 12-nov-2026; antes W1). Colores y medidas: tokens.css.
   Riel flotante de iconos que se abre al pasar o con el foco (escritorio) y barra inferior flotante (móvil); cabecera con
   migas, aviso Beta, «Datos de ejemplo», la barra de uso y el saldo por uso (solo admin) y la persona que firma. */

/* ───────── armazón: riel flotante + lienzo ───────── */
.armazon{min-height:100vh}
.lienzo{min-width:0;display:flex;flex-direction:column;margin-left:88px;min-height:100vh}
.armazon:has(.riel[hidden]) .lienzo{margin-left:0}
/* cabecera y contenido comparten el tope del marco y se centran juntos: ni columna pegada a la izquierda ni bordes desalineados */
.lienzo main{max-width:var(--hf-marco-max);width:100%;margin-inline:auto;padding:var(--hf-e4) var(--hf-e6) var(--hf-e8)}

.riel{position:fixed;left:12px;top:12px;bottom:12px;width:64px;z-index:var(--hf-z-riel);background:var(--hf-panel);
  border:1px solid var(--hf-linea);border-radius:var(--hf-r-grande);overflow:hidden;
  transition:width var(--hf-dur-lenta) var(--hf-facil),box-shadow var(--hf-dur-lenta) var(--hf-facil)}
.riel:hover,.riel:focus-within{width:210px;box-shadow:var(--hf-sombra-flotante)}
.riel-interior{height:100%;display:flex;flex-direction:column;gap:6px;padding:14px 9px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.riel .empresa{font:500 var(--hf-t-xs)/1.3 var(--hf-f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-tenue);
  padding:0 6px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--hf-dur)}
.riel .grupo-nav + .grupo-nav{margin-top:var(--hf-e2);padding-top:var(--hf-e2);border-top:1px solid var(--hf-linea)}
.riel .grupo-nav h2{font:500 10px var(--hf-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hf-tenue);
  padding:2px 8px 6px;white-space:nowrap;opacity:0;transition:opacity var(--hf-dur)}
.riel ul{list-style:none;display:grid;gap:6px}
.riel a.entrada{position:relative;display:flex;align-items:center;gap:14px;height:46px;padding-left:11px;border-radius:17px;
  text-decoration:none;color:var(--hf-tenue);white-space:nowrap;
  transition:background-color var(--hf-dur) var(--hf-facil),color var(--hf-dur),border-radius var(--hf-dur-lenta) var(--hf-facil)}
.riel a.entrada:hover{color:var(--hf-texto);background:var(--hf-panel-2)}
.riel a.entrada[aria-current="page"]{background:var(--hf-texto);color:var(--hf-fondo);border-radius:22px 14px 22px 14px}
.riel a.entrada .hf-icono{width:22px;height:22px}
.riel .lb{font:500 14px var(--hf-f-display);opacity:0;transition:opacity var(--hf-dur)}
.riel:hover .lb,.riel:focus-within .lb,.riel:hover .empresa,.riel:focus-within .empresa,
.riel:hover .grupo-nav h2,.riel:focus-within .grupo-nav h2{opacity:1;transition-delay:.12s}
/* el contador: sobre el icono, en brasa (atención) o tenue (solo informa) */
.riel .cuenta{position:absolute;top:3px;left:27px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--hf-r-pildora);
  display:grid;place-items:center;font:600 10px var(--hf-f-mono);background:var(--hf-panel-2);color:var(--hf-texto);
  border:1px solid var(--hf-linea-2)}
.riel .cuenta.decidir,.riel .cuenta.oro{background:var(--hf-brasa);color:var(--hf-sobre-brasa);border-color:transparent}
.riel .cuenta:empty{display:none}
/* las cifras que solo informan (recibos, eventos, procesos) van a la derecha y se ven con el riel abierto */
.riel .cuenta.info{position:static;margin:0 10px 0 auto;background:none;border:0;color:var(--hf-tenue);font-weight:500;opacity:0;
  transition:opacity var(--hf-dur)}
.riel a.entrada[aria-current="page"] .cuenta.info{color:inherit}
.riel:hover .cuenta.info,.riel:focus-within .cuenta.info{opacity:1;transition-delay:.12s}
.riel .pie{margin-top:auto;padding-top:var(--hf-e2);border-top:1px solid var(--hf-linea)}
.persona-sesion{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:0 10px;padding:4px 0;
  text-decoration:none;color:var(--hf-texto);border-radius:17px;white-space:nowrap}
.persona-sesion:hover{background:var(--hf-panel-2)}
.persona-sesion .avatar{justify-self:center;grid-row:span 3}
.persona-sesion .nombre,.persona-sesion .rol,.persona-sesion .cambiar{opacity:0;transition:opacity var(--hf-dur);overflow:hidden;text-overflow:ellipsis}
.persona-sesion .nombre{font:500 14px var(--hf-f-display)}
.persona-sesion .rol{color:var(--hf-tenue);font-size:var(--hf-t-xs);font-family:var(--hf-f-mono);letter-spacing:.06em}
.persona-sesion .cambiar{color:var(--hf-brasa-texto);font-size:var(--hf-t-sm);text-decoration:underline;text-underline-offset:3px}
.riel:hover .persona-sesion > span,.riel:focus-within .persona-sesion > span{opacity:1;transition-delay:.12s}
/* voz humana: círculo con iniciales */
.avatar{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--hf-texto);display:grid;place-items:center;
  font:600 13px var(--hf-f-display);letter-spacing:.02em}
.avatar.grande{width:48px;height:48px;font-size:16px}

/* ───────── cabecera: migas, avisos, uso y persona ───────── */
.cabecera{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hf-e3) var(--hf-e4);min-height:64px;
  max-width:var(--hf-marco-max);width:100%;margin-inline:auto;padding:var(--hf-e4) var(--hf-e6) var(--hf-e1)}
.cabecera .der{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--hf-e2)}
.cabecera .hf-logo{display:inline-flex;margin-right:var(--hf-e2)}   /* v10: el logo con su nombre siempre en la cabecera */
.cabecera .hf-logo-marca{width:34px;height:34px}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--hf-e2);
  font:500 var(--hf-t-xs) var(--hf-f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-tenue)}
.migas li + li::before{content:"·";margin-right:var(--hf-e2)}
.migas a{color:var(--hf-tenue);text-decoration:none}
.migas a:hover{color:var(--hf-texto);text-decoration:underline;text-underline-offset:3px}
.migas [aria-current="page"]{color:var(--hf-texto)}
.reloj{color:var(--hf-tenue);letter-spacing:.06em;font-size:var(--hf-t-xs)}
.etiqueta{font-size:var(--hf-t-xs);text-transform:uppercase;padding:5px 11px}
.etiqueta.ejemplo{border-style:dashed;border-color:var(--hf-linea-fuerte);color:var(--hf-tenue)}
/* ───────── piezas comunes de las pantallas ───────── */
.franja{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-top:var(--s6);padding:var(--s4) 0;
  border-top:1px solid var(--ceniza);border-bottom:1px solid var(--ceniza)}
.franja .dato{min-width:0}
.franja .dato b{display:block;font-family:var(--f-cifra);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:.01em}
.franja .dato b.palabra{font-family:var(--f-texto);font-size:17px;font-weight:500;line-height:1.6}
.franja .dato span{color:var(--veta);font-size:13px}
.franja .dato.ancho{flex:1 1 220px}
.aviso-conexion{margin-top:var(--s5);border:1px solid var(--oro);border-left-width:4px;border-radius:var(--r-sup);
  padding:var(--s3) var(--s4);color:var(--marmol)}
.aviso-conexion strong{color:var(--oro);font-weight:500}
.aviso-uso{margin:0 0 var(--s4);border:1px solid var(--oro);border-left-width:4px;border-radius:var(--r-sup);
  padding:var(--s3) var(--s4);color:var(--marmol);font-size:14px}
.aviso-uso[hidden]{display:none}
.etiqueta.uso-mes{border-style:solid;border-color:var(--steel);color:var(--steel);font-family:var(--f-mono);
  font-size:12px;letter-spacing:.04em;text-transform:none}
.seccion-app{margin-top:var(--s7)}
.seccion-app > h2{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;padding-bottom:var(--s3)}
.seccion-app > h2 .cuenta{color:var(--marmol)}
.seccion-app > h2 .pista{color:var(--steel);letter-spacing:.06em;text-transform:none;font-family:var(--f-texto);font-size:13px}
.nota-fase{color:var(--veta);font-size:14px;margin-top:var(--s3)}
.enlace{color:var(--navy-texto);text-underline-offset:3px}

/* filas de decisión (Linear 11 · Vapi 12): densas, priorizadas, con su evaluación por fila */
.decisiones{list-style:none;border-top:1px solid var(--ceniza)}
.decisiones > li{border-bottom:1px solid var(--ceniza)}
.decisiones a{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(120px,auto);gap:2px var(--s4);
  padding:var(--s3) var(--s3) var(--s3) var(--s2);text-decoration:none;border-radius:var(--r-sup);transition:background var(--dur)}
.decisiones a:hover{background:var(--tinta-hover)}
.decisiones .glifo{margin-top:5px}
.decisiones .titulo{font-weight:500;overflow-wrap:anywhere}
.decisiones .motivo-linea{grid-column:2;color:var(--veta);overflow-wrap:anywhere}
.decisiones .meta{grid-column:2;color:var(--veta);font-size:13px;display:flex;flex-wrap:wrap;gap:4px var(--s3)}
.decisiones .lado{grid-column:3;grid-row:1 / span 3;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.decisiones .lado .mono{font-size:12px}
.proceso-tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.vence{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;white-space:nowrap}
.vence.urgente{color:var(--oro)}
.verificado{color:var(--bueno)}
/* glifo de ticket: rombo de oro (falla esperando reparación), con forma propia, no solo color */
.glifo-ticket{display:inline-block;width:11px;height:11px;border:2px solid var(--oro);transform:rotate(45deg);margin-left:3px}
.glifo-hecho{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--bueno)}
.glifo-rechazo{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--veta);position:relative}
.glifo-rechazo::after{content:"";position:absolute;left:-2px;right:-2px;top:3px;border-top:2px solid var(--veta);transform:rotate(-45deg)}
.glifo-excepcion{display:inline-block;width:11px;height:11px;background:var(--oro);transform:rotate(45deg);margin-left:3px}

/* filtros (Railway 07): arriba, en una línea, sin cajas pesadas */
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4) var(--s5);margin-top:var(--s6)}
.segmentos{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none}
.segmentos a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:var(--r-pill);text-decoration:none;
  color:var(--veta);border:1px solid transparent}
.segmentos a:hover{color:var(--marmol);background:var(--tinta)}
.segmentos a[aria-current="true"]{color:var(--marmol);border-color:var(--borde-control)}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label,.campo .rotulo{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--veta)}
.campo input,.campo select{font:inherit;font-size:14px;color:var(--marmol);background:var(--rds-input);border:1px solid var(--borde-control);
  border-radius:var(--r-sup);min-height:36px;padding:0 10px}
.campo input[type="search"]{min-width:220px}
.campo input:disabled,.campo select:disabled,.campo textarea:disabled{color:var(--veta);border-style:dashed;cursor:not-allowed}
.casilla{display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;cursor:pointer}
.casilla input{width:18px;height:18px;accent-color:var(--marmol)}
.btn-chico{min-height:36px;padding:0 16px;font-size:14px}

/* tablas de trabajo: planas, hairlines, números tabulares */
.tabla-envoltura{margin-top:var(--s5);overflow-x:auto}
table.tabla{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tabla caption{text-align:left;color:var(--veta);font-size:13px;padding-bottom:var(--s3)}
.tabla th{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--veta);
  text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--ceniza);white-space:nowrap}
.tabla td{padding:var(--s3);border-bottom:1px solid var(--ceniza);vertical-align:top}
.tabla tbody tr:hover{background:var(--tinta-hover)}
.tabla td a.titulo{color:var(--marmol);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.tabla td a.titulo:hover{text-decoration:underline;text-underline-offset:3px}
.tabla .sub{display:block;color:var(--veta);font-size:13px;margin-top:2px}
.tabla .num{text-align:right;white-space:nowrap}
.estado-celda{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
.sin-firma{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
  border:1px dashed var(--steel);border-radius:var(--r-pill);padding:0 6px;margin-left:6px;white-space:nowrap}

/* ───────── entrada: acceso y «¿con quién entras?» ───────── */
.entrada-app{max-width:640px;margin:0 auto;padding-top:var(--s7)}
.entrada-app .sello{width:88px;height:37px;display:block;margin-bottom:var(--s6)}
.entrada-app h1{font-size:clamp(28px,1.3rem + 1.4vw,38px)}
.entrada-app .bajada{font-size:16px}
.pasos-entrada{list-style:none;margin-top:var(--s6);border-top:1px solid var(--ceniza)}
.pasos-entrada li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--ceniza)}
.pasos-entrada .num{font-family:var(--f-cifra);font-size:26px;line-height:1;color:var(--veta)}
.pasos-entrada li.actual .num{color:var(--marmol)}
.pasos-entrada b{font-weight:500;display:block}
.pasos-entrada span{color:var(--veta)}
.personas{list-style:none;margin-top:var(--s6);border-top:1px solid var(--ceniza)}
.personas li{border-bottom:1px solid var(--ceniza)}
.personas a,.personas .persona-boton{width:100%;text-align:left;cursor:pointer;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:2px var(--s4);align-items:center;
  padding:var(--s4) var(--s3);text-decoration:none;border-radius:var(--r-sup);transition:background var(--dur)}
.personas a:hover,.personas .persona-boton:hover{background:var(--tinta-hover)}
.personas .nombre{font-weight:500;font-size:17px}
.personas .puesto{grid-column:2;color:var(--veta)}
.personas .rol-pill{grid-column:3;grid-row:1 / span 2}
.rol-pill{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--borde-control);
  color:var(--marmol);border-radius:var(--r-pill);padding:2px 10px;white-space:nowrap}

/* ───────── procesos, conexiones, ajustes, primeros pasos ───────── */
.proceso{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s4) var(--s7);padding:var(--s6) 0;
  border-top:1px solid var(--ceniza)}
.proceso:first-of-type{margin-top:var(--s6)}
.proceso h2{font-family:var(--f-texto);text-transform:none;letter-spacing:-.01em;font-size:22px;color:var(--marmol);font-weight:500}
.proceso .bajada{margin-top:var(--s2)}
.criterios{list-style:none;margin-top:var(--s4);display:grid;gap:var(--s2)}
.criterios li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--s2);align-items:baseline}
.criterios .quien-verifica{grid-column:2;color:var(--steel);font-size:13px}
.cifras-proceso{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);align-content:start}
.cifras-proceso .grande{grid-column:1 / -1}
.cifras-proceso b{display:block;font-family:var(--f-cifra);font-weight:400;font-size:30px;line-height:1.1}
.cifras-proceso .grande b{font-size:40px}
.cifras-proceso span{color:var(--veta);font-size:13px}
.cifras-proceso .oro b{color:var(--oro)}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.conexion{padding:var(--s6) 0;border-top:1px solid var(--ceniza);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s4) var(--s7)}
.conexion:first-of-type{margin-top:var(--s6)}
.conexion h2{font-family:var(--f-texto);text-transform:none;letter-spacing:-.01em;font-size:20px;color:var(--marmol);font-weight:500;
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.permisos{list-style:none;margin-top:var(--s3);display:grid;gap:4px}
.permisos li{display:flex;gap:var(--s2)}
.permisos li::before{content:"✓";color:var(--bueno)}
.ficha{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s2) var(--s4);font-size:14px;align-content:start}
.ficha dt{color:var(--veta)}
.ficha dd{overflow-wrap:anywhere}
.error-conexion{grid-column:1 / -1;color:var(--oro)}
.pasos-onb{list-style:none;counter-reset:paso;margin-top:var(--s6)}
.pasos-onb > li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--ceniza)}
.pasos-onb .num{font-family:var(--f-cifra);font-size:34px;line-height:1;color:var(--veta)}
.pasos-onb h2{font-family:var(--f-texto);text-transform:none;letter-spacing:0;font-size:18px;color:var(--marmol);font-weight:500}
.pasos-onb .campos{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s3)}
.pasos-onb .campo{flex:1 1 240px}
.pasos-onb textarea{font:inherit;font-size:14px;background:var(--tinta);border:1px dashed var(--veta);border-radius:var(--r-sup);
  color:var(--veta);padding:8px 10px;min-height:64px;resize:none}
.regla-familia{border-left:2px solid var(--navy-alto);padding:var(--s2) var(--s4);margin-top:var(--s3)}

/* ticket: hora límite, opciones en filas e historial (Higgsfield 06 · Better Stack 09) */
.limite b{display:block;font-family:var(--f-cifra);font-weight:400;font-size:40px;line-height:1.05;color:var(--oro)}
.limite span{color:var(--veta);font-size:13px}
.opciones-ticket{border:0;display:grid;gap:0;margin-top:var(--s2)}
.opciones-ticket legend{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--veta);
  margin-bottom:var(--s3)}
.opcion{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:2px var(--s3);align-items:center;padding:var(--s3) var(--s2);
  border-top:1px solid var(--ceniza);cursor:not-allowed}
.opcion:last-of-type{border-bottom:1px solid var(--ceniza)}
.opcion input{width:18px;height:18px}
.opcion .texto{font-weight:500}
.opcion .detalle-op{grid-column:2 / -1;color:var(--veta);font-size:14px}
.opcion.sugerida{background:var(--tinta);box-shadow:inset 2px 0 0 var(--marmol)}
.sugerida-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--marmol);
  border-radius:var(--r-pill);padding:1px 8px}
.historial{list-style:none;border-left:2px solid var(--ceniza);margin:var(--s3) 0 0 5px}
.historial li{position:relative;padding:0 0 var(--s3) var(--s4);font-size:14px}
.historial li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--obsidiana);border:2px solid var(--steel)}
.historial li.persona::before{background:var(--marmol);border-color:var(--marmol)}
.historial li.ia::before{background:var(--rds-bright);border-color:var(--rds-bright)}
.historial li.regla::before{border-radius:1px;transform:rotate(45deg);width:9px;height:9px;left:-6px}
.historial time{color:var(--veta);font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;display:block}
.historial .quien-h{color:var(--veta)}

/* bitácora: integridad y voces (guía §4) */
.integridad-app{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.integridad-app .punto{width:10px;height:10px;border-radius:50%;background:var(--bueno)}
.integridad-app.rota .punto{background:var(--oro);border-radius:1px;transform:rotate(45deg)}
.integridad-app.rota{color:var(--oro)}
.integridad-app .sello-texto{color:var(--steel);font-size:13px}
.evento.ia::before{background:var(--rds-bright);border-color:var(--rds-bright)}
.evento.regla::before{border-radius:1px;transform:rotate(45deg);width:10px;height:10px;left:-6px;border-color:var(--steel)}
.evento.falla::before{border-color:var(--oro)}
.evento.falla .frase{color:var(--oro)}
.evento .proceso-tag{grid-column:1}

/* ───────── 821–1280 px (handoff v10): el carril queda fijo en iconos; su nombre sale al pasar (title), no se abre encima
   del contenido. La cabecera lleva el logo con su nombre, que el carril ya no muestra en estos anchos. ───────── */
@media (min-width:821px) and (max-width:1280px){
  .riel:hover,.riel:focus-within{width:64px;box-shadow:none}
  /* fuera del flujo (no solo invisibles): así nada desborda el carril de 64 px ni lo desplaza al pasar o al enfocar */
  .riel .lb,.riel .empresa,.riel .grupo-nav h2,.riel .hf-logo-texto,.riel .persona-sesion > span:not(.avatar),.riel .cuenta.info{display:none}
}

/* ───────── móvil (≤ 820 px, handoff) y zoom 200 %: una columna; el riel pasa a dock inferior flotante ───────── */
@media (max-width:820px){
  .lienzo{margin-left:0;padding-bottom:96px}
  .riel,.riel:hover,.riel:focus-within{left:12px;right:12px;top:auto;bottom:12px;width:auto;height:66px;box-shadow:var(--hf-sombra-flotante)}
  .riel-interior{flex-direction:row;align-items:center;gap:4px;padding:9px;overflow-x:auto;overflow-y:hidden}
  .riel .hf-logo,.riel .empresa,.riel .grupo-nav h2{display:none}
  .riel .grupo-nav + .grupo-nav{margin:0 0 0 4px;padding:0 0 0 4px;border-top:0;border-left:1px solid var(--hf-linea)}
  .riel ul{display:flex;gap:4px}
  .riel a.entrada{width:46px;padding-left:12px;flex:none}
  .riel a.entrada[aria-current="page"]{background:var(--hf-verdin);color:var(--hf-sobre-verdin)}   /* dock: la activa en verdín */
  .riel .cuenta.info{display:none}
  .riel .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .riel .pie{margin:0 0 0 auto;padding:0 0 0 4px;border-top:0;border-left:1px solid var(--hf-linea)}
  .persona-sesion{grid-template-columns:46px;padding:0}
  .persona-sesion > span:not(.avatar){display:none}
  .cabecera{padding:var(--hf-e3) var(--hf-e4) 0}
  .cabecera .hf-logo{display:inline-flex}
  .cabecera .hf-uso .hf-uso-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* 13-nov: compacta, sigue visible */
  .cabecera .hf-uso .hf-uso-barra{width:56px}
  .lienzo main{padding:var(--hf-e3) var(--hf-e4) var(--hf-e7)}
  .proceso,.conexion{grid-template-columns:minmax(0,1fr)}
  .decisiones a{grid-template-columns:22px minmax(0,1fr)}
  .decisiones .lado{grid-column:2;grid-row:auto;align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap}
}
/* estados neutros (rechazo, sin datos): contorno veta, sin color de semáforo */
.insignia.neutra{border-color:var(--veta);color:var(--veta)}
.insignia.neutra .anillo{border-color:var(--veta)}
.sub{color:var(--veta);font-size:13px}
a.btn{text-decoration:none}
.proceso .kicker{margin-top:var(--s5)}
body[data-vista="acceso"] .lienzo main,body[data-vista="persona"] .lienzo main{max-width:704px;margin:0 auto;padding-top:var(--s7)}
.entrada-app{padding-top:var(--s5)}
.conexion h2 .etiqueta{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}