/*
  Tokens de marca IDS — fuente única de verdad para color y tipografía.
  Basado en "Manual de marca IDS 35 años.pdf". Se incluye con <link> en cada
  página de Deploy/ (no hay bundler ni framework en este proyecto).
*/

@font-face {
  font-family: 'Acherus Grotesque';
  src: url('fonts/AcherusGrotesque-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none; /* no existe peso Bold/Black entregado: no sintetizar uno falso */
}

@font-face {
  font-family: 'Acherus Grotesque';
  src: url('fonts/AcherusGrotesque-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colores oficiales del manual de marca */
  --primary: #a51317;
  --primary-hover: #7d0e11;
  --secondary: #1e42ac;
  --secondary-hover: #163182;
  --background: #f1f5f9;
  --card-bg: #ffffff;
  --text-dark: #0f172a;
  --text-color: var(--text-dark);
  --text-muted: #64748b;
  --border: #e2e8f0;
  --success: #10b981;
  --warning: #f59e0b;

  /* Tipografía: Acherus Grotesque (marca) con Helvetica como fallback real,
     nunca otra fuente de respaldo. No hay peso Bold de Acherus entregado:
     los títulos en negrita deben usar --font-heading-bold, no --font-body. */
  --font-body: 'Acherus Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading-bold: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Movimiento: mismo easing que ya usa .tech-area-card en index.html,
     ahora disponible para cualquier componente (antes cada sidebar usaba
     "ease" genérico, de ahí la sensación de dos productos distintos). */
  --ease-tech: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 0.18s;
  --motion-base: 0.28s;

  /* Elevación: unifica los --shadow-lg antes redefinidos por separado (y
     de forma divergente) en index.html, administracion.html y talento.html. */
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

html.dark-theme,
body.dark-theme {
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* Estados de foco e interacción base — hoy casi ausentes en las 5 páginas */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.is-loading {
  opacity: 0.7;
  cursor: progress;
}

/* -------------------------------------------------------------------- */
/* Componente de navegación compartido (sidebar de módulos)               */
/* -------------------------------------------------------------------- */
/* Fuente única para el menú lateral: reemplaza .menu-link (index.html) y
   .menu-btn (administracion.html, talento.html), que hoy son 3 implementa-
   ciones separadas del mismo componente. Un solo lugar para tocar estilo,
   easing e iconografía de acá en más. */
.ids-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #cbd5e1;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  font-family: inherit;
  transition: background-color var(--motion-fast) var(--ease-tech),
              color var(--motion-fast) var(--ease-tech),
              box-shadow var(--motion-fast) var(--ease-tech);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.ids-nav-link i {
  width: 1.1em;
  text-align: center;
  transition: transform var(--motion-fast) var(--ease-tech);
}

.ids-nav-link:hover i {
  transform: scale(1.12) rotate(-4deg);
}

.ids-nav-link:hover,
.ids-nav-link.active {
  color: white;
  background-color: rgba(255, 255, 255, 0.08);
}

.ids-nav-link.active {
  background-color: var(--primary);
  box-shadow: 0 4px 14px rgba(165, 19, 23, 0.4);
}

.ids-nav-link:focus-visible {
  outline: 2px solid white;
  outline-offset: -2px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Grupo colapsable de 1er nivel (áreas por rol: Comercial, Desarrollo, ...) */
.ids-nav-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.5rem;
  padding: 0.6rem 1.5rem 0.4rem;
  color: #94a3b8;
  font-size: 0.72rem;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-tech);
}

.ids-nav-group-header:hover {
  color: #e2e8f0;
}

.ids-nav-group-header:focus-visible {
  outline: 2px solid white;
  outline-offset: -2px;
  border-radius: 4px;
}

.ids-nav-group-header.is-locked {
  cursor: default;
}

.ids-nav-group-header.is-locked:hover {
  color: #94a3b8;
}

.ids-nav-group-header-icon {
  font-size: 0.85rem;
}

.ids-nav-group-header-label {
  flex-grow: 1;
}

.ids-nav-group-chevron {
  font-size: 0.72rem;
  margin-left: auto;
  transition: transform var(--motion-fast) var(--ease-tech);
}

.ids-nav-group-header[aria-expanded="false"] .ids-nav-group-chevron,
.ids-nav-subgroup-header[aria-expanded="false"] .ids-nav-group-chevron {
  transform: rotate(-90deg);
}

.ids-nav-group-header.is-locked .ids-nav-group-chevron {
  display: none;
}

/* Colapso sin medir alturas por JS: grid-template-rows 1fr <-> 0fr. */
.ids-nav-group-body-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--motion-base) var(--ease-tech);
}

.ids-nav-group-body-wrap.collapsed {
  grid-template-rows: 0fr;
}

.ids-nav-group-body-wrap > .ids-nav-group-body-inner {
  overflow: hidden;
  min-height: 0;
}

/* Subgrupos de 2do nivel dentro de un mismo flyout (caso Desarrollo, 22
   accesos): en vez de una lista plana larga o un acordeón anidado, columnas
   siempre visibles con título — mismo patrón que .nav-flyout--wide de
   homeids-ui.css, portado a los nombres de clase propios del sidebar real. */
.ids-nav-group-body-wrap--wide { width: 520px; }
.ids-nav-group-cols-title {
  padding: 4px 12px 8px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}
.ids-nav-group-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.ids-nav-subgroup-static {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 8px;
}
.ids-nav-subgroup-static-title {
  padding: 4px 12px 4px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
}

@media (max-width: 768px) {
  .ids-nav-group-body-wrap--wide { width: auto; }
  .ids-nav-group-cols { grid-template-columns: 1fr; }
}

/* Flyout a la derecha (>=769px) para los grupos de 1er nivel (Comercial,
   Desarrollo, ...), sumando el lenguaje "IDS Tech" (profundidad, blur,
   easing de entrada) sin tocar el mecanismo de apertura ya construido:
   setSidebarGroupExpanded() sigue togglando la misma clase .collapsed sobre
   este mismo elemento, así que no hace falta ninguna clase .is-open nueva.
   Los subgrupos de 2do nivel (Documentación, Herramientas, ...) NO se
   convierten en flyouts anidados: quedan como acordeón vertical de siempre,
   ahora dentro del panel flotante. Bajo 769px, todo vuelve exactamente al
   acordeón vertical original (ver el mismo .ids-nav-group-body-wrap sin
   esta media query). */
@media (min-width: 769px) {
  /* position:fixed (no absolute): .sidebar-menu-container tiene
     overflow-y:auto, y por regla de CSS eso fuerza también a overflow-x a
     comportarse como auto — cualquier hijo position:absolute que saliera
     del ancho del sidebar quedaría recortado. Ancla el panel al VIEWPORT
     (top/bottom fijos + height:fit-content + margin-block:auto lo centra
     verticalmente) en vez de necesitar JS para calcular su posición: mismo
     truco que homeids-ui.css usa para .nav-flyout, portado acá porque el
     sidebar real usa nombres de clase propios (.ids-nav-group-*), no
     .nav-group/.nav-flyout. 290px = ancho real del sidebar (280px) + 10px. */
  .ids-nav-group-body-wrap {
    display: block;
    position: fixed;
    top: 14px;
    bottom: 14px;
    left: 290px;
    z-index: 60;
    width: 252px;
    height: fit-content;
    max-height: calc(100vh - 28px);
    margin-block: auto;
    padding: 8px;
    background: rgba(9, 17, 38, 0.94);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--card-radius, 14px);
    box-shadow: var(--depth-3, 0 20px 45px rgba(0, 0, 0, 0.4));
    opacity: 0;
    transform: translateX(-10px) scale(0.98);
    transform-origin: left center;
    pointer-events: none;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    transition: opacity var(--motion-slow, 0.3s) var(--ease-enter, var(--ease-tech)),
                transform var(--motion-slow, 0.3s) var(--ease-enter, var(--ease-tech));
  }
  .ids-nav-group-body-wrap > .ids-nav-group-body-inner {
    overflow: visible;
  }
  /* abre por click/teclado (misma lógica de siempre, clase .collapsed) y
     también con el mouse: :has() mantiene el grupo "abierto" mientras el
     cursor esté sobre el header O sobre el propio panel flotante (evita que
     se cierre al cruzar en diagonal hacia el flyout). */
  .ids-nav-group-body-wrap:not(.collapsed),
  div:has(> .ids-nav-group-header):hover > .ids-nav-group-body-wrap {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* la flechita queda apuntando a la derecha (hacia el flyout), no hacia
     abajo: mismo ícono fa-chevron-down, rotado -90deg siempre en desktop. */
  .ids-nav-group-chevron { transform: rotate(-90deg); }
  .ids-nav-group-header:hover .ids-nav-group-chevron,
  .ids-nav-group-header[aria-expanded="true"] .ids-nav-group-chevron {
    transform: rotate(-90deg) translateX(3px);
  }
}

/* Buscador rápido del sidebar: filtra los .ids-nav-link visibles por texto.
   Es un complemento del árbol de grupos, no un reemplazo (evita forzar a
   usuarios no técnicos a aprender un command palette). */
.ids-nav-search-wrap {
  position: relative;
  padding: 0 0.75rem 0.5rem;
}

.ids-nav-search-wrap i {
  position: absolute;
  left: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 0.8rem;
  pointer-events: none;
}

.ids-nav-search {
  width: 100%;
  padding: 0.55rem 0.75rem 0.55rem 2.1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: white;
  font-family: inherit;
  font-size: 0.85rem;
  transition: background-color var(--motion-fast) var(--ease-tech),
              border-color var(--motion-fast) var(--ease-tech);
}

.ids-nav-search::placeholder {
  color: #64748b;
}

.ids-nav-search:focus-visible,
.ids-nav-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
}

/* Estado de filtrado activo (ver filterSidebarLinks en index.html): fuerza
   todos los grupos/subgrupos abiertos para que el resultado sea visible,
   sin tocar el estado de acordeón guardado por el usuario en localStorage. */
.search-hidden {
  display: none !important;
}

.sidebar-menu-container.is-filtering .ids-nav-group-body-wrap,
.sidebar-menu-container.is-filtering .ids-nav-subgroup-body {
  grid-template-rows: 1fr !important;
}