/* ===============================================================
   Axels theme — alinea MkDocs Material con axels.pro (spec 124 F1).
   Tokens y tipografías sacados del CSS real de website/.
   =============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ----------------------------------------------------------------
   Tokens de marca (mismos hex que website/*.html)
   ---------------------------------------------------------------- */
:root {
  --axels-orange:      #c96a42;
  --axels-orange-dim:  #a85733;
  --axels-orange-soft: #d87354;
  --axels-cream:       #f0ece4;
  --axels-paper:       #fafaf8;
  --axels-bg-lt:       #f3f2ee;
  --axels-border-lt:   #e4e3df;
  --axels-black:       #0f0e0c;
  --axels-bg-dk:       #1f1c17;
  --axels-fg-dk-muted: #a8a49a;
  --axels-border-dk:   #2a2620;
}

/* ----------------------------------------------------------------
   Tipografía editorial (Playfair en titulares, Inter en body)
   Sobreescribe theme.font: lo dejamos vacío en mkdocs.yml.
   ---------------------------------------------------------------- */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: "JetBrains Mono", "Courier New", monospace;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title,
.md-nav__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.md-typeset h1 {
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.md-typeset h2 { font-weight: 500; font-size: 1.55rem; margin-top: 2.2rem; }
.md-typeset h3 { font-weight: 500; font-size: 1.2rem;  margin-top: 1.6rem; }

.md-typeset em { font-style: italic; }

/* ----------------------------------------------------------------
   Paleta — primary/accent en terracota Axels
   ---------------------------------------------------------------- */
:root {
  --md-primary-fg-color:         var(--axels-orange);
  --md-primary-fg-color--light:  var(--axels-orange-soft);
  --md-primary-fg-color--dark:   var(--axels-orange-dim);
  --md-accent-fg-color:          var(--axels-orange);
  --md-accent-fg-color--transparent: rgba(201, 106, 66, 0.12);
}

/* ----------------------------------------------------------------
   Light scheme — "papel cream" estilo editorial impreso
   ---------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           var(--axels-paper);
  --md-default-bg-color--light:    var(--axels-bg-lt);
  --md-default-bg-color--lighter:  var(--axels-bg-lt);
  --md-default-bg-color--lightest: var(--axels-bg-lt);

  --md-default-fg-color:           #1a1815;
  --md-default-fg-color--light:    #3a3631;
  --md-default-fg-color--lighter:  #6b665e;
  --md-default-fg-color--lightest: var(--axels-border-lt);

  --md-typeset-a-color:            var(--axels-orange);
  --md-code-bg-color:              var(--axels-bg-lt);
  --md-code-fg-color:              #2a2620;
}

/* ----------------------------------------------------------------
   Dark scheme — negro cálido + cream (el look de axels.pro)
   ---------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           var(--axels-black);
  --md-default-bg-color--light:    var(--axels-bg-dk);
  --md-default-bg-color--lighter:  #161311;
  --md-default-bg-color--lightest: #161311;

  --md-default-fg-color:           var(--axels-cream);
  --md-default-fg-color--light:    #d4d0c8;
  --md-default-fg-color--lighter:  var(--axels-fg-dk-muted);
  --md-default-fg-color--lightest: var(--axels-border-dk);

  --md-typeset-a-color:            var(--axels-orange-soft);
  --md-code-bg-color:              var(--axels-bg-dk);
  --md-code-fg-color:              var(--axels-cream);

  --md-footer-bg-color:            var(--axels-black);
  --md-footer-bg-color--dark:      var(--axels-black);
}

/* ----------------------------------------------------------------
   Header — sin la banda naranja sólida; fondo OPACO del scheme + borde
   sutil. `!important` porque Material aplica un bg secundario sobre el
   `.md-header[data-md-state=shadow]` que aparece al hacer scroll y, sin
   sobreescribirlo, deja translúcido el header (el contenido del body se
   "asoma" por detrás).
   ---------------------------------------------------------------- */
.md-header,
.md-header__inner,
.md-tabs {
  background-color: var(--md-default-bg-color) !important;
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}
.md-header[data-md-state="shadow"] {
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.3);
}

/* Refuerzo por scheme para anular cualquier herencia traslúcida */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-header__inner {
  background-color: var(--axels-black) !important;
}
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-header__inner {
  background-color: var(--axels-paper) !important;
}

.md-header__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0;
}

/* Buscador con look "input editorial" en lugar de chip naranja */
.md-search__form {
  background-color: var(--md-default-bg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
}
.md-search__form:hover {
  background-color: var(--md-default-bg-color--light);
  border-color: var(--md-default-fg-color--lighter);
}
.md-search__input { color: var(--md-default-fg-color); }
.md-search__input::placeholder { color: var(--md-default-fg-color--lighter); }
.md-search__icon { color: var(--md-default-fg-color--lighter); }

/* Iconos de toggle scheme + búsqueda en color de texto, no naranja */
.md-header__option .md-icon,
.md-header__button .md-icon {
  color: var(--md-default-fg-color--light);
}

/* ----------------------------------------------------------------
   Wordmark — PNG via background-image en el `<a>.md-logo`.
   Swap por scheme. Funciona en Chrome / Firefox / Safari sin trampas:
   el `<img>` interno default de Material queda oculto, el background del
   anchor pinta el PNG correcto según [data-md-color-scheme].
   ---------------------------------------------------------------- */
.md-header__button.md-logo {
  width: 7rem;
  height: 1.6rem;
  background-image: url('../assets/wordmark-light.png');   /* dark scheme = wordmark cream */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  padding: 0;
  margin: 0 0.6rem 0 0;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  display: none;     /* oculta el Material book icon default */
}

[data-md-color-scheme="default"] .md-header__button.md-logo {
  background-image: url('../assets/wordmark-dark.png');     /* light scheme = wordmark negro */
}

/* Page title en header (el que Material rinde en italic al hacer scroll)
   queda OCULTO. Es redundante con la H1 del cuerpo y con la nav lateral, y
   al solaparse con el contenido daba sensación de "asomándose". El wordmark
   Axels solo basta para identificar de dónde vienes. */
.md-header__title {
  display: none;
}

/* ----------------------------------------------------------------
   Tipografía del contenido — un punto más generosa
   ---------------------------------------------------------------- */
.md-typeset { font-size: 0.82rem; line-height: 1.65; }
.md-typeset p { margin: 0.8em 0; }
.md-typeset strong { font-weight: 600; }

/* ----------------------------------------------------------------
   Botones / CTAs editoriales (cuando aparezcan)
   ---------------------------------------------------------------- */
.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  background-color: var(--axels-orange);
  border-color: var(--axels-orange);
  color: #fff;
  border-radius: 999px;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--axels-orange-dim);
  border-color: var(--axels-orange-dim);
}

/* ----------------------------------------------------------------
   Grid cards del homepage — más editorial, menos administrativo
   ---------------------------------------------------------------- */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: border-color .2s, transform .2s;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--axels-orange);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   Tablas en serie editorial (líneas finas, sin sombras)
   ---------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--light);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}