/* La cabecera de todas las pantallas de /app, una sola (estilo D, la de Inicio). La cargan las pantallas de la interfaz
   y las de ampe/estilo.css: todo va bajo .cab para no tocar el resto de la página, y en las segundas los tokens del
   tema llegan a .cab por /app/interfaz/tema-cabecera.css. Ni un color literal: todo sale del tema. */
@font-face{font-family:"IBM Plex Sans";src:url("/app/ampe/fuentes/ibm-plex-sans-var.woff2") format("woff2");font-weight:100 700;font-display:swap}
.cab{--sombra-flota:0 14px 36px color-mix(in srgb,var(--sombra) 22%,transparent);
  display:flex;align-items:stretch;gap:18px;height:var(--alto-menu,44px);box-sizing:border-box;padding:0 12px 0 14px;background:var(--caja);border-top:3px solid var(--marca);border-bottom:1px solid var(--linea);position:relative;z-index:20;
  font:400 14px/1.45 "IBM Plex Sans",system-ui,sans-serif;color:var(--tinta)}
.cab *{box-sizing:border-box}
.cab svg{width:14px;height:14px;flex:none}
/* La sombra solo con el foco: escondido arriba, su sombra de 50 px asomaba sobre la marca como una mancha gris. */
.cab .saltar{position:absolute;left:8px;top:-60px;z-index:90;background:var(--caja);padding:8px 12px;border-radius:6px;color:var(--enlace)}
.cab .saltar:focus{top:8px;box-shadow:var(--sombra-flota)}
.cab .marca{font-family:inherit;display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:.6px;text-decoration:none;color:var(--tinta);white-space:nowrap}
.cab .marca img{width:22px;height:22px;display:block}
/* La versión que corre, bajo «AMPE» y en todas las pantallas (api/version.py): el commit de la imagen y la fecha de los
   datos, pequeña pero legible en una captura. Sin color de estado: es un dato, no un aviso. */
.cab .marca-caja{display:flex;flex-direction:column;justify-content:center;flex:none;min-width:0}
.cab .marca-caja .marca{line-height:1.25}
.cab .version-app{padding-left:31px;margin-top:-1px;font-size:11px;line-height:1.2;color:var(--tinta-3);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.1px}
/* La marca de la instalación en el sitio de la de AMPE (decisión 2026-10-27-la-marca-por-instalacion-puede-ocupar-el-
   sitio-de-ampe): su logotipo a 30 px de alto, sin deformarse, y la versión a su lado tras una línea fina. */
.cab .marca-caja.con-cliente{flex-direction:row;align-items:center;gap:12px}
.cab .marca-de-la-instalacion{gap:0;border-radius:4px}
.cab .marca-de-la-instalacion:focus-visible{outline:2px solid var(--enlace);outline-offset:3px}
.cab .marca-de-la-instalacion img{width:auto;height:30px;max-width:168px;object-fit:contain;object-position:left center}
.cab .marca-de-la-instalacion .marca-nombre{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.cab .marca-caja.con-cliente .version-app{padding:2px 0 2px 12px;margin:0;border-left:1px solid var(--linea-2)}
.cab .marca-cliente{display:flex;align-items:center;padding-left:14px;margin-left:-4px;border-left:1px solid var(--linea-2)}
.cab .marca-cliente img{height:26px;width:auto;max-width:120px;display:block}
.cab .marca-cliente~.dcha .planta-sel select{max-width:180px;text-overflow:ellipsis}
.cab .nav{display:flex;gap:2px;min-width:0}
.cab .nav a{display:flex;align-items:center;padding:0 14px;font-weight:500;color:var(--tinta-3);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cab .nav a:hover{color:var(--tinta)}
.cab .nav a[aria-current]{color:var(--tinta);border-bottom-color:var(--marca);font-weight:600}
.cab .dcha{margin-left:auto;display:flex;align-items:center;gap:6px}
.cab .dcha>.nav{align-self:stretch}
.cab .planta-sel{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--tinta-3);padding-right:6px}
.cab .planta-sel select{height:30px;border:1px solid var(--linea);border-radius:7px;background:var(--caja-2);padding:0 28px 0 10px;font-weight:600;font-size:13px;color:var(--tinta);cursor:pointer}
.cab .cuenta{position:relative;display:flex;align-items:center;padding-left:10px;border-left:1px solid var(--linea-2)}
.cab .cuenta>button{display:flex;align-items:center;gap:9px;height:36px;border:1px solid transparent;background:none;border-radius:8px;padding:0 8px;cursor:pointer;font:inherit;font-size:13px;color:inherit;text-align:left}
.cab .cuenta>button:hover,.cab .cuenta>button[aria-expanded=true]{border-color:var(--linea);background:var(--caja-2)}
.cab .iniciales{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--elegida);color:var(--marca);font-weight:700;font-size:12px;flex:none}
.cab .cuenta small{display:block;color:var(--tinta-3);font-size:11.5px;line-height:1.2}
.cab .cuenta b{display:block;font-weight:600;line-height:1.2}
.cab .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:250px;background:var(--caja);border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra-flota);padding:6px;display:grid;gap:2px}
.cab .menu[hidden]{display:none}
.cab .menu>small{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--tinta-3)}
.cab .menu a,.cab .menu button{display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 10px;border:0;background:none;border-radius:6px;text-decoration:none;color:var(--tinta);font:inherit;font-size:13px;cursor:pointer;text-align:left;width:100%}
.cab .menu a:hover,.cab .menu button:hover,.cab .menu a:focus-visible,.cab .menu button:focus-visible{background:var(--caja-2)}
.cab .menu hr{border:0;border-top:1px solid var(--linea-2);margin:4px 0}
.cab .menu .gris{padding:2px 10px 6px;color:var(--tinta-3)}
.cab .menu form{margin:0}
.cab .menu .menu-opciones{display:grid;gap:2px;border-top:1px solid var(--linea-2);margin-top:4px;padding-top:2px}
.cab .menu .menu-opciones>small{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--tinta-3)}
.cab .menu .menu-opciones button::before{content:"";flex:none;width:12px;height:12px;border:1.5px solid var(--tinta-3);border-radius:50%}
.cab .menu .menu-opciones button[aria-checked=true]::before{background:var(--marca);border-color:var(--marca);box-shadow:inset 0 0 0 2px var(--caja)}
.cab .menu .menu-opciones .ayuda-opcion{padding:0 10px 6px 30px;margin-top:-4px;font-size:11.5px;line-height:1.35;color:var(--tinta-3)}
.cab .planta-sel b{font-size:13px;color:var(--tinta)}
/* La versión del plan en curso, junto a la planta y en todas las pantallas (batería 4 de la demo de bebidas): «En curso
   Versión 6 · semana del 19-oct», que abre su Gantt. Entera en su globo y en su nombre accesible: por debajo de 1280 se
   queda en «En curso Versión 6», y en el teléfono en «Versión 6». */
.cab .en-curso-cab{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;margin-right:2px;border-radius:7px;font-size:12.5px;color:var(--tinta-3);text-decoration:none;white-space:nowrap}
.cab a.en-curso-cab:hover{background:var(--caja-2)}
.cab .en-curso-cab b{font-size:13px;font-weight:600;color:var(--tinta)}
.cab .en-curso-cab small{font-size:12.5px;color:var(--tinta-3)}
.cab .en-curso-cab small::before{content:"· "}
@media (max-width:1279px){.cab .en-curso-cab small{display:none}}
.cab :focus-visible{outline:2px solid var(--foco);outline-offset:2px}
/* El indicador de uso (docs/decisions/2026-10-14-indicador-de-uso-en-la-cabecera.md). Una línea, 32 px, entre Ayuda y
   la cuenta. El nivel va en palabra y en la forma de los puntos (relleno es plaza calculando, hueco es libre), no solo en
   el color. Las personas van en tinta neutra: no son parte del semáforo. Nada se mueve. */
.cab .uso{position:relative;display:flex;align-items:center;padding-left:8px}
.cab .uso[hidden]{display:none}
.cab .uso-pastilla{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--linea);border-radius:8px;background:var(--caja-2);font:inherit;font-size:13px;color:var(--tinta);cursor:pointer;white-space:nowrap}
.cab .uso-pastilla:hover{border-color:var(--tinta-3)}
.cab .uso-pastilla[data-nivel=disponible]{background:var(--ok-suave);border-color:var(--ok-borde)}
.cab .uso-pastilla[data-nivel=completo]{background:var(--vigilar-suave);border-color:var(--vigilar-borde)}
.cab .uso-pastilla[data-nivel=con_cola]{background:var(--mal-suave);border-color:var(--mal-borde)}
.cab .uso-pastilla[data-nivel=sin-datos]{background:var(--caja);border-style:dashed;border-color:var(--tinta-3)}
.cab .uso-puntos{display:flex;gap:3px}
.cab .uso-puntos i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--tinta-3);box-sizing:border-box}
.cab .uso-puntos i.en-uso{border-color:currentColor;background:currentColor}
.cab .uso-pastilla[data-nivel=disponible] .uso-puntos,.cab .uso-pastilla[data-nivel=disponible] .uso-nivel{color:var(--ok)}
.cab .uso-pastilla[data-nivel=completo] .uso-puntos,.cab .uso-pastilla[data-nivel=completo] .uso-nivel{color:var(--vigilar-texto)}
.cab .uso-pastilla[data-nivel=con_cola] .uso-puntos,.cab .uso-pastilla[data-nivel=con_cola] .uso-nivel,.cab .uso-pastilla[data-nivel=con_cola] .uso-cola{color:var(--mal-texto)}
.cab .uso-pastilla[data-nivel=sin-datos] .uso-nivel{color:var(--tinta-3);font-weight:500}
.cab .uso-nivel{font-weight:600}
.cab .uso-cola{font-weight:600;padding-left:8px;border-left:1px solid var(--linea)}
.cab .uso-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:340px;max-width:calc(100vw - 24px);background:var(--caja);border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra-flota);padding:12px 14px;display:grid;gap:10px;font-size:13px;line-height:1.45}
.cab .uso-panel[hidden]{display:none}
.cab .uso-panel h2{margin:0;font-size:15px;font-weight:600}
.cab .uso-panel h2:focus{outline:none}
.cab .uso-panel h2:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.cab .uso-panel h3{margin:0 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--tinta-3)}
.cab .uso-panel p{margin:0}
.cab .uso-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cab .uso-cerrar,.cab .uso-reintentar{min-height:30px;padding:0 10px;border:1px solid var(--linea);border-radius:6px;background:var(--caja-2);font:inherit;font-size:12.5px;color:var(--tinta);cursor:pointer}
.cab .uso-cifras{margin:0;display:grid;gap:4px}
.cab .uso-cifras div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--linea-2);padding-bottom:4px}
.cab .uso-cifras dt{color:var(--tinta-3)}
.cab .uso-cifras dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.cab .uso-tuyo p+p{margin-top:2px}
.cab .uso-gris,.cab .uso-pie{color:var(--tinta-3);font-size:12px}
.cab .uso-hacer{background:var(--info-suave);border-left:3px solid var(--info);padding:8px 10px;border-radius:4px}
.cab .uso-error{display:grid;gap:6px;background:var(--caja-2);border:1px dashed var(--tinta-3);border-radius:6px;padding:8px 10px}
.cab .uso-error button{justify-self:start}
.cab .uso-leyenda{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:12.5px}
.cab .uso-leyenda li{padding-left:14px;position:relative}
.cab .uso-leyenda li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%}
.cab .uso-leyenda li[data-nivel=disponible]::before{border:1.5px solid var(--ok);box-sizing:border-box}
.cab .uso-leyenda li[data-nivel=completo]::before{background:var(--vigilar)}
.cab .uso-leyenda li[data-nivel=con_cola]::before{background:var(--mal);box-shadow:0 0 0 2px var(--mal-suave),0 0 0 3px var(--mal)}
.cab .uso-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:760px){
  .cab{flex-wrap:wrap;height:auto;padding:0 12px;gap:0 10px}
  .cab .marca-caja{height:46px}
  .cab .marca{font-size:16px}
  .cab .marca-cliente{height:46px;padding-left:8px;margin-left:-4px}
  .cab .marca-de-la-instalacion img{height:28px;max-width:120px}
  .cab .marca-caja.con-cliente{gap:8px}
  .cab .marca-caja.con-cliente .version-app{padding-left:8px}
  .cab .marca-cliente~.dcha .planta-sel{padding-right:2px}
  .cab .marca-cliente img{height:18px}
  .cab .marca-cliente~.dcha .planta-sel select{max-width:108px;padding-left:8px}
  .cab .marca-cliente~.dcha>.nav a{padding:0 4px}
  .cab .nav-principal{order:3;width:100%;border-top:1px solid var(--linea-2);overflow-x:auto;scrollbar-width:none}
  .cab .nav-principal a{flex:1;justify-content:center;padding:10px 6px;min-height:42px}
  .cab .dcha{gap:2px}
  .cab .planta-sel>span{display:none}
  .cab .en-curso-cab>span{display:none}
  .cab .en-curso-cab{padding:0 4px}
  /* El nombre y el papel se ocultan a la vista y no al lector: con display:none el botón se quedaba sin nombre
     accesible, porque las iniciales van con aria-hidden (axe button-name, ADP-754). */
  .cab .cuenta>button>span:not(.iniciales){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cab .planta-sel select{max-width:128px;padding-right:22px}
  .cab .dcha>.nav a{padding:0 6px}
  .cab .cuenta{border:0;padding-left:0}
  /* En móvil, los puntos y la cola. La palabra y las personas siguen en el nombre accesible y en el desplegable. */
  .cab .uso{padding-left:2px}
  .cab .uso-pastilla{padding:0 7px;gap:5px}
  .cab .uso-nivel{display:none}
  .cab .uso-panel{position:fixed;left:12px;right:12px;top:96px;width:auto;max-height:calc(100vh - 110px);overflow:auto}
}