/* ===========================================================================
   Arrenda1 — barra lateral navy
   ---------------------------------------------------------------------------
   Por qué existe este archivo aparte: es el único cambio que de verdad hace
   que Twenty deje de verse como Twenty, y también el único que depende de la
   estructura del DOM. Fragilidad intermedia — entre `brand.css` (solo tokens,
   estable) y `hide.css` (selectores, frágil).

   El diagnóstico que lo motivó: ~95% de la pantalla de Twenty es blanco y gris
   neutro. La rampa de acento solo aparece en el botón primario y en el estado
   seleccionado — unos pocos miles de píxeles. Repintar la rampa, la tipografía,
   los radios y las sombras se nota poquísimo. Pintar la barra sí.

   Dos anclas, ninguna es una clase hasheada:

   1. `--t-gray-scale-gray3` — el token que Twenty usa como fondo de la raíz de
      la app. Solo 2 selectores en todo el bundle lo usan. El panel de contenido
      es una tarjeta blanca encima, así que el navy solo asoma en la franja
      lateral: las tablas no se tocan.

   2. `[style*="navigation-drawer-width"]` — el contenedor de la barra declara
      esa custom property en su `style` inline. Es un nombre de variable de
      Twenty, no un hash de build.

      El `:not(:has(…))` selecciona el contenedor MÁS INTERNO que la declara.
      Sin eso, matchea también el shell de la app y el texto claro se filtra a
      toda la pantalla, dejando la tabla en blanco sobre blanco.
   =========================================================================== */

/* Índigo profundo: la misma familia que el botón primario (`#6365B8`), unos
   pasos más oscuro.

   Por qué no el color exacto del botón: sobre `#6365B8` el texto secundario
   (blanco al 72%) da 3.5:1 y no pasa WCAG AA — habría que subir todos los
   niveles a casi blanco puro y se perdería la jerarquía entre el nombre del
   objeto y las etiquetas de sección. Con `#363073` los tres niveles pasan:
   11.0:1 / 8.0:1 / 4.6:1. */
html.light,
html.dark {
  --t-gray-scale-gray3: #363073;
}

/* Solo en claro: en oscuro el texto de Twenty ya es claro y sus superficies ya
   son oscuras, así que invertirlas otra vez sobra. */
html.light
  [style*="navigation-drawer-width"]:not(
    :has([style*="navigation-drawer-width"])
  ) {
  /* Texto e iconos. El paso más tenue (`tertiary`) da 6.0:1 sobre el navy:
     pasa WCAG AA con margen. */
  --t-font-color-primary: rgba(255, 255, 255, 0.92);
  --t-font-color-secondary: rgba(255, 255, 255, 0.72);
  --t-font-color-tertiary: rgba(255, 255, 255, 0.55);
  --t-font-color-light: rgba(255, 255, 255, 0.42);

  /* Las píldoras de la barra (buscar, nuevo chat) pintan estos tokens. En
     blanco quedarían invisibles contra su propio texto claro: se vuelven
     chips translúcidos, que es lo que corresponde sobre una barra oscura. */
  --t-background-primary: rgba(255, 255, 255, 0.1);
  --t-background-secondary: rgba(255, 255, 255, 0.1);
  --t-background-tertiary: rgba(255, 255, 255, 0.06);

  --t-border-color-medium: rgba(255, 255, 255, 0.14);
  --t-border-color-light: rgba(255, 255, 255, 0.08);
  --t-background-transparent-light: rgba(255, 255, 255, 0.1);
  --t-background-transparent-medium: rgba(255, 255, 255, 0.16);
}

/* Iconos del nav en el color del texto, no cada uno del suyo.
   Twenty le asigna a cada objeto un color de icono fijo por atributo `stroke`
   (`--t-color-blue11` para Contactos, `--t-color-red11` para Oportunidades,
   `--t-color-turquoise11` para Tareas y Notas). Sobre una barra de color esos
   tonos pelean entre sí y con el fondo. `currentColor` los hace heredar el
   mismo blanco que su etiqueta, y el item activo se distingue por su fondo.

   El `!important` es necesario: el color va en el atributo `stroke` del SVG.

   Solo el `<svg>`, nunca sus hijos: aplicarlo a `svg *` le pone contorno a las
   formas que van rellenas y el icono se convierte en un bloque sólido. */
html.light a.navigation-drawer-item svg {
  stroke: currentColor !important;
}

/* El glifo va dentro de un chip con el color del objeto de fondo (lavanda para
   Contactos, rosa para Oportunidades). Con el glifo ya en blanco, ese chip lo
   deja invisible y el icono se lee como un bloque de color. Se transparenta:
   sobre la barra oscura el icono se distingue solo. */
html.light a.navigation-drawer-item div:has(> svg) {
  background: transparent !important;
}

/* Ítem inyectado Conversaciones: hereda tokens del drawer (sin quedar
   link-azul/oscuro de Twenty sobre el navy). */
html.light a.navigation-drawer-item[data-a1-conversaciones-link] {
  color: var(--t-font-color-secondary, rgba(255, 255, 255, 0.72)) !important;
}

html.light a.navigation-drawer-item[data-a1-conversaciones-link] svg {
  stroke: currentColor !important;
}