/* ══════════════════════════════════════════════════════════════════════════
   etendo.ai — MkDocs Material theme
   Alineado con el Manual de marca etendo.ai v1.1 (Paleta 1).

   Sistema de color:
   · Azul  #325CFF → PRIMARIO: enlaces, botones, foco (lavanda en modo oscuro)
   · Noche #1B1A1F → cabecera y texto principal
   · Lima  #B8FA50 → acento, solo sobre fondo noche (logo, pestaña activa)
   · Lavanda #B3A1FF → apoyo: texto sobre noche, tiles suaves
   Nunca amarillo: pertenece a Classic.
   ══════════════════════════════════════════════════════════════════════════ */

/* Marca etendo.ai v1.1 — tipografía (Plus Jakarta Sans + Space Mono, en local) */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/PlusJakartaSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../assets/fonts/PlusJakartaSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/PlusJakartaSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/PlusJakartaSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("../assets/fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/SpaceMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/SpaceMono-Bold.woff2") format("woff2"); }

:root {
  --md-text-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --etendo-font-label: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Paleta 1 del manual de marca */
  --brand-blue:     #325CFF;   /* enlaces, botones, interfaz */
  --brand-night:    #1B1A1F;   /* texto principal y fondos oscuros */
  --brand-lime:     #B8FA50;   /* acento, solo sobre noche */
  --brand-lavender: #B3A1FF;   /* apoyo, texto sobre noche */
}

/* ════════════════════════════════════════
   VARIABLES — MODO CLARO
════════════════════════════════════════ */

:root,
[data-md-color-scheme="default"] {
  /* Marca */
  --etendo-accent:        #325CFF;   /* azul de marca: enlaces, botones, foco */
  --etendo-accent-hover:  #325CFF;   /* sin tono derivado: el hover se marca con subrayado */
  --etendo-accent-soft:   #EEF2FF;   /* azul muy suave — hover/selección */
  --etendo-active:        #E3EAFF;   /* estado activo (nav lateral): azul suave */
  --etendo-active-indicator: #325CFF;   /* indicador activo (TOC) */
  --etendo-active-subtle: rgba(50, 92, 255, 0.10);

  /* Contenido — ramp de grises Etendo */
  --etendo-text:        #1B1A1F;   /* noche */
  --etendo-text-2:      #3F3F50;   /* gray-700 */
  --etendo-text-muted:  #6C6C89;   /* gray-500 */
  --etendo-text-faint:  #A9A9BC;   /* gray-300 */
  --etendo-border:      #E8E8ED;   /* gray-100 */
  --etendo-border-2:    #D1D1DB;   /* gray-200 */
  --etendo-bg-content:  #FFFFFF;
  --etendo-bg-page:     #F5F7F9;   /* chrome / app background */
  --etendo-bg-surface:  #F7F7F8;   /* gray-50 */
  --etendo-bg-search:   #F5F7F9;
  --etendo-link:        var(--etendo-accent);
  --etendo-link-hover:  var(--etendo-accent-hover);

  /* Sidebar — chrome gris frío como el producto */
  --etendo-sidebar-bg:        #F5F7F9;
  --etendo-sidebar-text:      #3F3F50;
  --etendo-sidebar-muted:     #A9A9BC;
  --etendo-sidebar-hover:     #FFFFFF;   /* item "salta" del chrome (DS) */
  --etendo-sidebar-border:    rgba(18,18,23,0.06);
  --etendo-sidebar-scrollbar: #D1D1DB;

  /* Semánticos (bg50 / border200 / fg700) */
  /* info = azul · consejo = lima claro #EDFED3 · aviso = naranja #FFF2EE (nunca amarillo) */
  --etendo-info-bg:    #F0F4FF; --etendo-info-border:    #C3D0FF; --etendo-info-fg:    #1F3FC4;
  --etendo-warn-bg:    #FFF2EE; --etendo-warn-border:    #FFCFBF; --etendo-warn-fg:    #A63A12;
  --etendo-success-bg: #EDFED3; --etendo-success-border: #CDF58F; --etendo-success-fg: #3A5A00;
  --etendo-danger-bg:  #FEF0F4; --etendo-danger-border:  #FBB1C4; --etendo-danger-fg:  #D50B3E;

  /* Radios (DS) */
  --etendo-radius-sm: 6px;
  --etendo-radius-md: 8px;
  --etendo-radius-lg: 12px;

  /* Sombras (DS) */
  --etendo-shadow-sm: 0 1px 2px rgba(18,18,23,.04), 0 0 0 1px rgba(18,18,23,.03);
  --etendo-shadow-md: 0 4px 12px rgba(18,18,23,.05), 0 1px 2px rgba(18,18,23,.04);
  --etendo-shadow-focus: 0 0 0 3px rgba(50,92,255,.25);

  /* Overrides Material */
  --md-primary-fg-color:              var(--brand-night);
  --md-primary-fg-color--light:       var(--brand-night);
  --md-primary-fg-color--dark:        var(--brand-night);
  --md-primary-bg-color:              #FFFFFF;
  --md-primary-bg-color--light:       rgba(255,255,255,0.7);
  --md-accent-fg-color:               var(--etendo-accent);
  --md-accent-fg-color--transparent:  var(--etendo-accent-soft);
  --md-typeset-a-color:               var(--etendo-accent);
}

/* ════════════════════════════════════════
   VARIABLES — MODO OSCURO
════════════════════════════════════════ */

[data-md-color-scheme="slate"] {
  --etendo-accent:        #B3A1FF;   /* lavanda: texto/enlaces sobre noche (7,8:1) */
  --etendo-accent-hover:  #B3A1FF;
  --etendo-accent-soft:   rgba(179,161,255,0.14);
  --etendo-active:        rgba(184,250,80,0.16);   /* estado activo: lima tenue sobre noche */
  --etendo-active-indicator: #B8FA50;   /* indicador activo: lima sobre noche */
  --etendo-active-subtle: rgba(184,250,80,0.12);

  --etendo-text:        #F7F7F8;
  --etendo-text-2:      #D1D1DB;
  --etendo-text-muted:  #A9A9BC;
  --etendo-text-faint:  #6C6C89;
  --etendo-border:      #282833;   /* gray-800 */
  --etendo-border-2:    #3F3F50;
  --etendo-bg-content:  #17171E;
  --etendo-bg-page:     #0E0E13;
  --etendo-bg-surface:  #1E1E28;
  --etendo-bg-search:   rgba(255,255,255,0.06);
  --etendo-link:        var(--etendo-accent);
  --etendo-link-hover:  var(--etendo-accent-hover);

  --etendo-sidebar-bg:        #121217;
  --etendo-sidebar-text:      #D1D1DB;
  --etendo-sidebar-muted:     #6C6C89;
  --etendo-sidebar-hover:     rgba(255,255,255,0.05);
  --etendo-sidebar-border:    rgba(255,255,255,0.06);
  --etendo-sidebar-scrollbar: rgba(255,255,255,0.14);

  --etendo-info-bg:    rgba(50,92,255,0.12);  --etendo-info-border:    rgba(50,92,255,0.40);  --etendo-info-fg:    #9DB2FF;
  --etendo-warn-bg:    rgba(255,122,77,0.10); --etendo-warn-border:    rgba(255,122,77,0.32); --etendo-warn-fg:    #FFA98A;
  --etendo-success-bg: rgba(184,250,80,0.08); --etendo-success-border: rgba(184,250,80,0.30); --etendo-success-fg: #B8FA50;
  --etendo-danger-bg:  rgba(245,61,107,0.08); --etendo-danger-border:  rgba(245,61,107,0.28); --etendo-danger-fg:  #F98BA6;

  --etendo-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --etendo-shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --etendo-shadow-focus: 0 0 0 3px rgba(179,161,255,.30);

  --md-primary-fg-color:              var(--brand-night);
  --md-primary-fg-color--light:       var(--brand-night);
  --md-primary-fg-color--dark:        var(--brand-night);
  --md-primary-bg-color:              #FFFFFF;
  --md-primary-bg-color--light:       rgba(255,255,255,0.7);
  --md-accent-fg-color:               var(--etendo-accent);
  --md-accent-fg-color--transparent:  var(--etendo-accent-soft);
  --md-typeset-a-color:               var(--etendo-accent);

  --md-default-bg-color:            var(--etendo-bg-content);
  --md-default-fg-color:            var(--etendo-text);
  --md-default-fg-color--light:     var(--etendo-text-muted);
  --md-default-fg-color--lighter:   var(--etendo-text-muted);
  --md-default-fg-color--lightest:  var(--etendo-text-faint);
  --md-code-bg-color:               #1E1E28;
  --md-code-fg-color:               #E8E8ED;
  --md-footer-bg-color:             #0E0E13;
  --md-footer-fg-color:             var(--etendo-text-muted);
}

/* ════════════════════════════════════════
   LAYOUT — chrome gris frío, contenido blanco
════════════════════════════════════════ */

body { background-color: var(--etendo-bg-page); }
.md-main { background-color: var(--etendo-bg-page); }

.md-grid { max-width: 90rem; }

.md-content { background-color: var(--etendo-bg-content); }

.md-content__inner {
  background-color: var(--etendo-bg-content);
  padding: 1.5rem 3rem 4rem;
  max-width: 64rem;   /* columna generosa; el texto se acota aparte */
}

/* Medida de lectura cómoda para el texto corrido (~72 car.) */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > dl,
.md-typeset > blockquote,
.md-typeset > h1,
.md-typeset > h2,
.md-typeset > h3,
.md-typeset > h4,
.md-typeset .footnote {
  max-width: 46rem;
}

/* Los medios anchos (capturas, tablas, código, admonitions, tabs) usan todo el ancho */
.md-typeset > p:has(> img),
.md-typeset > p:has(> a.glightbox),
.md-typeset figure,
.md-typeset table:not([class]),
.md-typeset .admonition,
.md-typeset details,
.md-typeset pre,
.md-typeset .highlight,
.md-typeset .tabbed-set,
.md-typeset .mermaid {
  max-width: 100%;
}
.md-typeset img { border-radius: var(--etendo-radius-md); }

.md-sidebar--secondary,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  background-color: var(--etendo-bg-page);
}

.md-sidebar--secondary .md-sidebar__inner { padding-top: 0.6rem; }

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */

/* Cabecera noche (#1B1A1F), texto blanco, en ambos modos */
.md-header {
  box-shadow: none;
  background-color: var(--brand-night) !important;
  color: #FFFFFF;
}

.md-header__title { color: #FFFFFF; }
.md-header__button { color: #FFFFFF; }

/* Logo: isotipo lima + «etendo» en minúsculas + «Academy» en gris */
.md-header__title .md-header__topic:first-child .md-ellipsis {
  font-size: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.md-header__title .md-header__topic:first-child .md-ellipsis::before {
  content: "etendo";
  font-size: var(--etendo-wordmark);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.md-header__title .md-header__topic:first-child .md-ellipsis::after {
  content: "Academy";
  font-size: calc(var(--etendo-wordmark) * 0.9);
  font-weight: 500;
  color: #A9A9BC;
}

/* Búsqueda sobre la cabecera noche */
.md-header .md-search__form {
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: #FFFFFF;
}
.md-header .md-search__form:hover { background-color: rgba(255,255,255,0.14); }
.md-header .md-search__input { color: #FFFFFF; }
.md-header .md-search__input::placeholder { color: rgba(255,255,255,0.65); }
.md-header .md-search__icon { color: rgba(255,255,255,0.75); }
.md-header .md-search__form:focus-within { box-shadow: 0 0 0 3px rgba(184,250,80,0.30); }

/* Buscador abierto: el formulario pasa a fondo de contenido, el texto vuelve a ser legible */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--etendo-bg-content);
  border-color: var(--etendo-border-2);
  color: var(--etendo-text);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__input { color: var(--etendo-text); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder { color: var(--etendo-text-muted); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__icon { color: var(--etendo-text-muted); }

/* Resultados */
.md-search-result__meta { color: var(--etendo-text-muted); background-color: var(--etendo-bg-surface); }
.md-search-result__title,
.md-search-result__teaser { color: var(--etendo-text); }
.md-search-result__teaser { color: var(--etendo-text-2); }

/* Resultados de Algolia: sustituyen a los de lunr de Material */
.md-search-result:not(.etendo-search-result) { display: none; }
.etendo-search-result[hidden] { display: none; }
.etendo-search-result__section {
  margin: 0.1rem 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--etendo-text-muted);
}
.etendo-search-result mark {
  background: transparent;
  color: var(--etendo-accent);
  font-weight: 700;
}
.etendo-search-result .md-search-result__title { color: var(--etendo-text); }

/* Pestañas de navegación superior: parte de la cabecera noche */
.md-tabs {
  background-color: var(--brand-night);
  color: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.md-tabs__link { color: rgba(255,255,255,0.72); opacity: 1; }
.md-tabs__link:hover { color: #FFFFFF; }
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--brand-lime);
}

/* ════════════════════════════════════════
   SIDEBAR IZQUIERDO — chrome gris del producto
════════════════════════════════════════ */

.md-sidebar--primary,
.md-sidebar--primary .md-sidebar__scrollwrap {
  background-color: var(--etendo-sidebar-bg);
}

.md-sidebar--primary .md-nav__title,
.md-nav--primary .md-nav__title,
.md-nav--primary > .md-nav__title {
  color: var(--etendo-sidebar-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: static !important;
  height: auto !important;
  line-height: 1.4 !important;
  padding: 0.4rem 0.6rem 0.6rem !important;
}

/* Títulos de sección */
.md-sidebar--primary .md-nav__item--section > .md-nav__link {
  color: var(--etendo-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border: none !important;
  padding-left: 0.6rem !important;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.md-sidebar--primary .md-nav__item--section > label.md-nav__link {
  cursor: default;
  pointer-events: none;
  background: none !important;
}

.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
  margin-top: 0 !important;
}

.md-sidebar--primary .md-nav__item--section > a.md-nav__link,
.md-sidebar--primary .md-nav__item--section > .md-nav__container {
  cursor: pointer;
  pointer-events: auto;
  background: none;
}
.md-sidebar--primary .md-nav__item--section > a.md-nav__link:hover,
.md-sidebar--primary .md-nav__item--section > .md-nav__container:hover {
  background-color: var(--etendo-sidebar-hover) !important;
}

.md-sidebar--primary .md-nav__container > a.md-nav__link {
  padding-left: 0 !important;
}

/* Links de página */
.md-sidebar--primary .md-nav__link {
  color: var(--etendo-sidebar-text);
  font-size: 0.78rem;
  border-radius: var(--etendo-radius-sm);
  transition: background 0.14s ease-out, color 0.14s ease-out;
  padding: 0.3rem 0.6rem;
}

.md-sidebar--primary .md-nav__item--section .md-nav .md-nav__link {
  padding-left: 1.1rem;
  font-size: 0.75rem;
}

.md-sidebar--primary .md-nav__item--section .md-nav .md-nav .md-nav__link {
  padding-left: 1.6rem;
  font-size: 0.73rem;
}

/* Hover — el item "salta" del chrome a blanco (DS) */
.md-sidebar--primary .md-nav__item > .md-nav__link:hover {
  color: var(--etendo-text);
  background-color: var(--etendo-sidebar-hover);
  box-shadow: var(--etendo-shadow-sm);
}
.md-sidebar--primary .md-nav__container:hover {
  background-color: var(--etendo-sidebar-hover);
  border-radius: var(--etendo-radius-sm);
  box-shadow: var(--etendo-shadow-sm);
}
.md-sidebar--primary .md-nav__container > .md-nav__link:hover {
  background-color: transparent;
  box-shadow: none;
}

/* Item activo: pill azul suave (claro) / lima tenue (oscuro) — solo la página exacta */
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__link--active {
  color: var(--etendo-text) !important;
  font-weight: 600;
  background-color: var(--etendo-active) !important;
  border-radius: var(--etendo-radius-sm) !important;
  border: none !important;
}
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__container:has(> a.md-nav__link--active) {
  background-color: var(--etendo-active) !important;
  border-radius: var(--etendo-radius-sm) !important;
}
.md-sidebar--primary .md-nav__item:not(.md-nav__item--section) > .md-nav__container:has(> a.md-nav__link--active) > .md-nav__link {
  color: var(--etendo-text) !important;
  font-weight: 600;
  background-color: transparent !important;
}

/* Scrollbar */
.md-sidebar--primary .md-sidebar__scrollwrap {
  scrollbar-width: thin;
  scrollbar-color: var(--etendo-sidebar-scrollbar) transparent;
  scroll-behavior: auto !important;
}
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar { width: 4px; }
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: var(--etendo-sidebar-scrollbar);
  border-radius: 2px;
}
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════════════════════════
   BÚSQUEDA
════════════════════════════════════════ */

.md-search__form {
  border-radius: var(--etendo-radius-md);
  background-color: var(--etendo-bg-search);
  border: 1px solid var(--etendo-border);
  color: var(--etendo-text);
}
.md-search__form:hover { background-color: var(--etendo-bg-search); }

.md-search__input { color: var(--etendo-text); }
.md-search__input::placeholder { color: var(--etendo-text-muted); }
.md-search__icon { color: var(--etendo-text-muted); }

.md-search__input:focus-within,
.md-search__form:focus-within {
  box-shadow: var(--etendo-shadow-focus);
}

.md-search-result { background-color: var(--etendo-bg-content); }
.md-search-result__link:hover,
.md-search-result__link[data-md-state="active"] {
  background-color: var(--etendo-accent-soft);
}
.md-search-result__article--document .md-search-result__title { color: var(--etendo-text); }
.md-search-result mark { color: var(--etendo-accent); }

/* ════════════════════════════════════════
   TOC DERECHO
════════════════════════════════════════ */

.md-sidebar--secondary .md-nav__title {
  color: var(--etendo-sidebar-muted);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: var(--etendo-bg-page);
  border-bottom: none;
  box-shadow: none !important;
  padding-left: 1rem;
  padding-top: 1.4rem;
}

.md-sidebar--secondary .md-nav__link {
  color: var(--etendo-text-muted);
  font-size: 0.75rem;
  border-radius: 0;
  transition: color 0.14s ease-out;
  padding-left: 1rem;
}
.md-sidebar--secondary .md-nav__link:hover {
  color: var(--etendo-text);
  background: none;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--etendo-text) !important;
  border-left: 2px solid var(--etendo-active-indicator);
  padding-left: calc(1rem - 2px);
  background-color: transparent !important;
  font-weight: 600;
}

/* Subtítulos y etiquetas: Space Mono, mayúsculas, espaciado +8 % */
.md-sidebar--primary .md-nav__title,
.md-nav--primary .md-nav__title,
.md-sidebar--secondary .md-nav__title,
.etendo-home__card-count {
  font-family: var(--etendo-font-label);
  letter-spacing: 0.08em;
}
.md-sidebar--primary .md-nav__title,
.md-nav--primary .md-nav__title,
.md-sidebar--secondary .md-nav__title { font-weight: 700; }

/* ════════════════════════════════════════
   BREADCRUMB (navigation.path)
════════════════════════════════════════ */

.md-path { color: var(--etendo-text-muted); font-size: 0.72rem; }
.md-path__item::after { color: var(--etendo-border-2); }
.md-path__link:hover { color: var(--etendo-accent); }

/* ════════════════════════════════════════
   TIPOGRAFÍA
════════════════════════════════════════ */

.md-typeset {
  font-size: 0.8rem;       /* 16 px */
  line-height: 1.6;
}

.md-typeset h1 {
  font-weight: 800;
  color: var(--etendo-text);
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  font-weight: 700;
  color: var(--etendo-text);
  letter-spacing: -0.02em;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--etendo-border);
}

.md-typeset h3 {
  font-weight: 700;
  color: var(--etendo-text);
  letter-spacing: -0.02em;
}

.md-typeset a {
  color: var(--etendo-link);
  transition: color 0.14s ease-out;
}
.md-typeset a:hover { color: var(--etendo-link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* ════════════════════════════════════════
   LOGO
════════════════════════════════════════ */

/* Lockup del manual de marca (p. 3): el isotipo mide la altura de las letras altas del wordmark × 1,15
   y la separación entre ambos es 1/3 del ancho del isotipo (proporción 1,2 : 1).
   Las letras altas de Plus Jakarta Sans ExtraBold («d», «t») miden 0,757 em. */
.md-header, .etendo-home__brand {
  --etendo-wordmark: 1.35rem;
  --etendo-icon-h: calc(var(--etendo-wordmark) * 0.757 * 1.15);
  --etendo-icon-gap: calc(var(--etendo-icon-h) * 1.2 / 3);
}
.md-header__button.md-logo img {
  height: var(--etendo-icon-h);
  width: auto;
}
@media (max-width: 76.1875em) {
  /* En móvil la cabecera no muestra el isotipo y el espacio es justo: el wordmark vuelve a 21 px */
  .md-header { --etendo-wordmark: 1.05rem; }
}
@media (min-width: 76.25em) {
  /* sin los márgenes de Material entre el logo y el título: la separación la fija el manual */
  [dir=ltr] .md-header__button.md-logo { padding-right: 0; margin-right: 0; }
  [dir=ltr] .md-header__title { margin-left: var(--etendo-icon-gap); }
}

/* ════════════════════════════════════════
   CÓDIGO
════════════════════════════════════════ */

.md-typeset code {
  border-radius: var(--etendo-radius-sm);
}
.md-typeset :not(pre) > code {
  color: var(--etendo-accent-hover);
  background-color: var(--etendo-bg-surface);
}
.md-typeset pre > code { border-radius: var(--etendo-radius-md); }

[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background-color: #1E1E28;
  color: var(--brand-lavender);
}
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #1E1E28;
  color: #E8E8ED;
}

/* Botón copiar */
.md-clipboard:hover { color: var(--etendo-accent); }

/* ════════════════════════════════════════
   ADMONITIONS — pares semánticos Etendo
════════════════════════════════════════ */

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--etendo-radius-md);
  border-width: 1px;
  box-shadow: none;
  font-size: 0.72rem;
}

/* note / abstract → info azul */
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract,
.md-typeset details.note,
.md-typeset details.info,
.md-typeset details.abstract {
  border-color: var(--etendo-info-border);
  background-color: var(--etendo-info-bg);
}
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset .abstract > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > summary,
.md-typeset .abstract > summary {
  background-color: var(--etendo-info-border);
  color: var(--etendo-info-fg);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .abstract > .admonition-title::before { background-color: var(--etendo-info-fg); }

/* tip / hint / success → verde */
.md-typeset .admonition.tip,
.md-typeset .admonition.hint,
.md-typeset .admonition.success,
.md-typeset details.tip,
.md-typeset details.hint,
.md-typeset details.success {
  border-color: var(--etendo-success-border);
  background-color: var(--etendo-success-bg);
}
.md-typeset .tip > .admonition-title,
.md-typeset .hint > .admonition-title,
.md-typeset .success > .admonition-title,
.md-typeset .tip > summary,
.md-typeset .hint > summary,
.md-typeset .success > summary {
  background-color: var(--etendo-success-border);
  color: var(--etendo-success-fg);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .hint > .admonition-title::before,
.md-typeset .success > .admonition-title::before { background-color: var(--etendo-success-fg); }

/* warning / caution → amarillo */
.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset .admonition.attention,
.md-typeset details.warning,
.md-typeset details.caution,
.md-typeset details.attention {
  border-color: var(--etendo-warn-border);
  background-color: var(--etendo-warn-bg);
}
.md-typeset .warning > .admonition-title,
.md-typeset .caution > .admonition-title,
.md-typeset .attention > .admonition-title,
.md-typeset .warning > summary,
.md-typeset .caution > summary,
.md-typeset .attention > summary {
  background-color: var(--etendo-warn-border);
  color: var(--etendo-warn-fg);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .caution > .admonition-title::before,
.md-typeset .attention > .admonition-title::before { background-color: var(--etendo-warn-fg); }

/* danger / bug / failure → rojo */
.md-typeset .admonition.danger,
.md-typeset .admonition.bug,
.md-typeset .admonition.failure,
.md-typeset details.danger,
.md-typeset details.bug,
.md-typeset details.failure {
  border-color: var(--etendo-danger-border);
  background-color: var(--etendo-danger-bg);
}
.md-typeset .danger > .admonition-title,
.md-typeset .bug > .admonition-title,
.md-typeset .failure > .admonition-title,
.md-typeset .danger > summary,
.md-typeset .bug > summary,
.md-typeset .failure > summary {
  background-color: var(--etendo-danger-border);
  color: var(--etendo-danger-fg);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .bug > .admonition-title::before,
.md-typeset .failure > .admonition-title::before { background-color: var(--etendo-danger-fg); }

/* ════════════════════════════════════════
   TABLAS
════════════════════════════════════════ */

.md-typeset table:not([class]) {
  border: 1px solid var(--etendo-border);
  border-radius: var(--etendo-radius-lg);
  overflow: hidden;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--etendo-bg-page);
  color: var(--etendo-text);
  font-weight: 600;
  border-bottom: 1px solid var(--etendo-border);
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--etendo-border);
  color: var(--etendo-text-2);
}
.md-typeset table:not([class]) tr:hover {
  background-color: var(--etendo-bg-page);
}

/* ════════════════════════════════════════
   BOTONES
════════════════════════════════════════ */

.md-typeset .md-button {
  border-color: var(--etendo-border-2);
  color: var(--etendo-text);
  border-radius: var(--etendo-radius-md);
  transition: background 0.14s ease-out, border-color 0.14s ease-out;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  border-color: var(--etendo-border-2);
  color: var(--etendo-text);
  background-color: var(--etendo-bg-page);
}

/* Primario = azul de marca #325CFF */
.md-typeset .md-button--primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
  border-radius: var(--etendo-radius-md);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
  opacity: 0.88;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  border-color: var(--etendo-border-2);
  color: var(--etendo-text);
}
[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: var(--etendo-bg-surface);
  color: var(--etendo-text);
}
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
}
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
  opacity: 0.88;
}

/* ════════════════════════════════════════
   FOCO — anillo púrpura del DS
════════════════════════════════════════ */

.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-button:focus-visible {
  outline: none;
  box-shadow: var(--etendo-shadow-focus);
  border-radius: var(--etendo-radius-sm);
}

/* ════════════════════════════════════════
   HOME PAGE
════════════════════════════════════════ */

.etendo-home__hero {
  position: relative;
  overflow: hidden;
  background-color: var(--etendo-bg-page);
  border-bottom: 1px solid var(--etendo-border);
  padding: 3rem 2rem 2.5rem;
  text-align: center;
}

.etendo-home__hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 640px;
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.etendo-home__hero-inner { position: relative; z-index: 1; }

.etendo-home__logo {
  height: 2.5rem !important;
  width: auto !important;
  max-width: 180px !important;
  margin: 0 auto 1.25rem;
  display: block;
}

.etendo-home .etendo-home__title {   /* más específico que .md-typeset h1, que le ponía 40 px de margen inferior */
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--etendo-text);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.etendo-home__subtitle {
  font-size: 0.95rem;
  color: var(--etendo-text-muted);
  max-width: none;   /* una sola línea en pantallas anchas; en móvil se parte en líneas equilibradas */
  margin: 0 auto 1.5rem;
  line-height: 1.5;
  text-wrap: balance;
}

.etendo-home__search {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

.etendo-home__search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1.5px solid var(--etendo-border);
  border-radius: var(--etendo-radius-md);
  background-color: var(--etendo-bg-content);
  color: var(--etendo-text);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.14s ease-out, box-shadow 0.14s ease-out;
  box-sizing: border-box;
  box-shadow: var(--etendo-shadow-sm);
}
.etendo-home__search-input:hover,
.etendo-home__search-input:focus {
  border-color: var(--etendo-accent);
  box-shadow: var(--etendo-shadow-focus);
}

.etendo-home__search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--etendo-text-muted);
  pointer-events: none;
}

.etendo-home__sections {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
}

.etendo-home__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Card — edged, no shadow en reposo (DS) */
.etendo-home__card {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem 1.1rem;
  background-color: var(--etendo-bg-content);
  border: 1px solid var(--etendo-border);
  border-radius: var(--etendo-radius-lg);
  text-decoration: none !important;
  color: var(--etendo-text);
  transition: border-color 0.14s ease-out, box-shadow 0.14s ease-out;
}
.etendo-home__card:hover {
  border-color: var(--etendo-border-2);
  box-shadow: var(--etendo-shadow-md);
  text-decoration: none !important;
}

.etendo-home__card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.etendo-home__card:hover h3 { color: var(--etendo-accent); }

/* Icono: tile lavanda suave con glifo azul */
.etendo-home__card-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--etendo-radius-md);
  background-color: rgba(179,161,255,0.22);
  color: var(--etendo-accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}
.etendo-home__card-icon svg,
.etendo-home__search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;   /* estilo Lucide del manual: línea, 24 px, trazo 1,75 */
}
[data-md-color-scheme="slate"] .etendo-home__card-icon { color: var(--brand-lime); }

.etendo-home__card-meta { flex: 1; }

.etendo-home__card h3,
.etendo-home__card-meta h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--etendo-text);
  margin: 0 0 0.15rem;
}
.etendo-home__card p,
.etendo-home__card-meta p {
  font-size: 0.75rem;
  color: var(--etendo-text-muted);
  margin: 0;
  line-height: 1.45;
}

.etendo-home__card-count {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--etendo-border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--etendo-text-muted);
}

.etendo-home__card-count--soon {
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 900px) {
  .etendo-home__grid { grid-template-columns: repeat(2, 1fr); }
  .etendo-home__title { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .etendo-home__grid { grid-template-columns: 1fr; }
}

.etendo-home__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  --etendo-wordmark: 1.6rem;
  gap: var(--etendo-icon-gap);
  margin: 0 auto 1.25rem;
}
.etendo-home__brand .etendo-home__logo { margin: 0; height: var(--etendo-icon-h) !important; }
.etendo-brand__name {
  font-size: var(--etendo-wordmark);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--etendo-text);
  line-height: 1;
}
.etendo-brand__sub {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--etendo-text-muted);
  line-height: 1;
}
.etendo-home__logo--dark { display: none; }
[data-md-color-scheme="slate"] .etendo-home__logo--light { display: none; }
[data-md-color-scheme="slate"] .etendo-home__logo--dark { display: block; }
[data-md-color-scheme="slate"] .etendo-home__hero-bg { filter: invert(1); }

/* ════════════════════════════════════════
   DIAGRAMAS MERMAID — texto más grande
════════════════════════════════════════ */

:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-mermaid-font-size: 1rem;
}

/* Respaldo por si el tema no toma la variable en algún diagrama */
.md-typeset .mermaid svg .nodeLabel,
.md-typeset .mermaid svg .edgeLabel,
.md-typeset .mermaid svg text {
  font-size: 1rem !important;
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */

.md-footer {
  --md-footer-bg-color:            var(--brand-night);
  --md-footer-bg-color--dark:      var(--brand-night);
  --md-footer-fg-color:            #FFFFFF;
  --md-footer-fg-color--light:     rgba(255,255,255,0.72);
  --md-footer-fg-color--lighter:   rgba(255,255,255,0.56);
  background-color: var(--brand-night);
  color: #FFFFFF;
}
.md-footer-meta { background-color: transparent; }
.md-footer a:hover,
.md-footer .md-social__link:hover { color: var(--brand-lime); }

/* Buscador con IA: sugerencias del asistente y botón «Modo IA» */
.etendo-ask__item .md-search-result__link { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; }
/* Mismo estilo que los iconos del home: recuadro lavanda suave, icono azul (lima en modo oscuro) */
.etendo-ask__icon {
  flex-shrink: 0; box-sizing: border-box;
  width: 1.75rem; height: 1.75rem; padding: .3rem;
  border-radius: var(--etendo-radius-md);
  background-color: rgba(179,161,255,0.22);
  color: var(--etendo-accent);
}
[data-md-color-scheme="slate"] .etendo-ask__icon { color: var(--brand-lime); }
.etendo-ask__icon svg { width: 100%; height: 100%; }
.etendo-ask__text { font-size: .72rem; line-height: 1.4; color: var(--etendo-text); }
.etendo-ask__text strong { font-weight: 700; }

.etendo-search__ai { display: none; }
[data-md-toggle="search"]:checked ~ .md-header .etendo-search__ai {
  display: flex; align-items: center; gap: .3rem;
  position: absolute; top: 50%; right: 3.3rem; transform: translateY(-50%);
  height: 1.3rem; padding: 0 .45rem;
  border: 1px solid var(--etendo-border-2); border-radius: var(--etendo-radius-sm);
  background: var(--etendo-bg-content); color: var(--etendo-text);
  font: inherit; font-size: .6rem; font-weight: 600; cursor: pointer;
}
[data-md-toggle="search"]:checked ~ .md-header .etendo-search__ai svg { width: .75rem; height: .75rem; color: var(--etendo-accent); }
[data-md-color-scheme="slate"] [data-md-toggle="search"]:checked ~ .md-header .etendo-search__ai svg { color: var(--brand-lime); }
[data-md-toggle="search"]:checked ~ .md-header .etendo-search__ai:hover { border-color: var(--etendo-accent); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__input { padding-right: 7.5rem; }

/* ════════════════════════════════════════
   MÓVIL
════════════════════════════════════════ */

/* El botón del chat no tapa el buscador abierto */
body:has([data-md-toggle="search"]:checked) .etendo-chat__fab { display: none; }

/* El texto del campo del hero se recorta con puntos suspensivos en vez de cortarse */
.etendo-home__search-input { text-overflow: ellipsis; }

@media (max-width: 600px) {
  /* Artículos: menos margen lateral para aprovechar el ancho */
  .md-content__inner { padding: 1rem 1rem 3rem; }
}

/* El botón del chat tampoco tapa el menú lateral abierto */
body:has([data-md-toggle="drawer"]:checked) .etendo-chat__fab { display: none; }

/* Menú lateral en móvil: la barra del título vuelve a ser noche con texto blanco (las reglas de título de escritorio la dejaban sin fondo) */
@media (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title {
    position: relative !important;
    height: 5.2rem !important;
    padding: 2.8rem .8rem .2rem 1rem !important;
    background-color: var(--brand-night) !important;
    color: #FFFFFF !important;
    font-family: var(--md-text-font);
    font-size: .8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
  }
  .md-nav--primary .md-nav__title .md-nav__icon { color: #FFFFFF; }
  .md-nav--primary .md-nav__title[for="__drawer"] .md-logo img { height: 1.4rem; }
}