/* Espacio de trabajo: el menú lateral (inspirado en s-j-zhang.com) y los temas Claro, Oscuro y Automático, con la marca.
   Los colores van por uso (--fondo, --texto, --activo...) y salen de la marca: --brand y --acento llegan de /marca.css
   (los de la agencia con marca blanca); crema, petróleo y tinta, de marca-base.css. Va después de styles.css y antes de
   /marca.css. El tablero de bots y la vista previa de correos siguen claros a propósito (fuerzan color-scheme: light). */

/* ---------- Tema ---------- */

/* Sin data-theme (Automático) sigue al sistema; con él, el que eligió la persona (tema.js lo pone antes de pintar).
   color-scheme hace que los colores del sistema que ya usa styles.css (Canvas, LinkText, los campos) sigan al tema. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body.espacio {
  --fondo: color-mix(in srgb, var(--crema) 40%, white);
  --fondo-menu: var(--crema);
  --texto: var(--tinta);
  --texto-fuerte: var(--brand);
  --texto-suave: color-mix(in srgb, var(--tinta) 62%, var(--crema));
  --borde: color-mix(in srgb, var(--brand) 14%, transparent);
  --encima: color-mix(in srgb, var(--brand) 7%, transparent);
  --activo: color-mix(in srgb, var(--acento, var(--lavanda)) 42%, var(--fondo-menu));
  --foco: var(--violeta);
  /* Superficies: una tarjeta sobre el fondo, y un panel dentro de ella. */
  --superficie: white;
  --superficie-baja: color-mix(in srgb, var(--crema) 60%, white);
  /* El lienzo del tablero (styles.css): crema muy claro con puntos de la marca; controles como superficies. */
  --lienzo-fondo: color-mix(in srgb, var(--crema) 45%, white);
  --lienzo-puntos: color-mix(in srgb, var(--brand) 11%, transparent);
  --lienzo-linea: color-mix(in srgb, var(--brand) 30%, var(--crema));
  --lienzo-texto: var(--tinta);
  --lienzo-texto-suave: var(--texto-suave);
  --lienzo-borde: var(--borde);
  --lienzo-control: rgb(255 255 255 / 0.58);
  --lienzo-control-hover: rgb(255 255 255 / 0.85);
  --lienzo-control-texto: var(--texto);
  --lienzo-chip: var(--encima);
  --lienzo-sombra: 0 1px 2px color-mix(in srgb, var(--tinta) 8%, transparent), 0 4px 14px color-mix(in srgb, var(--tinta) 6%, transparent);
  /* El tablero en vidrio (styles.css): luces de la marca sobre crema, nodos y controles esmerilados, y el tráfico en violeta. */
  --lienzo-base: color-mix(in srgb, var(--crema) 50%, white);
  --luz-1: color-mix(in srgb, var(--acento, var(--lavanda)) 62%, transparent);
  --luz-2: oklch(0.87 0.09 175 / 0.6);
  --luz-3: oklch(0.87 0.08 35 / 0.5);
  --nodo-fondo: rgb(255 255 255 / 0.6);
  --nodo-borde: rgb(255 255 255 / 0.85);
  --nodo-texto: var(--tinta);
  --nodo-suave: color-mix(in srgb, var(--tinta) 70%, transparent);
  --nodo-sombra: 0 10px 28px -14px color-mix(in srgb, var(--tinta) 45%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.7);
  --trafico: oklch(0.5 0.2 278);
}

/* Oscuro: el menú pasa al color de la marca oscurecido (petróleo en Tencavox) y el contenido, a petróleo con tinta. */
html[data-theme="dark"] body.espacio {
  --fondo: color-mix(in srgb, var(--petroleo) 30%, var(--tinta));
  --fondo-menu: color-mix(in srgb, var(--brand) 85%, black);
  --texto: var(--crema);
  --texto-fuerte: var(--crema);
  --texto-suave: color-mix(in srgb, var(--crema) 68%, transparent);
  --borde: color-mix(in srgb, var(--crema) 14%, transparent);
  --encima: color-mix(in srgb, var(--crema) 9%, transparent);
  --activo: color-mix(in srgb, var(--acento, var(--lavanda)) 30%, var(--fondo-menu));
  --foco: var(--lavanda);
  --superficie: color-mix(in srgb, var(--crema) 6%, var(--fondo));
  --superficie-baja: color-mix(in srgb, black 22%, var(--fondo));
  /* El lienzo del tablero: un poco más hondo que la página, con puntos y líneas tenues; los nodos, de vidrio oscuro. */
  --lienzo-fondo: color-mix(in srgb, var(--petroleo) 20%, var(--tinta));
  --lienzo-puntos: color-mix(in srgb, var(--crema) 16%, transparent);
  --lienzo-linea: color-mix(in srgb, var(--crema) 38%, var(--tinta));
  --lienzo-texto: var(--crema);
  --lienzo-texto-suave: color-mix(in srgb, var(--crema) 64%, transparent);
  --lienzo-aviso: oklch(0.82 0.12 80);
  --lienzo-ok: oklch(0.78 0.14 150);
  --lienzo-mal: oklch(0.75 0.15 25);
  --lienzo-mezcla: white;
  --lienzo-borde: var(--borde);
  --lienzo-control: rgb(255 255 255 / 0.1);
  --lienzo-control-hover: rgb(255 255 255 / 0.18);
  --lienzo-control-texto: var(--crema);
  --lienzo-chip: color-mix(in srgb, var(--crema) 10%, transparent);
  --lienzo-sombra: 0 2px 10px #00000059;
  /* El tablero en vidrio: luces de la marca sobre un índigo hondo, nodos de vidrio oscuro y el tráfico en lavanda. */
  --lienzo-base: color-mix(in srgb, var(--petroleo) 22%, #130f2b);
  --luz-1: color-mix(in srgb, var(--acento, var(--lavanda)) 42%, transparent);
  --luz-2: oklch(0.58 0.12 180 / 0.42);
  --luz-3: oklch(0.58 0.15 15 / 0.32);
  --nodo-fondo: rgb(255 255 255 / 0.1);
  --nodo-borde: rgb(255 255 255 / 0.24);
  --nodo-texto: var(--crema);
  --nodo-suave: color-mix(in srgb, var(--crema) 72%, transparent);
  --nodo-sombra: 0 10px 30px -12px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12);
  --trafico: oklch(0.82 0.11 278);
  /* El cajón y la tarjeta para agregar nodos (styles.css, --cajon-*): vidrio índigo oscuro, como el panel del menú. */
  --cajon-fondo: rgb(28 24 54 / 0.82);
  --cajon-fondo-tarjeta: rgb(30 26 58 / 0.9);
  --cajon-borde: rgb(255 255 255 / 0.14);
  --cajon-brillo: rgb(255 255 255 / 0.08);
  --cajon-sombra: rgb(0 0 0 / 0.6);
  --cajon-texto: #ecebe6;
  --cajon-suave: #b4b1c8;
  --cajon-tenue: #8f8ca8;
  --cajon-linea: rgb(255 255 255 / 0.08);
  --cajon-encima: rgb(255 255 255 / 0.07);
  --cajon-elegido: rgb(255 255 255 / 0.13);
  --cajon-marcado: oklch(0.45 0.12 278 / 0.5);
  --cajon-acento: oklch(0.78 0.13 278);
  --cajon-enlace: oklch(0.82 0.11 278);
  --cajon-campo: rgb(255 255 255 / 0.06);
  --cajon-campo-borde: rgb(255 255 255 / 0.14);
  --cajon-esquema: dark;
  --cajon-etiqueta-fondo: 0.36 0.06;
  --cajon-etiqueta-texto: 0.88 0.08;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.espacio {
    --fondo: color-mix(in srgb, var(--petroleo) 30%, var(--tinta));
    --fondo-menu: color-mix(in srgb, var(--brand) 85%, black);
    --texto: var(--crema);
    --texto-fuerte: var(--crema);
    --texto-suave: color-mix(in srgb, var(--crema) 68%, transparent);
    --borde: color-mix(in srgb, var(--crema) 14%, transparent);
    --encima: color-mix(in srgb, var(--crema) 9%, transparent);
    --activo: color-mix(in srgb, var(--acento, var(--lavanda)) 30%, var(--fondo-menu));
    --foco: var(--lavanda);
    --superficie: color-mix(in srgb, var(--crema) 6%, var(--fondo));
    --superficie-baja: color-mix(in srgb, black 22%, var(--fondo));
    /* El lienzo del tablero: un poco más hondo que la página, con puntos y líneas tenues; los nodos, de vidrio oscuro. */
    --lienzo-fondo: color-mix(in srgb, var(--petroleo) 20%, var(--tinta));
    --lienzo-puntos: color-mix(in srgb, var(--crema) 16%, transparent);
    --lienzo-linea: color-mix(in srgb, var(--crema) 38%, var(--tinta));
    --lienzo-texto: var(--crema);
    --lienzo-texto-suave: color-mix(in srgb, var(--crema) 64%, transparent);
    --lienzo-aviso: oklch(0.82 0.12 80);
    --lienzo-ok: oklch(0.78 0.14 150);
    --lienzo-mal: oklch(0.75 0.15 25);
    --lienzo-mezcla: white;
    --lienzo-borde: var(--borde);
    --lienzo-control: rgb(255 255 255 / 0.1);
    --lienzo-control-hover: rgb(255 255 255 / 0.18);
    --lienzo-control-texto: var(--crema);
    --lienzo-chip: color-mix(in srgb, var(--crema) 10%, transparent);
    --lienzo-sombra: 0 2px 10px #00000059;
    /* El tablero en vidrio: luces de la marca sobre un índigo hondo, nodos de vidrio oscuro y el tráfico en lavanda. */
    --lienzo-base: color-mix(in srgb, var(--petroleo) 22%, #130f2b);
    --luz-1: color-mix(in srgb, var(--acento, var(--lavanda)) 42%, transparent);
    --luz-2: oklch(0.58 0.12 180 / 0.42);
    --luz-3: oklch(0.58 0.15 15 / 0.32);
    --nodo-fondo: rgb(255 255 255 / 0.1);
    --nodo-borde: rgb(255 255 255 / 0.24);
    --nodo-texto: var(--crema);
    --nodo-suave: color-mix(in srgb, var(--crema) 72%, transparent);
    --nodo-sombra: 0 10px 30px -12px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12);
    --trafico: oklch(0.82 0.11 278);
    /* El cajón y la tarjeta para agregar nodos (styles.css, --cajon-*): vidrio índigo oscuro, como el panel del menú. */
    --cajon-fondo: rgb(28 24 54 / 0.82);
    --cajon-fondo-tarjeta: rgb(30 26 58 / 0.9);
    --cajon-borde: rgb(255 255 255 / 0.14);
    --cajon-brillo: rgb(255 255 255 / 0.08);
    --cajon-sombra: rgb(0 0 0 / 0.6);
    --cajon-texto: #ecebe6;
    --cajon-suave: #b4b1c8;
    --cajon-tenue: #8f8ca8;
    --cajon-linea: rgb(255 255 255 / 0.08);
    --cajon-encima: rgb(255 255 255 / 0.07);
    --cajon-elegido: rgb(255 255 255 / 0.13);
    --cajon-marcado: oklch(0.45 0.12 278 / 0.5);
    --cajon-acento: oklch(0.78 0.13 278);
    --cajon-enlace: oklch(0.82 0.11 278);
    --cajon-campo: rgb(255 255 255 / 0.06);
    --cajon-campo-borde: rgb(255 255 255 / 0.14);
    --cajon-esquema: dark;
    --cajon-etiqueta-fondo: 0.36 0.06;
    --cajon-etiqueta-texto: 0.88 0.08;
  }
}

/* ---------- Página: menú a la izquierda, contenido a la derecha ---------- */

body.espacio {
  /* El menú: el riel de las secciones y el panel de sus categorías (que se oculta con el tirador o «[»). */
  --ancho-riel: 4.5rem;
  --ancho-panel: 15rem;
  --ancho-menu: calc(var(--ancho-riel) + var(--ancho-panel));
  display: grid;
  grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  border-top: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
}
body.espacio > main { width: 100%; box-sizing: border-box; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; }
body.espacio h1, body.espacio h2 { font-family: var(--fuente-titulos); color: var(--texto-fuerte); letter-spacing: -0.01em; }
body.espacio :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.iconos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Barras de desplazamiento ---------- */

/* Una pastilla sin carril, del color del texto de donde está (currentColor, que --barra guarda sin resolver): tinta sobre
   el papel y la pared, crema sobre el carbón del riel y de noche, gris del tablero en sus cajones. Así sigue sola a cada
   superficie y a los dos temas. La de la página es la de <html>, que toma la tinta o la crema del tema. Va con :where()
   para no pisar las que se ocultan a propósito (la cuerda, las secciones en el celular). */
html { --barra: color-mix(in srgb, currentColor 13%, transparent); --barra-encima: color-mix(in srgb, currentColor 32%, transparent);
  color: var(--tinta); }
html[data-theme="dark"] { color: var(--crema); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) { color: var(--crema); } }
/* Chrome, Edge y Safari: 12 px de ancho con un borde transparente de 3, para que la pastilla (6 px) flote despegada del
   borde. Sin scrollbar-width ni scrollbar-color, que en Chrome apagarían estas reglas. */
:where(html, body.espacio *)::-webkit-scrollbar { width: 9px; height: 9px; background: transparent; }
:where(html, body.espacio *)::-webkit-scrollbar-track,
:where(html, body.espacio *)::-webkit-scrollbar-corner { background: transparent; }
:where(html, body.espacio *)::-webkit-scrollbar-thumb { min-height: 2.5rem; min-width: 2.5rem; border: 3px solid transparent; border-radius: 999px;
  background-color: var(--barra); background-clip: padding-box; }
:where(html, body.espacio *)::-webkit-scrollbar-thumb:hover { border-width: 2px; background-color: var(--barra-encima); }
:where(html, body.espacio *)::-webkit-scrollbar-thumb:active { border-width: 2px; background-color: color-mix(in srgb, currentColor 60%, transparent); }
:where(html, body.espacio *)::-webkit-scrollbar-button { display: none; }
/* Firefox: la delgada, con los mismos colores. */
@supports not selector(::-webkit-scrollbar) {
  :where(html, body.espacio *) { scrollbar-width: thin; scrollbar-color: var(--barra) transparent; }
}

/* ---------- Menú lateral: el riel de las secciones y el panel de sus categorías ---------- */

/* Dos partes, como un archivador: el riel carbón con un ícono por sección (la abierta es un cuadrado de papel con su ojal,
   la etiqueta de papel de antes llevada al ícono) y, al lado, el panel de papel con las categorías de la sección abierta
   y su cantidad. Abajo del panel, tu credencial (se despliega con tu cuenta), el tema y el logo como firma. Tiene sus
   propios colores (no sigue a la sección) y la letra de «Tu equipo» (automatizaciones.css). */
/* Carbón tinta para el riel, de la familia de la tinta del texto; el panel es el papel de las credenciales. Va también en
   el tirador, que vive fuera del menú. */
.menu, .menu-tirador {
  --riel: #1b1640;
  --riel-texto: #ece9ff;
  --riel-suave: #aaa4d8;
  --riel-encima: color-mix(in srgb, #ece9ff 10%, transparent);
  --riel-borde: color-mix(in srgb, #ece9ff 15%, transparent);
  /* El violeta del tráfico del tablero: el ojal de la sección abierta y la línea de la categoría elegida. */
  --ojal: oklch(0.55 0.2 278);
}
.menu {
  --papel-m: #f7f7f2;
  --tinta-m: #15172b;
  --cinta: #ff6b5b;
  /* El panel: papel, tinta y sus grises. */
  --panel: rgb(250 247 240 / 0.55);
  --panel-texto: #15172b;
  --panel-suave: #6b6e83;
  --panel-encima: color-mix(in srgb, #15172b 5%, transparent);
  --panel-elegido: rgb(255 255 255 / 0.78);
  --panel-borde: color-mix(in srgb, #15172b 11%, transparent);
  --panel-pastilla: #ffffff;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: var(--ancho-riel) minmax(0, 1fr);
  height: 100vh;
  font-family: 'Archivo', var(--fuente-texto);
}
html[data-theme="dark"] :is(.menu, .menu-tirador) { --riel: #0f0c22; --papel-m: #ece9ff; --ojal: oklch(0.6 0.19 278); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) :is(.menu, .menu-tirador) { --riel: #0f0c22; --papel-m: #ece9ff; --ojal: oklch(0.6 0.19 278); } }
/* De noche el panel es un carbón un poco más claro que el riel, y el papel queda para lo elegido. */
html[data-theme="dark"] .menu { --panel: rgb(255 255 255 / 0.06); --panel-texto: #ecebe6; --panel-suave: #a9a6bd; --panel-encima: color-mix(in srgb, #ecebe6 6%, transparent);
  --panel-elegido: rgb(255 255 255 / 0.12); --panel-borde: color-mix(in srgb, #ecebe6 13%, transparent); --panel-pastilla: rgb(255 255 255 / 0.16); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .menu { --panel: rgb(255 255 255 / 0.06); --panel-texto: #ecebe6; --panel-suave: #a9a6bd; --panel-encima: color-mix(in srgb, #ecebe6 6%, transparent);
    --panel-elegido: rgb(255 255 255 / 0.12); --panel-borde: color-mix(in srgb, #ecebe6 13%, transparent); --panel-pastilla: rgb(255 255 255 / 0.16); }
}
.menu :focus-visible { outline: 2px solid var(--cinta); outline-offset: 2px; }

/* ---------- El riel ---------- */

.menu-riel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  min-height: 0;
  padding: 1.1rem 0 1rem;
  overflow-y: auto;
  background: var(--riel);
  color: var(--riel-texto);
  /* Con la ventana baja se desplaza: su barra es más fina y el mismo hueco a los dos lados deja los íconos al centro. */
  scrollbar-gutter: stable both-edges;
}
.menu-riel::-webkit-scrollbar { width: 6px; }
.menu-riel::-webkit-scrollbar-thumb { min-height: 2rem; border-width: 2px; }
/* El ícono de la marca: su favicon sobre una pastilla de papel, o su inicial si no tiene uno. */
.menu-isotipo { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.75rem; background: var(--papel-m); color: var(--tinta-m);
  text-decoration: none; }
.menu-isotipo img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.menu-isotipo-letra { font-size: 1.25rem; font-stretch: 115%; font-weight: 800; }
/* Sin partirse en dos columnas o filas (la regla de nav de styles.css las deja partirse). */
.menu-secciones { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0.7rem; }
.menu-grupo { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
/* Entre los grupos (Herramientas, Empresa), una raya corta. */
.menu-grupo + .menu-grupo { padding-top: 0.7rem; border-top: 1px solid var(--riel-borde); }
.menu-grupo[hidden] { display: none; }

/* Una sección: un cuadrado con su ícono. Su nombre es para los lectores de pantalla (y el título, al pasar el puntero). */
.menu-riel .menu-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  color: var(--riel-texto);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.menu-riel .menu-item:hover { background: var(--riel-encima); }
.menu-riel .menu-icono { width: 1.3rem; height: 1.3rem; }
.menu-riel .menu-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* La abierta: un cuadrado de papel con su ojal a la izquierda. */
.menu-riel .menu-item[aria-current="page"] { background: var(--papel-m); color: var(--tinta-m); box-shadow: 0 6px 14px -8px #000000b3; }
.menu-riel .menu-item[aria-current="page"]::before { content: ''; position: absolute; top: 50%; left: 0.32rem; width: 0.32rem; height: 0.32rem; margin-top: -0.16rem;
  border-radius: 50%; background: var(--riel); }
/* Su atajo: un número chico en la esquina, que se ve al pasar el puntero o con el foco. */
.menu-riel .menu-atajo {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  display: grid;
  place-items: center;
  min-width: 1rem;
  height: 1rem;
  box-sizing: border-box;
  border-radius: 0.3rem;
  background: var(--riel);
  color: var(--riel-suave);
  font-family: inherit;
  font-size: 0.62rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.menu-riel .menu-item:is(:hover, :focus-visible) .menu-atajo { opacity: 1; }
.menu-atajo:empty { display: none; }
.menu-icono {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- El panel ---------- */

.menu-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--panel-borde);
  background: var(--panel);
  color: var(--panel-texto);
}
/* Su contenido guarda su ancho: al ocultarse, se corre con el borde en vez de apretarse (más abajo). */
.menu-panel > * { width: var(--ancho-panel-fijo, 15rem); box-sizing: border-box; }
.panel-cuerpo { flex: 1; min-height: 0; padding: 1.35rem 0.85rem 1rem; overflow-y: auto; }
/* Un bloque y no la fila de nav de styles.css. */
.panel-lista { display: block; }
.panel-titulo { margin: 0 0 1rem 0.55rem; font-size: 1.12rem; font-stretch: 108%; font-weight: 700; }
.panel-grupo + .panel-grupo { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--panel-borde); }
.panel-grupo-titulo { margin: 0 0 0.35rem 0.55rem; color: var(--panel-suave); font-size: 0.78rem; font-weight: 600; }
/* Una categoría: ícono, nombre y su cantidad a la derecha (con números del mismo ancho, para que no bailen). */
.panel-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
  margin: 1px 0;
  padding: 0.48rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
.panel-item:hover { background: var(--panel-encima); }
.panel-item .menu-icono { color: var(--panel-suave); }
.panel-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-cuenta { flex: none; color: var(--panel-suave); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
/* La elegida: un fondo un poco más oscuro, con borde. */
.panel-item[aria-current="true"] { border-color: var(--panel-borde); background: var(--panel-elegido); font-weight: 650; }
.panel-item[aria-current="true"] .menu-icono { color: currentColor; }

/* ---------- El pie del panel: tu credencial, el tema y el logo ---------- */

.menu-pie { display: grid; gap: 0.7rem; padding: 0.8rem 0.85rem 1rem; border-top: 1px solid var(--panel-borde); }
.menu-yo { position: relative; }
.menu-yo-boton {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem;
  border-radius: 0.65rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s;
}
.menu-yo-boton::-webkit-details-marker { display: none; }
.menu-yo-boton:hover { background: var(--panel-encima); }
.menu-inicial { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; background: var(--cinta); color: #15172b;
  font-weight: 800; font-size: 0.88rem; font-stretch: 110%; }
.menu-yo-texto { flex: 1; min-width: 0; line-height: 1.2; }
.menu-yo-texto strong, .menu-yo-texto small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-yo-texto strong { font-size: 0.88rem; font-weight: 700; }
.menu-yo-texto small { color: var(--panel-suave); font-size: 0.75rem; }
.menu-yo-flecha { color: var(--panel-suave); transform: rotate(90deg); transition: transform 0.2s; }
.menu-yo[open] .menu-yo-flecha { transform: rotate(-90deg); }
/* Desplegada: una credencial de papel que sube desde el pie, con tu correo, tu rol, tu cuenta y Salir. */
.menu-yo-cuerpo {
  position: absolute;
  bottom: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0.7rem;
  border-radius: 0.8rem;
  background: var(--papel-m);
  color: var(--tinta-m);
  box-shadow: 0 18px 34px -16px #000000a6, 0 0 0 1px color-mix(in srgb, #15172b 8%, transparent);
}
.menu-yo-datos { margin: 0 0 0.5rem; }
.menu-yo-datos small { display: block; overflow: hidden; color: #5b5f78; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.menu-rol { display: flex; justify-content: space-between; align-items: center; margin: 0 0 0.45rem; padding: 0.45rem 0; border-block: 1px solid color-mix(in srgb, #15172b 12%, transparent);
  color: #5b5f78; font-size: 0.74rem; }
.menu-rol b { color: var(--tinta-m); font-size: 0.82rem; }
.menu-yo-cuerpo .menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-yo-cuerpo .menu-item:hover { background: color-mix(in srgb, #15172b 6%, transparent); }
.menu-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-extra { flex: none; color: #5b5f78; font-size: 0.72rem; }

/* Selector de tema: tres opciones y una pastilla que se desliza a la elegida. */
.tema {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 3px;
  border: 1px solid var(--panel-borde);
  border-radius: 999px;
  background: var(--panel-encima);
}
.tema legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tema input { position: absolute; opacity: 0; pointer-events: none; width: auto; margin: 0; }
.tema label {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.3rem 0;
  border-radius: 999px;
  color: var(--panel-suave);
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s;
}
.tema input:checked + label { color: var(--panel-texto); font-weight: 650; }
.tema input:focus-visible + label { outline: 2px solid var(--cinta); outline-offset: 1px; }
.tema-pastilla {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 999px;
  background: var(--panel-pastilla);
  box-shadow: 0 1px 3px #00000033;
  transition: transform 0.25s ease;
}
.tema:has(#tema-oscuro:checked) .tema-pastilla { transform: translateX(100%); }
.tema:has(#tema-auto:checked) .tema-pastilla { transform: translateX(200%); }

/* El logo firma abajo: el de fondo claro sobre el papel y, de noche, el de fondo oscuro. Una agencia sin uno para la
   noche pone el suyo sobre una pastilla de papel. */
.menu-marca { display: block; padding: 0.15rem 0.45rem 0; line-height: 0; }
.menu .brand-logo { height: 1.25rem; max-width: 8rem; opacity: 0.8; }
.menu .brand-logo-oscuro { display: none; }
html[data-theme="dark"] .menu .brand-logo:has(+ .brand-logo-oscuro) { display: none; }
html[data-theme="dark"] .menu .brand-logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .menu .brand-logo:has(+ .brand-logo-oscuro) { display: none; }
  html:not([data-theme]) .menu .brand-logo-oscuro { display: block; }
}
html[data-theme="dark"] .menu .brand-logo:only-child { padding: 0.25rem 0.45rem; border-radius: 0.45rem; background: var(--papel-m); }

/* El botón «Menú» solo existe en el celular. */
.menu-boton { display: none; }

/* ---------- El editor del bot: el tablero a toda la pantalla y la barra flotando encima ---------- */

/* Sin menú lateral (se vuelve con «←») y sin márgenes: el lienzo llega a los cuatro bordes. */
body.espacio[data-shown="editor"] { grid-template-columns: minmax(0, 1fr); }
body.espacio[data-shown="editor"] > .menu { display: none; }
body.espacio[data-shown="editor"] > main { display: flex; flex-direction: column; max-width: none; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; }
/* Los avisos («Guardado», errores) flotan arriba al centro en vez de empujar el tablero. */
body.espacio[data-shown="editor"] > main > #message:empty { display: none; }
body.espacio[data-shown="editor"] > main > #message:not(:empty) {
  position: fixed;
  top: 4.4rem;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  max-width: min(36rem, 90vw);
  margin: 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--lienzo-borde);
  border-radius: 999px;
  background: var(--lienzo-control);
  box-shadow: var(--lienzo-sombra);
  font-size: 0.88rem;
}
section[data-view="editor"]:not([hidden]) { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* La barra flota sobre el lienzo; entre sus pastillas el puntero pasa al tablero (se puede panear). Va sobre los nodos y
   bajo el panel para agregar nodos (z-index 6), los cajones (20) y el modal del nodo (30). */
.editor-barra { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.75rem; pointer-events: none; }
.editor-barra > * { pointer-events: auto; }
/* A la izquierda, una pastilla: volver, el nombre y el estado. */
.editor-titulo { display: flex; align-items: center; gap: 0.35rem; min-width: 0; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); padding: 0.25rem 0.85rem 0.25rem 0.25rem;
  border: 1px solid var(--lienzo-borde); border-radius: 999px; background: var(--lienzo-control); box-shadow: var(--lienzo-sombra); }
.editor-titulo .boton-redondo { border-color: transparent; background: none; }
.editor-titulo .boton-redondo:hover { background: var(--lienzo-control-hover); }
.editor-acciones > * { box-shadow: var(--lienzo-sombra); }
/* El nombre es el título: se edita ahí mismo, y solo se marca al pasar el puntero o al escribir. Mide lo que su texto. */
.editor-nombre {
  field-sizing: content;
  flex: 0 1 auto;
  width: auto;
  min-width: 6rem;
  max-width: min(32rem, 100%);
  margin: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  background: none;
  color: var(--texto-fuerte);
  font-family: var(--fuente-titulos);
  letter-spacing: -0.01em;
  font-size: 1.12rem;
  font-weight: 700;
  text-overflow: ellipsis;
}
.editor-nombre:hover:not(:disabled) { border-color: var(--borde); }
.editor-nombre:focus { border-color: var(--foco); outline: none; background: var(--superficie); }
.editor-nombre:disabled { color: var(--texto-fuerte); opacity: 1; }
.editor-estado { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--texto-suave); font-size: 0.82rem; white-space: nowrap; }
.editor-acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
/* El tablero ocupa todo (el formulario lo envuelve: Enter en sus campos se comporta como siempre). «Sin cambios» y «+ Nodo»
   bajan para quedar debajo de las pastillas de la barra. */
#bot-form { flex: 1; min-height: 0; display: flex; }
#bot-form > #board { flex: 1; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; }
#bot-form .board-saved { top: 70px; }
#bot-form .board-add { top: 68px; }
/* «⋯»: lo que se usa menos, en un menú (popover nativo) bajo su botón. */
#editor-mas-boton { anchor-name: --editor-mas; }
.editor-menu {
  position-anchor: --editor-mas;
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
  margin: 0.4rem 0 0;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid var(--borde);
  border-radius: 0.9rem;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--tinta) 18%, transparent);
}
.editor-menu:popover-open { display: flex; flex-direction: column; }
@supports not (anchor-name: --editor-mas) {
  .editor-menu { position: fixed; top: 4.25rem; right: 1.5rem; }
}
.editor-menu button { width: 100%; margin: 0; padding: 0.55rem 0.75rem; border: 0; border-radius: 0.6rem; background: none; color: inherit; font: inherit;
  font-size: 0.92rem; text-align: left; }
.editor-menu button:hover, .editor-menu button:focus-visible { background: var(--encima); outline: none; }
.editor-menu .es-peligro { color: oklch(0.55 0.2 25); }
#details-panel input { border: 1px solid var(--borde); border-radius: 0.6rem; background: var(--superficie); color: var(--texto); }

/* ---------- Ocultar y desplegar el panel (menu.js, menuToggle) ---------- */

/* El riel se queda: lo que se oculta es el panel de las categorías. Su columna se angosta hasta cero y su contenido se va
   con el borde (no se aprieta: guarda su ancho y se corre). Al cerrarse acelera y frena al final (ease-in-out: ya estaba
   en pantalla); al abrirse entra con impulso y se acomoda largo (la curva de los cajones), y las categorías llegan en
   cascada. El tirador viaja pegado al borde. Solo en pantallas anchas; en el celular el panel se abre con «Menú». */
:root {
  --curva-suave: cubic-bezier(0.77, 0, 0.175, 1);
  --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --curva-frena: cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-tirador { display: none; }
@media (min-width: 56.01rem) {
  /* El panel va encima del contenido (no lo empuja): la grilla solo guarda el riel, y el panel se abre o se cierra con su
     ancho, flotando sobre la página con una sombra al borde. */
  body.espacio { grid-template-columns: var(--ancho-riel) minmax(0, 1fr); }
  .menu { z-index: 15; grid-template-columns: var(--ancho-riel); --panel: rgb(250 247 240 / 0.8); }
  .menu-panel { position: absolute; top: 0; bottom: 0; left: var(--ancho-riel); width: var(--ancho-panel);
    box-shadow: 14px 0 32px -22px oklch(0.35 0.12 290 / 0.6); transition: width 520ms var(--curva-cajon); }
  html.menu-oculto body.espacio { --ancho-panel: 0rem; }
  html.menu-oculto .menu-panel { box-shadow: none; transition-duration: 420ms; transition-timing-function: var(--curva-suave); }
  html[data-theme="dark"] .menu { --panel: rgb(26 22 50 / 0.82); }
}
@media (min-width: 56.01rem) and (prefers-color-scheme: dark) {
  html:not([data-theme]) .menu { --panel: rgb(26 22 50 / 0.82); }
}
@media (min-width: 56.01rem) {
  .menu-panel > * { transform: translateX(calc(var(--ancho-panel) - 15rem)); transition: transform 520ms var(--curva-cajon), opacity 300ms var(--curva-frena); }
  html.menu-oculto .menu-panel { border-right-color: transparent; }
  html.menu-oculto .menu-panel > * { opacity: 0; transition: transform 420ms var(--curva-suave), opacity 260ms ease 120ms; }
  /* El tirador: una lengüeta del color del riel, pegada al borde del panel; su flecha mira hacia donde va a ir. */
  .menu-tirador {
    position: fixed;
    top: 7.2rem;
    left: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 3.4rem;
    padding: 0;
    border: 0;
    border-radius: 0 0.6rem 0.6rem 0;
    background: var(--riel);
    color: var(--riel-texto);
    box-shadow: 4px 0 10px -4px #00000059;
    transform: translateX(var(--ancho-menu));
    transition: transform 520ms var(--curva-cajon), width 150ms ease;
    cursor: pointer;
  }
  html.menu-oculto .menu-tirador { transition: transform 420ms var(--curva-suave), width 150ms ease; }
  .menu-tirador .menu-icono { width: 1rem; height: 1rem; transition: transform 420ms var(--curva-suave); }
  html.menu-oculto .menu-tirador .menu-icono { transform: scaleX(-1); }
  .menu-tirador:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
}
@media (min-width: 56.01rem) and (hover: hover) and (pointer: fine) {
  .menu-tirador:hover { width: 1.85rem; }
}
/* Al abrirse: las categorías entran en cascada desde la izquierda. */
@media (min-width: 56.01rem) and (prefers-reduced-motion: no-preference) {
  html.menu-abriendo .panel-item { animation: entra-seccion 420ms var(--curva-frena) both; animation-delay: calc(var(--n, 0) * 22ms + 140ms); }
}
@keyframes entra-seccion { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) {
  body.espacio, .menu-panel, .menu-panel > *, .menu-tirador, .menu-tirador .menu-icono { transition: none !important; }
}

/* ---------- Celular: el riel es una barra arriba y «Menú» abre el panel debajo ---------- */

@media (max-width: 56rem) {
  body.espacio { display: block; }
  .menu { position: sticky; z-index: 15; display: block; height: auto; max-height: 100vh; overflow-y: auto; }
  /* El riel es una barra: el logo, las secciones en una fila que se desliza de lado y «Menú». */
  .menu-riel { flex-direction: row; gap: 0.6rem; padding: 0.5rem 0.75rem; scrollbar-gutter: auto; }
  .menu-isotipo { flex: none; width: 2.3rem; height: 2.3rem; }
  .menu-secciones, .menu-grupo { flex-direction: row; }
  .menu-secciones { flex: 1; min-width: 0; padding: 0.15rem 0 0.15rem 0.5rem; overflow-x: auto; scrollbar-width: none; }
  .menu-grupo { flex: none; }
  .menu-grupo + .menu-grupo { padding: 0 0 0 0.6rem; border-top: 0; border-left: 1px solid var(--riel-borde); }
  .menu-riel .menu-item { width: 2.4rem; height: 2.4rem; }
  .menu-atajo { display: none; }
  .menu-boton {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--riel-borde);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
  }
  .menu-panel { display: none; border-right: 0; border-bottom: 1px solid var(--panel-borde); }
  .menu.is-open .menu-panel { display: flex; }
  .menu-panel > * { width: auto; }
  .menu-yo-cuerpo { position: static; margin-top: 0.4rem; }
  /* El editor: la barra va arriba, sin flotar (en una o dos líneas), y el tablero ocupa el resto. */
  .editor-barra { position: static; padding: 0.6rem; }
  #bot-form .board-saved, #bot-form .board-add { top: 12px; }
  .editor-acciones { margin-left: 0; flex-wrap: wrap; }
}

/* ---------- Cambio de tema: la ola de crema (tema-ola.js) ---------- */

/* Sin el fundido de siempre: la página nueva cae recortada con la ola y la vieja queda debajo. Entre los dos bordes se ve
   el fondo del grupo: la franja de acento, en las dos direcciones (el petróleo no se vería sobre la página oscura). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.tema-ola::view-transition-group(root) { background: var(--acento, var(--lavanda)); }

/* ---------- La barra lateral: riel índigo y panel de vidrio ----------
   Para que entone con el tablero de vidrio: el riel toma el índigo del tablero de noche, el panel es vidrio sobre las
   mismas luces (que corren detrás de toda la página). La sección abierta lleva el ojal en el violeta del tráfico, y la categoría
   elegida, una línea del mismo violeta a la izquierda. */
body.espacio {
  background:
    radial-gradient(50% 55% at 6% 8%, var(--luz-1, transparent), transparent 70%) fixed,
    radial-gradient(40% 50% at 96% 12%, var(--luz-2, transparent), transparent 70%) fixed,
    radial-gradient(55% 45% at 45% 108%, var(--luz-3, transparent), transparent 70%) fixed,
    var(--fondo);
}
.menu-riel .menu-item[aria-current="page"] { box-shadow: 0 0 0 4px color-mix(in oklch, var(--ojal) 30%, transparent), 0 6px 14px -8px #000000b3; }
.menu-riel .menu-item[aria-current="page"]::before { background: var(--ojal); }
.menu-panel { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.panel-item[aria-current="true"] { border-color: rgb(255 255 255 / 0.95); box-shadow: inset 3px 0 0 var(--ojal); }
.panel-item[aria-current="true"] .menu-icono { color: var(--ojal); }
html[data-theme="dark"] .panel-item[aria-current="true"] { border-color: rgb(255 255 255 / 0.2); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .panel-item[aria-current="true"] { border-color: rgb(255 255 255 / 0.2); } }
@media (prefers-reduced-transparency: reduce) {
  .menu { --panel: #f6f3ec; }
  html[data-theme="dark"] .menu { --panel: #1d1a33; }
  .menu-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* En el editor del bot, en pantallas anchas, está el menú como en las demás secciones: el riel y el panel, que va encima
   del tablero sin quitarle ancho (se cierra con el tirador o «[»). En el celular el editor sigue sin menú. */
@media (min-width: 56.01rem) {
  body.espacio[data-shown="editor"] { grid-template-columns: var(--ancho-riel) minmax(0, 1fr); }
  body.espacio[data-shown="editor"] > .menu { display: grid; }
  /* Lo que flota a la izquierda del tablero (volver y el nombre, «Sin cambios», el zoom) se corre al borde del panel
     abierto para no quedar debajo; el tablero sigue a todo el ancho. */
  body.espacio[data-shown="editor"] :is(.editor-barra, .board-saved, .board-tools) {
    margin-left: var(--ancho-panel); transition: margin-left 520ms var(--curva-cajon); }
  /* Los botones del centro (Asistente, Tráfico…) y el resumen del tráfico, centrados en lo que queda a la vista. */
  body.espacio[data-shown="editor"] :is(.board-bottom, .board-traffic) {
    margin-left: calc((var(--ancho-panel) - var(--ancho-inspector)) / 2); transition: margin-left 520ms var(--curva-cajon); }
  html.menu-oculto body.espacio[data-shown="editor"] :is(.editor-barra, .board-saved, .board-tools, .board-bottom, .board-traffic) { transition-duration: 420ms; transition-timing-function: var(--curva-suave); }
}

/* El inspector del nodo (tablero.js) a la derecha del tablero: los botones del centro se centran en lo que queda a la
   vista. --ancho-inspector: su ancho más el margen, o 0. */
section[data-view="editor"] { --ancho-inspector: 0px; }
section[data-view="editor"]:has(.board.has-inspector) { --ancho-inspector: min(432px, 100%); }
section[data-view="editor"]:has(.board.has-inspector.inspector-ancho) { --ancho-inspector: max(432px, min(772px, 100% - var(--ancho-panel, 0px) - 288px)); }
/* El inspector parte bajo la barra del editor: la barra (volver, nombre, Detalles, Guardar) conserva todo su ancho. */
section[data-view="editor"] :is(.board > .board-modal, .board > .board-panel.is-drawer) { top: 64px; }
@media (min-width: 600.01px) and (max-width: 56rem) {
  section[data-view="editor"] :is(.board-bottom, .board-traffic) { margin-left: calc(var(--ancho-inspector) / -2); transition: margin-left 240ms var(--curva-cajon); }
}
@media (max-width: 600px) { section[data-view="editor"] :is(.board > .board-modal, .board > .board-panel.is-drawer) { top: auto; } }