/*
 * CSS del menu lateral (partials/sidebar.php).
 * Separado de portal.css para que mockup-studio/ (que tiene su
 * propia hoja de estilos inline y no carga portal.css) pueda
 * incluir solo esto y sumar el menu sin heredar el resto de las
 * reglas compartidas. Depende de las variables --blue, --hairline,
 * --panel, --panel-2, --text, --text-body y --tit ya definidas en
 * :root de quien lo use.
 */

/* ---------- Menu lateral (partials/sidebar.php) ----------
 * Reemplaza el viejo link unico "← Volver" (habia que apretarlo
 * varias veces para llegar a otra seccion) por un menu fijo a la
 * izquierda, visible en todas las paginas del portal, incluida
 * mockup-studio (que tiene su propia hoja de estilos, por eso este
 * CSS vive aparte de portal.css). En desktop
 * queda siempre a la vista; en mobile se esconde fuera de pantalla y
 * se abre con el boton "☰" de la barra superior (checkbox + label,
 * sin JS). */
.app-shell{display:flex; align-items:flex-start; min-height:100vh;}
.app-main{flex:1 1 auto; min-width:0;}

.sidebar-toggle-checkbox{position:absolute; opacity:0; pointer-events:none;}
.sidebar-backdrop{display:none;}

.sidebar{
  flex:none;
  width:232px;
  /* Alto = pantalla (antes min-height): si el menu era mas largo que la
     ventana, estiraba el <nav> y la pagina entera scrolleaba un poquito.
     Ahora el nav mide siempre lo que la ventana y, de sobrar contenido,
     scrollea solo .sidebar-scroll (ver mas abajo), no la pagina. */
  height:100vh;
  height:100dvh;
  position:sticky;
  top:0;
  align-self:flex-start;
  background:var(--panel);
  border-right:1px solid var(--hairline);
  padding:22px 14px;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:width .16s ease;
}
.sidebar-top{
  /* Solo el logo/nombre -- el boton de achicar ya no vive aca, ver
   * .sidebar-collapse-toggle mas abajo (position:absolute, fijo en
   * la esquina de .sidebar). min-height para que, cuando el logo
   * queda oculto en modo angosto, esta fila no colapse a 0 y el
   * contenido de abajo no quede tapado por el boton. */
  min-height:30px;
}
.sidebar-brand{
  display:block;
  text-decoration:none;
  text-align:center;
  padding:0 10px;
}
/* Boton para achicar/expandir el menu: icono estandar de "panel
 * lateral" (un rectangulo dividido en dos, con el lado izquierdo mas
 * marcado) -- el mismo patron que usan VS Code, Notion, Slack, etc.
 * para esta accion, asi se reconoce de entrada sin texto ni switch.
 * assets/sidebar-collapse.js solo agrega/saca la clase
 * "sidebar-collapsed" del <nav> y actualiza el texto accesible del
 * boton; el icono en si queda fijo.
 *
 * Posicion fija en la esquina superior izquierda de .sidebar (que
 * tiene position:sticky, asi que sirve de referencia) en vez de ir
 * al lado del logo: top/left calzan con el padding de .sidebar
 * (22px 14px), y como ese padding no cambia entre angosto/ancho (solo
 * cambia el ancho total del nav), el boton queda exactamente en el
 * mismo lugar en los dos estados -- no salta al centro ni se mueve. */
.sidebar-collapse-toggle{
  position:absolute;
  top:22px;
  left:14px;
  z-index:1;
  background:none;
  border:none;
  padding:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  color:var(--text-body);
  border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.sidebar-collapse-toggle:hover{
  background:var(--panel-2);
  color:var(--text);
}
.sidebar-collapse-icon{
  display:block;
}
.sidebar-brand-name{
  display:block;
  font-family:var(--tit);
  font-weight:900;
  font-size:17px;
  color:var(--text);
  letter-spacing:.2px;
}
.sidebar-brand-sub{
  display:block;
  font-size:10.5px;
  color:var(--text-body);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-top:2px;
}
.sidebar-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sidebar-group-title{
  font-family:var(--tit);
  font-weight:800;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-body);
  padding:0 10px 6px;
}
.sidebar-group{display:flex; flex-direction:column; gap:2px;}

/* Grupos plegables, todos abiertos al cargar (partials/sidebar.php + assets/sidebar-collapse.js):
 * el titulo del grupo es un boton con flechita; el cuerpo se pliega con
 * el truco grid 0fr -> 1fr (anima el alto sin medirlo). Mismo timing de
 * .3s ease-in-out que el resto del portal. */
.sidebar-group-acc{gap:0;}
.sidebar-group-acc > .sidebar-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:none;
  border:0;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
  padding:7px 10px;
  transition:background .3s ease-in-out, color .3s ease-in-out;
}
.sidebar-group-acc > .sidebar-group-title:hover{background:var(--panel-2); color:var(--text);}
.sidebar-chevron, .sidebar-sub-toggle{
  display:inline-block;
  transition:transform .3s ease-in-out;
}
.sidebar-group-acc.open > .sidebar-group-title .sidebar-chevron{transform:rotate(90deg);}
.sidebar-group-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease-in-out;
}
.sidebar-group-acc.open > .sidebar-group-body{grid-template-rows:1fr;}
.sidebar-group-inner{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sidebar-group-acc:not(.open) .sidebar-group-inner{visibility:hidden; transition:visibility 0s .3s;}
.sidebar-group-acc.open .sidebar-group-inner{visibility:visible;}

/* Herramienta con sub-items (hubs): link + flechita propia */
.sidebar-tool{position:relative; display:flex; flex-direction:column;}
.sidebar-tool.has-sub > .sidebar-link{padding-right:34px;}
.sidebar-sub-toggle{
  position:absolute;
  top:5px;
  right:6px;
  width:26px;
  height:26px;
  background:none;
  border:0;
  border-radius:7px;
  color:var(--text-body);
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.sidebar-sub-toggle:hover{background:var(--panel-2); color:var(--text);}
.sidebar-tool.sub-open > .sidebar-sub-toggle{transform:rotate(90deg);}
.sidebar-tool.has-sub > .sidebar-link.active ~ .sidebar-sub-toggle{color:#fff;}
.sidebar-sublist-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease-in-out;
}
.sidebar-tool.sub-open > .sidebar-sublist-wrap{grid-template-rows:1fr;}
.sidebar-sublist-wrap > .sidebar-sublist{min-height:0; overflow:hidden;}
.sidebar-tool:not(.sub-open) .sidebar-sublist{visibility:hidden; transition:visibility 0s .3s;}
.sidebar-tool.sub-open .sidebar-sublist{visibility:visible;}
@media (prefers-reduced-motion: reduce){
  .sidebar-group-body, .sidebar-sublist-wrap, .sidebar-chevron, .sidebar-sub-toggle{transition:none;}
}
.sidebar-group-admin{border-top:1px solid var(--hairline); padding-top:14px; margin-top:auto;}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:9px;
  text-decoration:none;
  color:var(--text-body);
  font-weight:700;
  font-size:13px;
  line-height:1.25;
}
.sidebar-link:hover{background:var(--panel-2); color:var(--text);}
.sidebar-link.active{background:var(--blue); color:#fff;}
.sidebar-link-icon{font-size:15px; line-height:1; flex:none; width:18px; text-align:center;}
.sidebar-home{margin-bottom:2px;}
.sidebar-sublist{
  display:flex;
  flex-direction:column;
  gap:1px;
  margin:0 0 0 18px;
  padding:2px 0 4px 10px;
  border-left:1px solid var(--hairline);
}
.sidebar-sublink{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:7px;
  text-decoration:none;
  color:var(--text-body);
  font-size:12px;
  font-weight:600;
}
.sidebar-sublink:hover{background:var(--panel-2); color:var(--text);}
.sidebar-sublink.active{background:var(--blue); color:#fff;}
.sidebar-sublink .sidebar-link-icon{font-size:13px; width:15px;}

.sidebar-toggle-btn{
  display:none;
  background:none;
  border:none;
  color:var(--text-body);
  font-size:19px;
  line-height:1;
  cursor:pointer;
  padding:4px 6px;
  margin-right:auto;
  border-radius:8px;
}
.sidebar-toggle-btn:hover{background:var(--panel-2); color:var(--text);}

/* ---------- Menu angosto (solo iconos) en desktop ----------
 * Activado con el boton "«"/"»" (assets/sidebar-collapse.js), guardado
 * en la cookie "sidebar_collapsed" (ver partials/sidebar.php). Util en
 * pantallas chicas o cuando se quiere mas lugar para el contenido; cada
 * link conserva su "title" para que el nombre siga apareciendo al
 * pasar el mouse. No se aplica en mobile (ver @media mas abajo): ahi el
 * menu sigue siendo todo-o-nada con el "☰". */
@media (min-width:881px){
.sidebar.sidebar-collapsed{width:68px; padding:22px 10px;}
.sidebar-collapsed .sidebar-brand{display:none;}
.sidebar-collapsed .sidebar-group-title{display:none;}
.sidebar-collapsed .sidebar-sublist-wrap, .sidebar-collapsed .sidebar-sub-toggle{display:none;}
.sidebar-collapsed .sidebar-group-body{grid-template-rows:1fr;}
.sidebar-collapsed .sidebar-group-acc:not(.open) .sidebar-group-inner{visibility:visible;}
.sidebar-collapsed .sidebar-link{justify-content:center; padding:9px 0;}
.sidebar-collapsed .sidebar-tool.has-sub > .sidebar-link{padding-right:0;}
.sidebar-collapsed .sidebar-link span:not(.sidebar-link-icon){
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
}

@media (max-width:880px){
  .sidebar-toggle-btn{display:inline-flex;}
  .sidebar-collapse-toggle{display:none;}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    z-index:60;
    box-shadow:2px 0 24px rgba(0,0,0,.35);
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:55;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar{
    transform:translateX(0);
  }
}
.sidebar-brand-logo{
  display:block;
  max-width:100%;
  max-height:40px;
  object-fit:contain;
  object-position:center;
  margin:0 auto;
}

/* ---------- Menu en celular: comodo para el dedo ---------- */
@media (max-width:880px){
  .sidebar{width:min(300px, 86vw);}
  .sidebar-link{padding:12px 12px; font-size:14px;}
  .sidebar-sublink{padding:11px 10px; font-size:13px;}
  .sidebar-group-title{min-height:44px;}
}

/* Etiqueta de entorno (2026-10-27): solo en staging.tools.cif.ar, para no
   confundir la copia de prueba con produccion (auth/config.php, PORTAL_ENTORNO). */
.sidebar-entorno{display:inline-block; margin-top:6px; padding:2px 10px; border-radius:999px; border:1px solid var(--red); color:var(--red); font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;}
.sidebar-collapsed .sidebar-entorno{display:none;}
.login-card .sidebar-entorno{margin:0 auto 12px;}