/* Paleta de marca Neuron para el sitio de documentación.
 *
 * Los valores salen de frontend/app/globals.css — son literalmente las mismas
 * variables que pinta el panel, para que docs.neuronstudio.ai y
 * app.neuronstudio.ai se vean como un solo producto y no como dos.
 *
 * Naranja  #f26e32  --primary del panel
 * Azul     #28a1be  --secondary
 * Navy     #073859  --accent-foreground
 * Gris osc #444444  --foreground
 * Gris cl  #a8a6a8  --muted-foreground
 */

:root {
  --neuron-orange: #f26e32;
  --neuron-blue:   #28a1be;
  --neuron-navy:   #073859;
  --neuron-dark:   #444444;
  --neuron-gray:   #a8a6a8;
}

/* ---------- Modo claro ---------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:         #ffffff;
  --md-primary-fg-color--light:  #ffffff;
  --md-primary-fg-color--dark:   var(--neuron-navy);
  --md-primary-bg-color:         var(--neuron-dark);
  --md-primary-bg-color--light:  var(--neuron-gray);

  --md-accent-fg-color:          var(--neuron-orange);
  --md-typeset-a-color:          var(--neuron-navy);
  --md-default-fg-color:         var(--neuron-dark);
}

/* Header blanco: hace falta una línea inferior o flota sobre el contenido. */
[data-md-color-scheme="default"] .md-header {
  border-bottom: 1px solid #e5e5e5;
  box-shadow: none;
}

/* ---------- Modo oscuro ---------- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:         #16232e;
  --md-primary-fg-color--light:  #24333f;
  --md-primary-fg-color--dark:   #0d1720;
  --md-primary-bg-color:         #ffffff;

  --md-accent-fg-color:          var(--neuron-orange);
  --md-typeset-a-color:          #6fc4d8;
}

/* El logo es negro sobre transparente. En oscuro se invierte a blanco; si no,
 * desaparece contra el header. Un solo archivo, dos modos. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  filter: invert(1) brightness(1.8);
}

.md-header__button.md-logo img {
  height: 1.5rem;
  width: auto;
}

/* ---------- Acentos de marca ---------- */

/* La pestaña activa y el ítem de nav seleccionado en naranja: es el color que
 * el cliente ya asocia con el panel. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--neuron-orange);
  font-weight: 600;
}

/* Los títulos en navy, no en negro puro. */
.md-typeset h1,
.md-typeset h2 {
  color: var(--neuron-navy);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #cfe6ee;
}

/* Barra naranja en las notas/avisos importantes. */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--neuron-orange);
}

/* Tablas: encabezado con fondo suave en vez de plano. */
.md-typeset table:not([class]) th {
  background-color: rgba(7, 56, 89, 0.04);
  color: var(--neuron-navy);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(255, 255, 255, 0.05);
  color: #cfe6ee;
}

/* =========================================================================
   Presencia de marca — segunda pasada
   El naranja es el color que el cliente ya asocia con el panel. Acá aparece
   en los puntos donde la vista se apoya: la línea del header, el hover de los
   enlaces, el borde de las cards, la barra de las notas y el pie.
   ========================================================================= */

/* Línea de marca sobre el header. Es lo primero que se ve al entrar. */
.md-header::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    var(--neuron-orange) 0%,
    var(--neuron-orange) 55%,
    var(--neuron-blue) 100%);
}

/* El buscador del header, con el gris de marca en vez del gris del tema. */
[data-md-color-scheme="default"] .md-search__form {
  background-color: rgba(7, 56, 89, 0.06);
}
[data-md-color-scheme="default"] .md-search__form:hover {
  background-color: rgba(242, 110, 50, 0.12);
}

/* Enlaces: navy en reposo, naranja al pasar. */
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--neuron-orange);
}

/* Cards de la portada: borde que se enciende en naranja. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--neuron-orange);
  box-shadow: 0 4px 16px rgba(242, 110, 50, 0.14);
  transform: translateY(-2px);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  border-color: rgba(255,255,255,.12);
}

/* El icono de cada card, en naranja. */
.md-typeset .grid.cards > ul > li > h3 svg,
.md-typeset .grid.cards > ul > li .twemoji svg {
  fill: var(--neuron-orange);
  width: 1.2em;
  height: 1.2em;
  vertical-align: -.2em;
}

/* Notas: cada tipo con su color de marca en vez de la paleta genérica. */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--neuron-blue);
}
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
  background-color: rgba(40, 161, 190, .08);
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
  background-color: rgba(242, 110, 50, .10);
}

/* Pie: fondo navy, no el negro del tema. */
.md-footer-meta {
  background-color: var(--neuron-navy);
}
.nrn-footer-build {
  font-size: .62rem;
  opacity: .72;
  padding: .1rem .8rem .4rem;
}
.nrn-footer-build code {
  background: rgba(255,255,255,.12);
  padding: 0 .3em;
  border-radius: 3px;
}

/* Barra de scroll de la tabla de contenidos y del nav, en el gris de marca. */
.md-nav__title {
  color: var(--neuron-navy);
}
[data-md-color-scheme="slate"] .md-nav__title { color: #cfe6ee; }