/* Barra superior común (tablero y documento) y menú lateral que se desliza desde la derecha.
   Usa los tokens de color de app.css. */
.barra{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;
  margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
  padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.barra-marca{font:800 1.05rem/1 var(--f-display);font-stretch:80%;color:var(--ink);text-decoration:none;white-space:nowrap}
.barra-nav{display:flex;gap:4px;flex:1;min-width:0}
.barra-nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:3px;font-weight:500}
.barra-nav a:hover{color:var(--ink);background:var(--wash)}
.barra-nav a[aria-current="page"]{color:var(--ink);background:var(--wash)}
.barra-menu{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:99px;padding:3px 12px 3px 3px;cursor:pointer;color:var(--ink);font-weight:500}
.barra-menu:hover{border-color:var(--muted)}

.panel-fondo{position:fixed;inset:0;z-index:19;background:rgba(10,12,16,.4);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.panel-fondo.abierto{opacity:1;visibility:visible}
.panel{position:fixed;top:0;right:0;bottom:0;z-index:20;width:min(340px,100vw);background:var(--surface);border-left:1px solid var(--line);
  padding:calc(18px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 20px;
  display:flex;flex-direction:column;gap:22px;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility .22s;overflow-y:auto}
.panel.abierto{transform:none;visibility:visible}
.panel-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.panel-cab b{display:block;font-weight:600}
.panel-cab small{display:block;font:500 .72rem/1.4 var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.panel-grupo{display:grid;gap:10px;justify-items:start}
.panel-grupo .btn{width:100%;text-align:left}
.segmento{display:flex;width:100%;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.segmento button{flex:1;background:none;border:0;padding:8px 6px;cursor:pointer;color:var(--muted);font-weight:500}
.segmento button+button{border-left:1px solid var(--line)}
.segmento button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
/* Para que la barra se vea igual también en páginas que no cargan app.css (el anexo de Procusto) */
body{margin:0}
.aviso-anexo{max-width:1180px;margin:18px auto 0;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--warn,#9a6200);background:var(--surface);color:var(--ink);font:15px/1.5 var(--f-body,system-ui,sans-serif)}
.aviso-anexo a{color:inherit;font-weight:600}
.barra,.panel{font-family:var(--f-body,system-ui,sans-serif);font-size:15px;line-height:1.5;color:var(--ink)}
.barra-nav a:hover,.barra-nav a[aria-current="page"]{background:var(--wash,var(--accent-wash))}
.barra .av{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font:600 .62rem/1 var(--f-mono,monospace);background:var(--wash,var(--accent-wash));border:1px solid var(--line)}
.panel .eyebrow{font:500 .74rem/1 var(--f-mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.panel .btn{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:7px 12px;cursor:pointer;font:inherit;font-weight:500;text-decoration:none;display:block}
.panel .btn.link{border:0;background:none;padding:4px 6px;color:var(--info,var(--ink));width:auto}
@media (prefers-reduced-motion:reduce){.panel,.panel-fondo{transition:none}}
@media (max-width:560px){.barra-marca{font-size:.95rem}.barra-menu span:last-child{display:none}.barra-menu{padding:3px}}