/* ================================================================
   AI-MASTER-ACADEMY · Tema del curso · Paleta IAOXE LLC (sutil)
   Marfil cálido + casi-negro frío + acento teal.
   ================================================================ */

:root {
  --md-primary-fg-color: #161b25;
  --md-primary-fg-color--light: #2a3140;
  --md-primary-fg-color--dark: #0f131b;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #0f9ea8;
}

/* --- Modo claro (marfil IAOXE) --- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: hsl(44 33% 97%);
  --md-typeset-color: hsl(217 28% 15%);
  --md-default-fg-color--light: hsl(215 11% 39%);
  --md-default-fg-color--lighter: hsl(215 14% 60%);
  --md-typeset-a-color: #0c818a;
  --md-accent-fg-color: #0f9ea8;
  --md-code-bg-color: hsl(44 24% 94%);
  --md-footer-bg-color: #161b25;
}

/* --- Modo oscuro --- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f1318;
  --md-default-fg-color: #e6e9ee;
  --md-typeset-color: #e6e9ee;
  --md-typeset-a-color: #35c3cb;
  --md-accent-fg-color: #35c3cb;
  --md-code-bg-color: #161b22;
  --md-default-fg-color--light: #9aa1ab;
}

/* Selección de texto con el teal de marca */
::selection { background: #0f9ea8; color: #ffffff; }

/* Tipografía y ritmo */
.md-typeset { font-size: .78rem; }
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 { letter-spacing: -.01em; font-weight: 700; }
.md-typeset h2 { margin-top: 2.2em; border-top: 1px solid var(--md-default-fg-color--lightest, #e2e2e2); padding-top: 1.1em; }

/* Enlaces: subrayado sutil en hover */
.md-typeset a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.md-typeset a:hover { border-bottom-color: currentColor; }

/* Barra superior más sobria */
.md-header { box-shadow: 0 1px 0 rgba(0,0,0,.06); }

/* Tablas más limpias */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest, #e2e2e2);
  border-radius: 10px;
  overflow: hidden;
  font-size: .96em;
}
.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  font-weight: 600;
}

/* Iconos monocromáticos: heredan el color del texto y se alinean */
.md-typeset .twemoji,
.md-typeset .twemoji svg { fill: currentColor; color: currentColor; }
.md-typeset .twemoji svg { height: 1.05em; vertical-align: -.16em; }

/* Admoniciones (Nota, Advertencia, Consejo...) con acento sobrio */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 3px;
  font-size: .95em;
}

/* Botón de "empezar" en la cabecera del curso hacia la landing */
.md-tabs { border-bottom: 1px solid rgba(255,255,255,.08); }

/* ================================================================
   Responsive móvil
   ================================================================ */

/* Diagramas Mermaid: nunca desbordan, scroll horizontal si hace falta */
.md-typeset .mermaid,
.md-typeset pre.mermaid,
.md-typeset div.mermaid {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.md-typeset .mermaid svg { max-width: 100%; height: auto; }

/* Bloques de código: scroll suave en táctil */
.md-typeset pre > code { -webkit-overflow-scrolling: touch; }

/* Iconos monocromáticos dentro del código (inyectados por code-icons.js) */
.code-ico {
  height: 1.05em; width: 1.05em;
  display: inline-block; vertical-align: -0.15em;
}

/* Imágenes fluidas */
.md-typeset img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  .md-typeset { font-size: .74rem; }
  .md-typeset h1 { font-size: 1.6em; line-height: 1.25; }
  .md-typeset h2 { font-size: 1.3em; margin-top: 1.6em; padding-top: .9em; }
  .md-typeset h3 { font-size: 1.1em; }
  /* Tablas: fuente algo menor para que quepan más columnas */
  .md-typeset table:not([class]) { font-size: .85em; }
  /* Admoniciones a sangre completa */
  .md-typeset .admonition, .md-typeset details { margin-left: 0; margin-right: 0; }
}

@media (max-width: 480px) {
  .md-typeset h1 { font-size: 1.45em; }
  .md-typeset table:not([class]) { font-size: .8em; }
}