/*
 * La web de la documentación del MCP, mcp.simlatech.ai/docs/es/ y /en/
 * (25/10/2026, la B1 del pliego «MCP de SimlaTech.ai»: «Documentación
 * clásica»). Clara, como el sitio: Gilroy y los colores de minimo.css, que
 * aquí se repiten como en agenda.css porque esta instancia no sirve el sitio.
 */
@font-face { font-family: 'Gilroy'; src: url('/_/fonts/gilroy-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/_/fonts/gilroy-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/_/fonts/gilroy-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/_/fonts/gilroy-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --papel: #fbfbfd;
  --sup: #ffffff;
  --tinte: #f1f0f6;
  --tinta: #14152b;
  --tinta-media: #55566e;
  --tinta-suave: #73748c;
  --linea: rgba(20, 21, 43, 0.1);
  --violeta: #6528d7;
  --violeta-hondo: #451692;
  --violeta-suave: rgba(101, 40, 215, 0.09);
  /* Lo que lleva letra blanca encima: el idioma puesto, el botón de la skill. */
  --relleno: #6528d7;
  /* El rojo del panel (panel.css): lo que no se deshace. */
  --rojo: #b42335;
  --codigo: #14152b;
  --codigo-tinta: #e9e7f5;
  --codigo-linea: transparent;
  --fuente: 'Gilroy', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/*
 * Oscuro (25/10/2026; Luis: «La documentación agrega soporte a modo light, dark y auto»), con los colores del panel en
 * oscuro (panel.css): con Automático, si el sistema lo pide; con Oscuro, siempre. Claro gana al sistema.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    color-scheme: dark;
    --papel: #101119;
    --sup: #171825;
    --tinte: #1a1b27;
    --tinta: #ececf3;
    --tinta-media: #a9aabd;
    --tinta-suave: #9899ae;
    --linea: rgba(255, 255, 255, 0.11);
    --violeta: #9a6bff;
    --violeta-hondo: #bda3ff;
    --violeta-suave: rgba(154, 107, 255, 0.16);
    --relleno: #7c4dff;
    --rojo: #ff8f9c;
    --codigo: #0b0c13;
    --codigo-linea: rgba(255, 255, 255, 0.09);
  }
}
:root[data-tema='oscuro'] {
  color-scheme: dark;
  --papel: #101119;
  --sup: #171825;
  --tinte: #1a1b27;
  --tinta: #ececf3;
  --tinta-media: #a9aabd;
  --tinta-suave: #9899ae;
  --linea: rgba(255, 255, 255, 0.11);
  --violeta: #9a6bff;
  --violeta-hondo: #bda3ff;
  --violeta-suave: rgba(154, 107, 255, 0.16);
  --relleno: #7c4dff;
  --rojo: #ff8f9c;
  --codigo: #0b0c13;
  --codigo-linea: rgba(255, 255, 255, 0.09);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.6rem; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fuente); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--violeta); }
code { font-family: var(--mono); font-size: 0.86em; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }

.d-barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: 0.75rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--linea); background: color-mix(in srgb, var(--papel) 94%, transparent); }
.d-marca { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--tinta); font-weight: 700; text-decoration: none; }
.d-buscar { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 1 22rem; margin-left: auto; padding: 0.45rem 0.75rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--sup); color: var(--tinta-suave); }
.d-buscar input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 0.88rem; color: var(--tinta); outline: none; -webkit-appearance: none; appearance: none; }
.d-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.d-idioma { display: inline-flex; margin-left: auto; padding: 2px; border: 1px solid var(--linea); border-radius: 8px; background: var(--sup); }
.d-buscar + .d-idioma { margin-left: 0; }
.d-idioma a { padding: 0.25rem 0.6rem; border-radius: 6px; color: var(--tinta-media); font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.d-idioma a[aria-current] { background: var(--relleno); color: #ffffff; }
/* La apariencia: los tres iconos del panel, como en las páginas públicas de Agenda. */
.d-tema { display: inline-flex; margin: 0; padding: 2px; border-radius: 980px; background: var(--tinte); }
.d-tema button { display: grid; place-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinta-suave); cursor: pointer; }
.d-tema button:hover { color: var(--tinta); }
.d-tema button[aria-pressed='true'] { background: var(--violeta-suave); color: var(--violeta-hondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violeta) 40%, transparent); }
.d-tema button:focus-visible { outline: 2px solid var(--violeta); outline-offset: 1px; }
.d-tema svg { display: block; }
/* La del teléfono: un botón redondo del alto del idioma, y su lista hacia abajo, pegada y alineada a su derecha. */
.d-tema-menu { position: relative; display: none; }
.d-tema-menu > summary { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--linea); border-radius: 50%; background: var(--sup); color: var(--tinta-media); list-style: none; cursor: pointer; }
.d-tema-menu > summary::-webkit-details-marker { display: none; }
.d-tema-menu[open] > summary { border-color: var(--violeta); color: var(--violeta); }
.d-tema-menu > summary:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.d-tema-menu svg { display: block; }
.d-tema-lista { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; display: grid; width: 11rem; margin: 0; padding: 0.3rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--sup); box-shadow: 0 14px 36px rgba(6, 6, 16, 0.28); }
.d-tema-lista button { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer; }
.d-tema-lista button > svg { flex: none; color: var(--tinta-suave); }
.d-tema-lista button:hover { background: var(--tinte); }
.d-tema-lista button[aria-pressed='true'], .d-tema-lista button[aria-pressed='true'] > svg { color: var(--violeta); }

.d-tres { display: grid; grid-template-columns: 14rem minmax(0, 1fr) 13rem; gap: 2.5rem; max-width: 84rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.d-lateral, .d-indice { position: sticky; top: 4.2rem; align-self: start; display: grid; gap: 0.15rem; padding: 1.6rem 0; }
.d-lateral a { padding: 0.4rem 0.7rem; border-radius: 8px; color: var(--tinta-media); text-decoration: none; font-size: 0.92rem; }
.d-lateral a:hover, .d-lateral a[aria-current] { background: var(--violeta-suave); color: var(--violeta); }
.d-lateral a[aria-current] { font-weight: 700; }
.d-indice b { margin-bottom: 0.3rem; color: var(--tinta-suave); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.d-indice a { padding: 0.2rem 0; color: var(--tinta-media); text-decoration: none; font-size: 0.85rem; }
.d-indice a:hover { color: var(--violeta); }
.d-cuerpo { min-width: 0; padding: 1.6rem 0 3rem; }

.d-hero { padding: 1rem 0 1.4rem; }
.d-eyebrow { margin: 0 0 0.6rem; color: var(--violeta); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.d-hero h1 { margin: 0 0 0.7rem; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.d-lede { max-width: 44rem; margin: 0; color: var(--tinta-media); font-size: 1.08rem; line-height: 1.65; }

.d-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.8rem; margin: 0.6rem 0 1.4rem; padding: 0; list-style: none; }
.d-pasos li { display: flex; gap: 0.75rem; padding: 1rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--sup); }
.d-pasos p { margin: 0.2rem 0 0; color: var(--tinta-media); font-size: 0.9rem; line-height: 1.55; }
.d-num { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--violeta-suave); color: var(--violeta); font-weight: 800; font-size: 0.9rem; }

.d-publicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.8rem; margin: 0 0 1.6rem; }
.d-publico { display: grid; align-content: start; gap: 0.35rem; padding: 1.1rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--sup); color: var(--tinta); text-decoration: none; }
.d-publico:hover { border-color: color-mix(in srgb, var(--violeta) 40%, var(--linea)); }
.d-publico span:last-child { color: var(--tinta-media); font-size: 0.9rem; line-height: 1.5; }
.d-publico-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--violeta-suave); color: var(--violeta); }

.d-seccion { padding-top: 1.4rem; }
.d-seccion h2 { margin: 0 0 0.7rem; font-size: 1.5rem; letter-spacing: -0.01em; }
.d-seccion h3 { margin: 1.2rem 0 0.4rem; font-size: 1.08rem; }
.d-seccion p { max-width: 46rem; color: var(--tinta-media); line-height: 1.65; }
.d-seccion p code, .d-lista code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--tinte); color: var(--violeta-hondo); }

.d-codigo { position: relative; display: grid; gap: 0.3rem; margin: 0.5rem 0 0.9rem; padding: 0.7rem 2.8rem 0.8rem 0.95rem; border: 1px solid var(--codigo-linea); border-radius: 10px; background: var(--codigo); color: var(--codigo-tinta); }
.d-codigo-rotulo { color: #a9a6c6; font-size: 0.72rem; }
/* Se parte por los espacios y, solo si una palabra no cabe, por dentro: «SIMLATECH_MCP_TO / KEN» no se lee. */
.d-codigo pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.86rem; line-height: 1.6; }
.d-copiar { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; background: none; color: #d6d3ee; cursor: pointer; }
.d-copiar:hover { background: rgba(255, 255, 255, 0.08); }
.d-copiar.es-hecho { border-color: #8be0b4; color: #8be0b4; }

.d-tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; background: var(--sup); }
.d-tabla table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.9rem; }
.d-tabla th { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--linea); color: var(--tinta-suave); font-size: 0.72rem; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
/* Las tablas de cada módulo, con las mismas columnas: una debajo de otra se leen como una sola. */
.d-tabla th:nth-child(1) { width: 32%; }
.d-tabla th:nth-child(3) { width: 26%; }
.d-tabla td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.d-tabla tr:last-child td { border-bottom: 0; }
.d-tabla td code { color: var(--violeta-hondo); font-weight: 600; overflow-wrap: anywhere; }
.d-tabla td small { display: block; margin-top: 0.15rem; color: var(--tinta-suave); font-size: 0.8rem; }
.d-permisos { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Las herramientas que cambian algo, con su chapa bajo el nombre; las que no se deshacen, en rojo. */
.d-cambia { display: table; margin-top: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 10px; background: var(--violeta-suave); color: var(--violeta-hondo); font-size: 0.72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.d-cambia.d-borra { background: color-mix(in srgb, var(--rojo) 13%, transparent); color: var(--rojo); }
/* Se parte si no cabe: «Grupos y permisos · Ver apartado» no entra en la columna y cortado no se lee. */
.d-permiso { display: inline-block; max-width: 100%; padding: 0.1rem 0.5rem; border-radius: 10px; background: var(--tinte); color: var(--tinta-media); font-size: 0.78rem; line-height: 1.45; }
.d-permisos small { width: 100%; color: var(--tinta-suave); font-size: 0.74rem; }
.d-oculta { display: none; }

.d-lista { display: grid; gap: 0.5rem; max-width: 46rem; margin: 0; padding-left: 1.2rem; color: var(--tinta-media); line-height: 1.6; }
.d-recetas { display: grid; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.d-recetas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--sup); }
.d-recetas code { color: var(--violeta-hondo); font-weight: 600; }
.d-recetas span { color: var(--tinta-media); font-size: 0.9rem; }
.d-skill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--violeta) 35%, var(--linea)); border-radius: 12px; background: var(--violeta-suave); }
.d-skill > div { display: grid; gap: 0.2rem; max-width: 34rem; }
.d-skill > div span { color: var(--tinta-media); font-size: 0.9rem; }
.d-boton { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--relleno) 84%, #ffffff), var(--relleno)); box-shadow: 0 6px 16px color-mix(in srgb, var(--relleno) 30%, transparent); color: #ffffff; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.d-boton:hover { background: var(--relleno); }
/* La dirección del MCP abierta en un navegador (/mcp): una sola tarjeta en medio, con la dirección y el camino a la documentación. */
.d-sola { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.d-aterriza { flex: 1; display: grid; place-items: center; padding: clamp(1.5rem, 6vh, 4rem) clamp(1rem, 3vw, 2rem); }
.d-aterriza-caja { display: grid; justify-items: center; gap: 0.2rem; width: min(36rem, 100%); padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid var(--linea); border-radius: 18px; background: var(--sup); text-align: center; }
.d-aterriza-logo { margin-bottom: 0.6rem; }
.d-aterriza-caja h1 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.d-aterriza-caja .d-lede { font-size: 1rem; }
.d-aterriza-caja .d-codigo { justify-self: stretch; margin: 1.1rem 0 0.4rem; text-align: left; }
.d-aterriza-pasos { display: grid; gap: 0.5rem; justify-self: stretch; margin: 0.4rem 0 1.1rem; padding: 0; list-style: none; text-align: left; }
.d-aterriza-pasos li { display: flex; align-items: center; gap: 0.7rem; color: var(--tinta-media); font-size: 0.92rem; line-height: 1.45; }
.d-aterriza-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.d-boton-suave { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup); color: var(--tinta); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.d-boton-suave:hover { border-color: var(--violeta); color: var(--violeta); }
@media (max-width: 30rem) { .d-aterriza-acciones > a { flex: 1 1 100%; justify-content: center; } }
.d-cambios { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.d-cambios li { display: flex; gap: 1rem; color: var(--tinta-media); }
.d-cambios time { flex: none; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.d-vacio { margin: 0.8rem 0 0; color: var(--tinta-suave); }
.d-pie { padding: 1.4rem clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: 0.85rem; text-align: center; }
.d-pie code { overflow-wrap: anywhere; }

@media (max-width: 64rem) {
  .d-tres { grid-template-columns: 12rem minmax(0, 1fr); }
  .d-indice { display: none; }
}
@media (max-width: 44rem) {
  /* Arriba la marca, el idioma y la apariencia en un solo botón, que abre su lista hacia abajo; debajo, el buscador
     entero. Los tres iconos no caben arriba a 375 px, y debajo se veían sueltos (Luis, 26/10/2026). */
  .d-barra { flex-wrap: wrap; gap: 0.5rem; }
  .d-buscar { order: 3; flex-basis: 100%; }
  .d-barra .d-idioma { margin-left: auto; }
  .d-tema { display: none; }
  .d-tema-menu { display: block; }
  .d-tres { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .d-lateral { position: static; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.9rem 0 0; }
  .d-lateral a { padding: 0.3rem 0.6rem; border: 1px solid var(--linea); border-radius: 999px; font-size: 0.85rem; }
  .d-tabla table, .d-tabla tbody, .d-tabla tr, .d-tabla td { display: block; }
  .d-tabla thead { display: none; }
  .d-tabla tr { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--linea); }
  .d-tabla tr:last-child { border-bottom: 0; }
  .d-tabla td { padding: 0.1rem 0; border: 0; }
  .d-tabla td:nth-child(3) { padding-top: 0.35rem; }
}