/* Overrides responsive del armazón común (shell, topbar, diálogos). Van al
   final del núcleo porque nacieron tarde en la hoja original y deben seguir
   ganando a lo anterior. El compactado del topbar vivía escondido en la
   pantalla de espera del analizador (95) y es de todo el sitio. */
@media (max-width: 768px) {
  .shell {
    padding: 16px;
  }
  
  .topbar {
    padding: 0 16px;
  }
  .dialog-header, .dialog-fields, .dialog-footer { padding-left: 18px; padding-right: 18px; }

  .topbar-left {
    gap: 8px;
  }

  .topbar-nav {
    margin-left: 8px;
    gap: 3px;
  }
  .topbar-nav .nav-dropdown-menu span { display: inline; }
  .topbar-nav .nav-dropdown-chevron { display: none; }
  .topbar-nav .nav-dropdown-menu { right: 0; left: auto; min-width: 205px; }
  .topbar-nav .nav-dropdown-menu::before { right: 17px; left: auto; }

  .brand-logo-frame {
    width: 64px;
    flex-basis: 64px;
  }

  .brand-logo {
    width: 64px;
    max-width: 64px;
  }

  .brand-text {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 * Cromo del sitio: navegación del topbar, hamburguesa, menú de
 * administración y selector de idioma (todo lo pinta base.html), con los
 * tokens --brand que usan. Vivía en landing.css, que cargaba la última:
 * por eso este bloque va al final del núcleo y debe seguir ahí.
 * ------------------------------------------------------------------ */
:root {
  --brand: #006fc0;
  --brand-dark: #005596;
  --brand-darker: #00447a;
  --brand-soft: rgba(0, 111, 192, 0.08);
  --brand-softer: rgba(0, 111, 192, 0.04);
  --brand-line: rgba(0, 111, 192, 0.18);
  --brand-grey: #7f7f7f;
  --radius-brand: 20px;
}

/* ------------------------------------------------------------------ *
 * Barra de navegación de las páginas públicas
 * ------------------------------------------------------------------ */

/* La navegación va pegada a la derecha en todo el sitio, como en el sistema
   anterior: coherencia entre portada, catálogo, analizador y API. */
.topbar-left {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar-nav {
  margin-left: auto;
}

.topbar-nav .nav-anchor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.topbar-nav .nav-anchor:hover {
  color: var(--brand);
  background: var(--brand-soft);
}

.topbar-nav .nav-anchor.is-active {
  color: var(--brand);
  background: var(--brand-soft);
}

.topbar-nav .nav-anchor i {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

/* ------------------------------------------------------------------ *
 * Grupos de la barra: navegación · herramientas · sesión · idioma.
 * Separados con divisores para que no quede todo apelotonado.
 * ------------------------------------------------------------------ */

/* Herramientas (Analizador, API): naturaleza distinta a la redacción, en tono
   algo más discreto y con un divisor que las separa de la navegación. */
.topbar-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}
.topbar-tools .tool-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 9px;
  white-space: nowrap;
  transition: var(--transition-smooth);
}
.topbar-tools .tool-link i { flex-shrink: 0; width: 16px; height: 16px; }
.topbar-tools .tool-link:hover { color: var(--brand); background: var(--brand-soft); }
.topbar-tools .tool-link.is-active { color: var(--brand); background: var(--brand-soft); }

/* ------------------------------------------------------------------ *
 * Menú de sesión de usuario (administración, desarrollo, lingüistas y
 * consumidores de la API). Unificado en un único desplegable neutro,
 * estilísticamente coherente con el selector de idioma y la cabecera.
 * ------------------------------------------------------------------ */
.user-menu-group,
.admin-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--border-color);
}

.user-menu,
.admin-menu-account {
  position: relative;
}

.user-menu-summary,
.admin-menu-account > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px 0 8px;
  list-style: none;
  cursor: pointer;
  border: 1px solid #cce3f5;
  border-radius: 11px;
  background: #edf5fc;
  color: #005596;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.user-menu-summary::-webkit-details-marker,
.admin-menu-account > summary::-webkit-details-marker {
  display: none;
}

.user-menu-summary:hover,
.user-menu[open] > summary,
.admin-menu-account > summary:hover,
.admin-menu-account[open] > summary {
  border-color: #9ac7eb;
  background: #e0f0fa;
  color: #00447a;
}

.user-menu-summary:focus-visible,
.admin-menu-account > summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #d8ecf9;
  color: #005596;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.user-menu-summary:hover .user-menu-avatar,
.user-menu[open] .user-menu-avatar {
  background: #c5e3f7;
  color: #00447a;
}

.user-menu-avatar i,
.user-menu-icon,
.admin-menu-account > summary > i:first-child {
  width: 13.5px;
  height: 13.5px;
  flex-shrink: 0;
}

.user-menu-label {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #004b80;
  font-size: 13px;
  font-weight: 600;
}

.user-menu-summary:hover .user-menu-label,
.user-menu[open] .user-menu-label {
  color: #003660;
}

.user-menu .nav-dropdown-chevron,
.admin-menu-account .nav-dropdown-chevron {
  width: 13px;
  height: 13px;
  color: #6a92b5;
  transition: transform 0.18s ease;
}

.user-menu[open] .nav-dropdown-chevron,
.admin-menu-account[open] .nav-dropdown-chevron {
  transform: rotate(180deg);
  color: #00447a;
}

/* Desplegable de usuario */
.user-menu-dropdown,
.admin-menu-list {
  position: absolute;
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  z-index: 130;
  min-width: 220px;
  max-width: 290px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}

.user-menu-dropdown::before,
.admin-menu-list::before {
  left: auto;
  right: 18px;
}

/* Cabecera de identidad en el desplegable */
.user-menu-header {
  padding: 7px 10px 8px;
}

.user-menu-name {
  display: block;
  color: var(--text-main);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.user-menu-email {
  color: var(--text-muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.user-menu-badge {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 5px;
  background: var(--brand-soft);
  color: var(--brand);
}

.user-menu-sep,
.admin-menu-list .editor-menu-sep {
  display: block;
  height: 1px;
  margin: 5px 4px;
  background: var(--border-color);
}

.user-menu-dropdown .nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--text-main);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.user-menu-dropdown .nav-dropdown-item i {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.user-menu-dropdown .nav-dropdown-item:hover {
  color: var(--brand);
  background: var(--brand-softer);
}

.user-menu-dropdown .nav-dropdown-item:hover i {
  color: var(--brand);
}

.user-menu-dropdown .nav-dropdown-item.is-active {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}

.user-menu-dropdown .nav-dropdown-item.is-active i {
  color: var(--brand);
}

.admin-menu-logout,
.user-menu-logout {
  margin: 0;
}

.admin-menu-logout button,
.user-menu-logout button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  color: #b91c1c;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.admin-menu-logout button:hover,
.user-menu-logout button:hover {
  background: #fef2f2;
}

.admin-menu-logout button i,
.user-menu-logout button i {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Selector de idioma con bandera real. */
.lang-select { position: relative; margin-left: 10px; }
.lang-select > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px 0 11px;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: #fff;
  transition: var(--transition-smooth);
}
.lang-select > summary::-webkit-details-marker { display: none; }
.lang-select > summary:hover { border-color: var(--brand-line); background: var(--brand-softer); }
.lang-select > summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* Icono de IDIOMA (Lucide `languages`), no de país: las banderas se retiraron a
   propósito y no vuelven. Mismo tamaño que el resto de iconos de la barra. */
.lang-select .lang-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--brand);
}
.lang-select .lang-code { font-size: 13px; font-weight: 600; color: var(--text-main); }
.lang-select .nav-dropdown-chevron { width: 15px; height: 15px; color: var(--text-muted); transition: transform 0.18s ease; }
.lang-select[open] .nav-dropdown-chevron { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  /* Ancla a la derecha del selector (que está al borde de la barra); si no,
     hereda left:0 de .nav-dropdown-menu y se sale por la derecha. */
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  z-index: 130;
  min-width: 172px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}
/* La flechita también a la derecha, bajo el selector. */
.lang-menu::before { left: auto; right: 18px; }
.lang-menu .nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--text-main);
  font-size: 13.5px;
  text-decoration: none;
  border-radius: 8px;
}
.lang-menu .nav-dropdown-item:hover { background: var(--brand-softer); }
.lang-menu .nav-dropdown-item.is-active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }

/* Resoluciones intermedias (1260px - 1420px): compactar padding y gaps para que todo quepa en 1 línea */
@media (max-width: 1420px) {
  .topbar {
    padding: 0 16px;
  }
  .topbar-nav {
    gap: 4px;
    margin-left: 16px;
  }
  .topbar-nav .nav-anchor {
    padding: 0 8px;
    font-size: 13.5px;
    gap: 5px;
  }
  .topbar-tools {
    margin-left: 8px;
    padding-left: 8px;
    gap: 2px;
  }
  .topbar-tools .tool-link {
    padding: 0 8px;
    font-size: 13px;
    gap: 5px;
  }
  .admin-menu {
    gap: 5px;
    margin-left: 8px;
    padding-left: 8px;
  }
  .admin-menu-link {
    padding: 0 8px;
    font-size: 13px;
  }
}

/* Colapso progresivo: herramientas secundarias y usuario a solo icono (1140px - 1260px) */
@media (max-width: 1260px) {
  .topbar-tools .tool-link > span,
  .admin-menu-link > span,
  .user-menu-label {
    display: none;
  }
  .topbar-tools .tool-link,
  .admin-menu-link {
    padding: 0 9px;
  }
}

/* Por debajo de 1140px la barra pasa a fila compacta de iconos con tooltip antes de la hamburguesa a 900px */
@media (max-width: 1140px) {
  .topbar-nav .nav-anchor {
    padding: 0 8px;
  }

  .topbar-nav .nav-anchor > span,
  .topbar-tools .tool-link > span,
  .admin-menu-link > span,
  .user-menu-label {
    display: none;
  }

  .lang-select .lang-code { display: none; }
}

/* ------------------------------------------------------------------ *
 * Hamburguesa: sustituye a la fila de iconos por debajo de 900px. Entre
 * 900 y 1180px la fila de arriba sigue siendo solo iconos con `title`
 * (tooltip en ratón); por debajo de 900 ese tooltip ya no es alcanzable
 * en táctil, así que ahí se cambia a un panel con las etiquetas visibles.
 * El panel reemite topbar_nav, topbar_tools y topbar_admin (base.html) en
 * vez de duplicar los enlaces a mano: misma fuente, dos sitios donde CSS
 * decide cuál de los dos se ve según el ancho.
 * ------------------------------------------------------------------ */
.nav-hamburger {
  position: relative;
  display: none;
}

.nav-hamburger-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  list-style: none;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: #fff;
  transition: var(--transition-smooth);
}
.nav-hamburger-toggle::-webkit-details-marker { display: none; }
.nav-hamburger-toggle:hover,
.nav-hamburger[open] .nav-hamburger-toggle { border-color: var(--brand-line); background: var(--brand-softer); }
.nav-hamburger-toggle i { width: 20px; height: 20px; }

/* Fijo al hueco bajo la barra (64px) en vez de anclado al propio botón: la
   hamburguesa no es el elemento más a la derecha (el idioma va después, ver
   base.html), así que un `right: 0` relativo al botón se salía por la
   izquierda. Fijo a la ventana, alineado con el mismo margen que ya usa la
   barra a este ancho (16px), siempre cabe. */
.nav-hamburger-panel {
  position: fixed;
  top: 74px;
  right: 16px;
  left: auto;
  z-index: 130;
  display: grid;
  gap: 4px;
  width: min(300px, calc(100vw - 32px));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
  backdrop-filter: blur(14px);
}
/* `position: fixed` con `display: grid` explícito de arriba: el propio
   navegador ya deja de pintar el contenido de un `<details>` cerrado, pero
   sin este `display: none` explícito el elemento sigue siendo medible
   (`getBoundingClientRect`) con un `top`/`left` que no corresponde a nada
   visible. No cambia el comportamiento (sigue oculto), pero evita depender
   de ese detalle de implementación. */
.nav-hamburger:not([open]) .nav-hamburger-panel {
  display: none;
}

/* Cada grupo (anclas, herramientas, administración) en columna, con un
   separador fino entre grupos consecutivos. */
.nav-hamburger-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.nav-hamburger-group + .nav-hamburger-group {
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.nav-hamburger-panel .nav-anchor,
.nav-hamburger-panel .tool-link,
.nav-hamburger-panel .admin-menu-link,
.nav-hamburger-panel .user-menu-summary {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
}
/* Por debajo de 1180px las etiquetas se ocultan (regla de arriba); dentro
   del panel sí caben, y son la única pista de qué es cada enlace. */
.nav-hamburger-panel .nav-anchor > span,
.nav-hamburger-panel .tool-link > span,
.nav-hamburger-panel .user-menu-label {
  display: inline;
}

/* El grupo de administración conserva su propio desplegable anidado
   (sesión / salir); el botón directo ocupa toda la fila, como el resto. */
.nav-hamburger-admin .admin-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 4px;
}
.nav-hamburger-admin .admin-menu-account > summary {
  width: 100%;
  min-height: 44px;
}
/* Ese desplegable anidado se posiciona normalmente en `absolute` (pensado
   para colgar de la barra); dentro del panel, que ya recorta con
   `overflow-y: auto` para poder desplazarse él mismo, un hijo absoluto que
   se sale de su caja queda cortado e invisible aunque esté "abierto". Aquí
   fluye en su sitio, como una fila más. */
.nav-hamburger-admin .admin-menu-account .nav-dropdown-menu {
  position: static;
  width: 100%;
  margin-top: 2px;
  box-shadow: none;
}
.nav-hamburger-admin .admin-menu-account .nav-dropdown-menu::before {
  display: none;
}

@media (max-width: 899px) {
  .topbar-left > .topbar-nav,
  .topbar > .topbar-tools,
  .topbar > .admin-menu {
    display: none;
  }
  .nav-hamburger {
    display: block;
  }
}