/* nav.css — Stitch nav r2 (Asistencia). Reemplaza todo el bloque posterior al marcador. */

/* ---------- tokens + contexto ---------- */
body.fiaca-stitch{
  --nav-navy:#0d1f3c;
  --nav-orange:#fc7728;
  --nav-surface:#fbf9f4;
  --nav-active:rgba(255,255,255,.10);
  --nav-hover:rgba(255,255,255,.06);
  --nav-ink:rgba(255,255,255,.76);
  --nav-line:rgba(255,255,255,.10);
  --nav-w:256px;
  --nav-rail:64px;
  --nav-top:64px;
  --nav-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  margin:0;
  background:var(--nav-surface);
  color:#1b1c19;
  font-family:var(--nav-font);
}
body.fiaca-stitch .topbar-sub,
body.fiaca-stitch .nav-group-label{display:none;}

/* ---------- layout: rows 64px 1fr, sin areas heredadas ---------- */
body.fiaca-stitch .app{
  display:grid;
  grid-template-areas:none;
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  grid-template-rows:var(--nav-top) 1fr;
  gap:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--nav-surface);
}
body.fiaca-stitch .topbar{grid-area:auto;grid-column:1/-1;grid-row:1;}
body.fiaca-stitch #fiaca-sidebar{grid-area:auto;grid-column:1;grid-row:2;}

/* ---------- topbar sticky 64px, marca sobre tramo navy ---------- */
body.fiaca-stitch .topbar{
  position:sticky;top:0;z-index:40;
  box-sizing:border-box;
  height:var(--nav-top);min-height:var(--nav-top);max-height:var(--nav-top);
  display:flex;align-items:center;gap:12px;
  margin:0;padding:0 16px 0 0;border:0;border-bottom:1px solid rgba(13,31,60,.10);
  background:#fff;font-size:14px;
}
body.fiaca-stitch .topbar-brand{
  box-sizing:border-box;
  flex:0 0 var(--nav-w);width:var(--nav-w);height:var(--nav-top);
  display:flex;align-items:center;gap:10px;padding:0 16px;
  background:var(--nav-navy);color:#fff;text-decoration:none;
}
body.fiaca-stitch .topbar-brand .fiaca-brand-mark{width:28px;height:28px;flex:0 0 28px;}
body.fiaca-stitch .topbar-title{
  font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1;color:#fff;
}
body.fiaca-stitch .topbar-user{
  display:flex;align-items:center;gap:8px;margin-left:auto;
}
body.fiaca-stitch .topbar-user .btn{
  height:40px;padding:0 14px;display:inline-flex;align-items:center;
  border-radius:10px;border:1px solid rgba(13,31,60,.14);
  background:#fff;color:var(--nav-navy);
  font:600 14px/1 var(--nav-font);text-decoration:none;
}
body.fiaca-stitch .topbar-user .btn:hover{background:#f0eee9;}

/* toggle: siempre visible, fuera del sidebar; reset del width:44 heredado */
body.fiaca-stitch #fiaca-nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;
  width:auto;min-width:44px;height:40px;padding:0 12px;
  border:1px solid rgba(13,31,60,.18);border-radius:10px;
  background:#fff;color:var(--nav-navy);
  font:600 14px/1 var(--nav-font);cursor:pointer;
}
body.fiaca-stitch #fiaca-nav-toggle:hover{background:#f0eee9;border-color:var(--nav-orange);}
body.fiaca-stitch #fiaca-nav-toggle .fiaca-nav-icon{
  display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
}
body.fiaca-stitch #fiaca-nav-toggle .fiaca-nav-toggle-text{font:inherit;}

/* ---------- sidebar: sticky bajo el topbar, nav con scroll propio, pie fijo ---------- */
body.fiaca-stitch #fiaca-sidebar{
  position:sticky;top:var(--nav-top);align-self:start;z-index:30;
  box-sizing:border-box;
  width:var(--nav-w);
  height:calc(100vh - var(--nav-top));
  height:calc(100dvh - var(--nav-top));
  display:flex;flex-direction:column;
  margin:0;padding:0;border:0;border-right:1px solid rgba(13,31,60,.10);
  background:var(--nav-navy);color:var(--nav-ink);
  font-family:var(--nav-font);font-size:14px;
  overflow:visible;
  transition:width .16s ease;
}
body.fiaca-stitch #fiaca-sidebar .nav-list{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
  list-style:none;margin:0;padding:10px 8px;
  display:flex;flex-direction:column;gap:2px;
}
body.fiaca-stitch #fiaca-sidebar .nav-list>li,
body.fiaca-stitch #fiaca-sidebar .nav-sublist>li,
body.fiaca-stitch #fiaca-sidebar .nav-footer-list>li{list-style:none;margin:0;padding:0;}

body.fiaca-stitch #fiaca-sidebar .nav-list a,
body.fiaca-stitch #fiaca-sidebar .nav-footer-list a,
body.fiaca-stitch #fiaca-sidebar .fiaca-account-trigger{
  box-sizing:border-box;
  display:flex;align-items:center;gap:10px;
  min-height:40px;padding:8px 10px;border-radius:8px;
  color:var(--nav-ink);text-decoration:none;
  font-size:14px;font-weight:500;line-height:1.2;
  white-space:nowrap;overflow:hidden;
  background:transparent;border:0;cursor:pointer;
}
body.fiaca-stitch #fiaca-sidebar .nav-list a:hover,
body.fiaca-stitch #fiaca-sidebar .nav-footer-list a:hover,
body.fiaca-stitch #fiaca-sidebar .fiaca-account-trigger:hover{
  background:var(--nav-hover);color:#fff;
}
body.fiaca-stitch #fiaca-sidebar a[aria-current="page"]{
  background:var(--nav-active);color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--nav-orange);
}
body.fiaca-stitch #fiaca-sidebar a:focus-visible,
body.fiaca-stitch #fiaca-sidebar summary:focus-visible,
body.fiaca-stitch #fiaca-nav-toggle:focus-visible{
  outline:2px solid var(--nav-orange);outline-offset:2px;
}
body.fiaca-stitch #fiaca-sidebar .nav-ico{
  flex:0 0 20px;width:20px;height:20px;
}
body.fiaca-stitch #fiaca-sidebar .nav-text{
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}

/* submenu: sangria 24px + borde tenue */
body.fiaca-stitch #fiaca-sidebar .nav-sublist{
  list-style:none;margin:2px 0 4px 24px;padding:0 0 0 10px;
  border-left:1px solid var(--nav-line);
  display:flex;flex-direction:column;gap:2px;
}
body.fiaca-stitch #fiaca-sidebar .nav-sublist a{font-weight:400;}

/* ---------- pie: opciones + cuenta, visibles sin scrollear ---------- */
body.fiaca-stitch #fiaca-sidebar .sidebar-footer{
  flex:0 0 auto;position:relative;overflow:visible;
  display:flex;flex-direction:column;gap:2px;
  margin:0;padding:8px;
  border-top:1px solid var(--nav-line);background:var(--nav-navy);
}
body.fiaca-stitch #fiaca-sidebar .nav-footer-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
}
body.fiaca-stitch #fiaca-sidebar #fiaca-account{position:relative;width:100%;}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-trigger{width:100%;list-style:none;}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-trigger::-webkit-details-marker{display:none;}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-menu{
  position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:60;
  box-sizing:border-box;min-width:220px;
  display:flex;flex-direction:column;gap:4px;padding:8px;
  border:1px solid rgba(13,31,60,.12);border-radius:12px;
  background:#fff;color:var(--nav-navy);
  box-shadow:0 14px 34px rgba(13,31,60,.24);
}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-name{
  margin:2px 6px 4px;font-size:12px;font-weight:600;color:#44474d;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-menu .btn{
  display:flex;align-items:center;justify-content:flex-start;
  width:100%;min-height:40px;padding:8px 10px;
  border:0;border-radius:8px;background:transparent;
  color:var(--nav-navy);font:500 14px/1.2 var(--nav-font);
  text-align:left;text-decoration:none;cursor:pointer;
}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-menu .btn:hover{background:#f0eee9;}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-menu [data-fiaca-hr-logout]{
  color:#a04100;font-weight:600;
}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-status{
  margin:2px 6px 0;font-size:12px;color:#44474d;
}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-status:empty{display:none;}

/* ---------- desktop colapsado: rail 64px solo iconos (nunca display:none) ---------- */
@media (min-width:821px){
  body.fiaca-stitch .app.fiaca-nav-collapsed{
    grid-template-columns:var(--nav-rail) minmax(0,1fr);
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar{
    display:flex;width:var(--nav-rail);overflow:visible;
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed .topbar-brand{
    flex:0 0 var(--nav-rail);width:var(--nav-rail);padding:0;justify-content:center;
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed .topbar-title,
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .nav-text{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;white-space:nowrap;clip-path:inset(50%);
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .nav-list{padding:10px 6px;}
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .nav-list a,
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .nav-footer-list a,
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .fiaca-account-trigger{
    justify-content:center;gap:0;padding:8px 0;
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .nav-sublist{
    margin:4px 0;padding:4px 0;border-left:0;
    border-top:1px solid var(--nav-line);border-bottom:1px solid var(--nav-line);
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .sidebar-footer{padding:8px 6px;}
  /* popup hacia la derecha del rail, para no recortarse */
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .fiaca-account-menu{
    left:calc(100% + 12px);right:auto;bottom:0;width:248px;
  }
}

/* ---------- mobile <=820: barra horizontal desplazable ---------- */
@media (max-width:820px){
  body.fiaca-stitch .app{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--nav-top) auto minmax(0,1fr);
  }
  body.fiaca-stitch .topbar{padding:0 12px 0 0;}
  body.fiaca-stitch .topbar-brand{flex:0 0 auto;width:auto;padding:0 14px;}
  body.fiaca-stitch #fiaca-sidebar{grid-column:1;grid-row:2;}

  body.fiaca-stitch #fiaca-sidebar{
    position:sticky;top:var(--nav-top);
    width:auto;height:auto;max-height:calc(100dvh - var(--nav-top));
    border-right:0;border-bottom:1px solid rgba(13,31,60,.10);
    overflow:visible;
  }
  body.fiaca-stitch #fiaca-sidebar .nav-list{
    flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;align-items:center;
    overflow-x:auto;overflow-y:hidden;padding:8px;gap:4px;
  }
  body.fiaca-stitch #fiaca-sidebar .nav-group.has-sub{
    display:flex;flex-direction:row;align-items:center;gap:4px;
  }
  body.fiaca-stitch #fiaca-sidebar .nav-sublist{
    flex-direction:row;align-items:center;
    margin:0 0 0 8px;padding:0 0 0 8px;
    border-left:1px solid var(--nav-line);border-top:0;
  }
  body.fiaca-stitch #fiaca-sidebar .sidebar-footer{
    flex:0 0 auto;border-top:1px solid var(--nav-line);
  }
  body.fiaca-stitch #fiaca-sidebar .nav-footer-list{
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px;
  }
  body.fiaca-stitch #fiaca-sidebar .fiaca-account-menu{
    left:auto;right:0;bottom:auto;top:calc(100% + 8px);width:248px;
  }
  /* en mobile el toggle si oculta/muestra el nav completo (nav + pie) */
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar{display:none;}
}

@media (prefers-reduced-motion:reduce){
  body.fiaca-stitch #fiaca-sidebar{transition:none;}
}

/* 1) Targets táctiles >= 42px (antes 40) */
body.fiaca-stitch .topbar-user .btn, body.fiaca-stitch #fiaca-nav-toggle, body.fiaca-stitch #fiaca-sidebar .nav-list a, body.fiaca-stitch #fiaca-sidebar .nav-footer-list a, body.fiaca-stitch #fiaca-sidebar .fiaca-account-trigger {
  min-height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
}

/* 2) Nav móvil: ni los li ni el grupo nav/sublista se encogen */
@media (max-width: 820px) {
  body.fiaca-stitch #fiaca-sidebar .nav-list > li, body.fiaca-stitch #fiaca-sidebar .nav-sublist, body.fiaca-stitch #fiaca-sidebar .nav-sublist > li, body.fiaca-stitch #fiaca-sidebar .nav-group {
    flex-shrink: 0;
  }
}

/* 3) Popup de cuenta en desktop: anclaje solo por abajo */
@media (min-width: 821px) {
  body.fiaca-stitch #fiaca-sidebar #fiaca-account .fiaca-account-menu {
    top: auto;                  /* anula el top: calc(100%) compartido */
    bottom: calc(100% + 4px);
  }
  /* colapsado */
  body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar #fiaca-account .fiaca-account-menu {
    top: auto;
    bottom: 0;
  }
}

/* === patch menú FIACA === */
/* Menú FIACA: una sola propiedad animada; grid, sidebar y marca derivan de ella. */
@property --fiaca-menu-size   { syntax: '<length>'; inherits: true; initial-value: 256px; }
@property --fiaca-arrow-inset { syntax: '<length>'; inherits: true; initial-value: 46px; }

@media (min-width: 821px) {
  body.fiaca-stitch .app[class] {
    --fiaca-menu-size: 256px;
    --fiaca-arrow-inset: 46px;
    grid-template-columns: var(--fiaca-menu-size, 256px) minmax(0, 1fr);
    transition: --fiaca-menu-size 180ms ease, --fiaca-arrow-inset 180ms ease;
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed[class] {
    --fiaca-menu-size: 64px;
    --fiaca-arrow-inset: 0px;
  }

  /* sidebar: solo sigue la columna; se anula únicamente su transición de width */
  body.fiaca-stitch .app #fiaca-sidebar.sidebar {
    width: 100%;
    transition: width 0s linear;
  }

  /* marca: mismo ancho que el rail, sin transición propia */
  body.fiaca-stitch .app .topbar .topbar-brand,
  body.fiaca-stitch .app.fiaca-nav-collapsed .topbar .topbar-brand {
    width: var(--fiaca-menu-size, 256px);
    flex: 0 0 auto;
    flex-basis: var(--fiaca-menu-size, 256px);
    transition: width 0s linear, flex-basis 0s linear;
  }
  body.fiaca-stitch .app:not(.fiaca-nav-collapsed) .topbar .topbar-brand {
    padding-right: 48px;              /* reserva el hueco de la flecha */
  }
  body.fiaca-stitch .app:not(.fiaca-nav-collapsed) .topbar .topbar-brand .topbar-title {
    font-size: 22px;
    line-height: 1.1;
  }

  /* flecha: absoluta en el header, posición derivada del mismo var */
  body.fiaca-stitch .topbar #fiaca-nav-toggle {
    position: absolute;
    top: 11px;
    left: calc(var(--fiaca-menu-size, 256px) - var(--fiaca-arrow-inset, 46px));
    width: 42px;
    height: 42px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;                      /* expandido: sobre el navy de la marca */
    cursor: pointer;
    z-index: 2;
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed .topbar #fiaca-nav-toggle {
    background: #fff;                 /* colapsado: al costado del rail de 64px */
    color: inherit;                   /* navy heredado del header */
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  }
  body.fiaca-stitch .app.fiaca-nav-collapsed .topbar #fiaca-nav-toggle .fiaca-nav-chevron {
    transform: rotate(180deg);
  }
}

body.fiaca-stitch .topbar #fiaca-nav-toggle .fiaca-nav-chevron {
  width: 20px;
  height: 20px;
  transition: transform 180ms ease;
}

@media (max-width: 820px) {
  body.fiaca-stitch .app[class] { transition: none; }
  body.fiaca-stitch .topbar #fiaca-nav-toggle {
    position: absolute;
    top: 11px;
    left: calc(100% - 54px);
    width: 42px;
    height: 42px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: inherit;
  }
  /* evita colisión con la flecha en el extremo derecho del header */
  body.fiaca-stitch .topbar .topbar-user > a.btn.btn-ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.fiaca-stitch .app[class] { transition: none; }
  body.fiaca-stitch .topbar #fiaca-nav-toggle .fiaca-nav-chevron { transition: none; }
}

/* Main workspace navigation: keep modules' own layouts and native access flags. */
body.fiaca-stitch .main{grid-area:auto;grid-column:2;grid-row:2;min-width:0}
body.fiaca-stitch #fiaca-sidebar .fiaca-nav-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff38 transparent;padding:10px 8px}
body.fiaca-stitch #fiaca-sidebar .nav-section{margin:0 0 14px;padding:0;border:0}
body.fiaca-stitch #fiaca-sidebar .fiaca-nav-scroll .nav-list{flex:none;overflow:visible;padding:0;margin:0;gap:2px}
body.fiaca-stitch #fiaca-sidebar .nav-list a{width:100%}
body.fiaca-stitch #fiaca-sidebar #nav-administracion{margin:2px 0 0;padding:0;border:0;background:transparent}
body.fiaca-stitch #fiaca-sidebar #nav-administracion a{box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--nav-ink);font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap}
body.fiaca-stitch #fiaca-sidebar #nav-administracion a:hover{background:var(--nav-hover);color:white}
body.fiaca-stitch #fiaca-sidebar #nav-administracion a[aria-current="page"]{background:var(--nav-active);color:white;box-shadow:inset 3px 0 0 var(--nav-orange)}
body.fiaca-stitch #fiaca-sidebar #nav-administracion .nav-sublist a{font-weight:400}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-name{display:block;margin:2px 6px 8px;color:#44474d;font-size:12px}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-name .user-name{display:block;padding:0;background:transparent;white-space:normal;overflow-wrap:anywhere}
body.fiaca-stitch #fiaca-sidebar .fiaca-account-menu .nav-text{position:static;width:auto;height:auto;margin:0;clip-path:none;white-space:normal}
body.fiaca-stitch #fiaca-sidebar [hidden]{display:none!important}
@media(min-width:821px){
 body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar .fiaca-nav-scroll{padding:10px 6px}
 body.fiaca-stitch .app.fiaca-nav-collapsed #fiaca-sidebar #nav-administracion a{justify-content:center;padding:8px 0;gap:0}
 body.fiaca-stitch #fiaca-sidebar .nav-list a,body.fiaca-stitch #fiaca-sidebar .fiaca-account-trigger{position:relative}
}
@media(max-width:820px){
 body.fiaca-stitch .main{grid-column:1;grid-row:3}
 body.fiaca-stitch #fiaca-sidebar .fiaca-nav-scroll{display:flex;flex:0 0 auto;min-width:0;overflow-x:auto;overflow-y:hidden;padding:8px;gap:14px}
 body.fiaca-stitch #fiaca-sidebar .nav-section{display:flex;flex:none;margin:0;min-width:0}
 body.fiaca-stitch #fiaca-sidebar .fiaca-nav-scroll .nav-list{display:flex;flex-direction:row;flex:none;gap:4px}
 body.fiaca-stitch #fiaca-sidebar .nav-list>li,body.fiaca-stitch #fiaca-sidebar .nav-list .nav-group{display:flex;align-items:center;flex:none}
 body.fiaca-stitch #fiaca-sidebar .sidebar-footer{flex-direction:row;align-items:center;gap:8px}
 body.fiaca-stitch #fiaca-sidebar #fiaca-account{flex:none;width:auto;max-width:180px}
 body.fiaca-stitch #fiaca-sidebar #nav-administracion{display:flex;align-items:center;min-width:0;overflow-x:auto}
 body.fiaca-stitch #fiaca-sidebar #nav-administracion>a,body.fiaca-stitch #fiaca-sidebar #nav-administracion ul,body.fiaca-stitch #fiaca-sidebar #nav-administracion li{flex:none}
 body.fiaca-stitch #fiaca-sidebar .fiaca-account-menu{left:0;right:auto;max-width:calc(100vw - 24px)}
}

/* Desktop shell: the header belongs to the sidebar, not to the content column. */
@media (min-width:821px){
 body.fiaca-stitch .app>.topbar{
  grid-column:1;
  width:var(--fiaca-menu-size,256px);
  padding:0;
  background:var(--nav-navy);
  border-bottom:0;
 }
 body.fiaca-stitch .app>.main{grid-row:1/-1}
 body.fiaca-stitch .app.fiaca-nav-collapsed[class]{--fiaca-arrow-inset:12px}
 body.fiaca-stitch .app.fiaca-nav-collapsed>.main:has(>#view-nota:not([hidden])){padding-inline-start:32px}
 body.fiaca-stitch .slack-link-banner{top:.5rem}
}
@media (min-width:821px) and (max-width:1100px){
 body.fiaca-stitch .app.fiaca-nav-collapsed>.main{padding-inline-start:32px}
}