/* ===========================================================================
   Sistema visual del sitio de tesis.

   Tipografía Satoshi de Fontshare y paleta morada para conservar la composición visual
   #685BC7, fondos #f7f6fc y #131220, superficies #1c1a2e— para que el sitio y
   la app se lean como la misma casa.

   Estructura: la del «Apunte de Marketing Engineering» —títulos de nivel 2 y 3
   en versalitas espaciadas, etiquetas de sección con 2pt de tracking, prosa
   justificada, callouts con filete superior grueso, tablas centradas con su
   propio deslizador— más la barra de progreso de lectura.

   Navegación: la de GitBook (pedido 2026-08-27, referencia los docs de
   Unsloth). Buscador centrado con ⌘K, secciones alineadas a la derecha, menú
   izquierdo estrecho con íconos, «En esta página» permanente a la derecha y
   pie en columnas al final del contenido —nunca fijo—.
   =========================================================================== */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");

:root {
  --pp-purple: #685bc7;
  --pp-purple-link: #5a4dbb;
  --pp-purple-hover: #4f43a8;
  --pp-purple-soft: #b3ace8;
  --pp-brandsoft: #f5f4ff;
  --pp-ink: #1c1a2e;
  --pp-borde: #e2e8f0;
  --pp-riel: #cbd5e1;

  --md-text-font: "Satoshi", Inter;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo;
}

[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--pp-purple);
  --md-primary-fg-color--light: var(--pp-purple-soft);
  --md-primary-fg-color--dark: var(--pp-purple-hover);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: var(--pp-brandsoft);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--pp-purple-hover);
  --md-accent-fg-color--transparent: rgba(104, 91, 199, 0.1);
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: #f7f6fc;
  --md-typeset-color: #1e1e1e;
  --md-typeset-a-color: var(--pp-purple-link);
  --md-code-bg-color: #eef1f5;
  /* Pie de página claro, en la paleta suave de marca (pedido 2026-08-26). */
  --md-footer-bg-color: var(--pp-brandsoft);
  --md-footer-bg-color--dark: var(--pp-brandsoft);
  --md-footer-fg-color: var(--pp-ink);
  --md-footer-fg-color--light: rgba(28, 26, 46, 0.66);
  --md-footer-fg-color--lighter: rgba(28, 26, 46, 0.42);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #131220;
  --md-default-fg-color--lightest: #2d2a44;
  --md-typeset-color: #e8e6f2;
  --md-typeset-a-color: var(--pp-purple-soft);
  --md-code-bg-color: #232135;
  --pp-borde: #2d2a44;
  --pp-riel: #3b3757;
  --pp-brandsoft: #2c2750;
  /* Superficie de marca, no negro: el pie deja de ser un bloque oscuro ajeno. */
  --md-footer-bg-color: #1c1a2e;
  --md-footer-bg-color--dark: #1c1a2e;
  --md-footer-fg-color: #e8e6f2;
  --md-footer-fg-color--light: rgba(232, 230, 242, 0.66);
  --md-footer-fg-color--lighter: rgba(232, 230, 242, 0.42);
}

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #1c1a2e;
  /* Explicito, no --pp-brandsoft: en oscuro esa variable vale #2c2750 y este
     token pinta el TEXTO de la cabecera, que quedaba morado sobre morado. */
  --md-primary-bg-color: #e8e6f2;
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--pp-purple-soft);
}

/* --------------------------------------------------------------------------
   Títulos. h1 lleva el color de marca; h2 y h3 van en versalitas espaciadas,
   como el apunte. La jerarquía se lee por caja tipográfica, no por peso.
   -------------------------------------------------------------------------- */

.md-typeset h1 {
  color: var(--pp-purple);
  font-weight: 900;
  font-size: 1.95rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--pp-purple-soft);
}

.md-typeset h2 {
  color: var(--pp-ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1.5pt;
  margin-top: 2.4em;
}

.md-typeset h3 {
  color: rgba(28, 26, 46, 0.62);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1.5pt;
}

.md-typeset h4 {
  color: rgba(28, 26, 46, 0.62);
  font-weight: 700;
}

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

[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: rgba(232, 230, 242, 0.62);
}

/* El código dentro de un título no se transforma: `retail_gold` no es RETAIL_GOLD. */
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Prosa. Justificada, con el ritmo vertical de 1.5em entre bloques.
   Sin guionado: en castellano parte «Git-Lab» y «buc-kets».
   -------------------------------------------------------------------------- */

.md-typeset p {
  text-align: justify;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset dl,
.md-typeset blockquote,
.md-typeset pre {
  margin-bottom: 1.5em;
}

.md-typeset li p {
  margin-bottom: 1em;
}

/* Un párrafo de una línea justificado se ve peor que alineado a la izquierda. */
.md-typeset td p,
.md-typeset th p,
.md-typeset .pp-card p,
.md-typeset .admonition-title {
  text-align: left;
}

.md-typeset a:hover {
  color: var(--pp-purple-hover);
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Navegación lateral izquierda: el índice del sitio.
   -------------------------------------------------------------------------- */

.md-sidebar--primary {
  border-right: 1px solid var(--pp-borde);
  /* Con las tabs arriba, el menú lista solo la sección activa: entradas de una
     o dos palabras que no justifican las 12.1rem del tema. A 8.5rem entra la
     más larga («Diccionario de datos») y el cuerpo recupera el ancho que
     necesita el índice de la derecha, ahora permanente (pedido 2026-08-27:
     «está gigantesco y hay que hacerle espacio al de la derecha»). 9.2rem es
     la medida a la que entra «Diccionario de datos», la entrada más larga. */
  width: 9.2rem;
}

/* Las entradas del menú no se parten en dos líneas por un ancho justo: se
   recortan con puntos suspensivos. Solo en escritorio: el cajón lateral del
   móvil ocupa media pantalla y ahí recortar sería inventar un problema. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__link > .md-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.md-nav__title {
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2pt;
  line-height: 1.6;
  padding-bottom: 0.9rem;
  color: var(--pp-ink);
}

.md-nav--primary .md-nav__item--section > .md-nav__link {
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2pt;
  color: var(--pp-ink);
  margin-top: 1.5em;
}

[data-md-color-scheme="slate"] .md-nav__title,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link {
  color: #e8e6f2;
}

.md-nav__link {
  color: rgba(28, 26, 46, 0.68);
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: rgba(232, 230, 242, 0.68);
}

.md-nav__link:hover {
  color: var(--pp-ink);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #ffffff;
}

.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__link--active:hover {
  color: var(--pp-purple) !important;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active:hover {
  color: var(--pp-purple-soft) !important;
}

/* --------------------------------------------------------------------------
   Cabecera clara (rediseño GitBook 2026-08-27). Era morado sólido, y sobre ese
   fondo el wordmark tenía que ir en blanco: al lado de una referencia con
   cabecera clara el logo «salía blanco», que fue justo el reporte de Javier.
   Ahora la barra es la superficie de la página con un filete inferior, el logo
   va a color y los controles pasan a tinta.
   -------------------------------------------------------------------------- */

.md-header,
.md-tabs {
  background-color: var(--md-default-bg-color);
  color: var(--pp-ink);
  box-shadow: none;
}

.md-header {
  border-bottom: 1px solid var(--pp-borde);
}

/* El filete del header sobra cuando las tabs van pegadas debajo: quedaban dos
   líneas paralelas separadas por la altura de la fila de secciones. */
.md-header--shadow {
  box-shadow: none;
}

.md-tabs {
  border-bottom: 1px solid var(--pp-borde);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  color: #e8e6f2;
}

/* El wordmark morado desaparecería sobre el fondo oscuro: ahí vuelve la
   variante blanca (assets/logo-blanco.png, generada del PNG morado
   conservando el alfa). La ruta es relativa a este archivo, que vive en
   la misma carpeta que las imágenes. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("logo-blanco.png");
}

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

.md-header__topic:first-child .md-ellipsis {
  font-weight: 700;
  letter-spacing: 0.3pt;
}

/* Título a la izquierda, junto al logo (rediseño GitBook 2026-08-27): el centro
   del header lo ocupa ahora el buscador, como en los docs de Unsloth. El título
   conserva su flex-grow (los topics son absolutos: sin él, colapsa a 0 y
   desaparece) y es lo que empuja el segmentado y el botón a la derecha. */

/* Tabs superiores: las secciones del sitio, en las mismas versalitas del resto,
   alineadas a la derecha (pedido 2026-08-27, como los docs de Unsloth). El list
   es el contenedor flex; su padre es un bloque, así que un `margin-left:auto`
   sobre el list no movería nada. */
.md-tabs__list {
  justify-content: flex-end;
}

.md-tabs__link {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5pt;
  opacity: 0.68;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* Con la barra clara, la sección activa ya no se distingue solo por opacidad:
   lleva el color de marca y el filete inferior, como en GitBook. */
.md-tabs__item--active .md-tabs__link {
  color: var(--pp-purple);
  box-shadow: inset 0 -2px 0 var(--pp-purple);
  padding-bottom: 0.5rem;
}

[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
  color: var(--pp-purple-soft);
  box-shadow: inset 0 -2px 0 var(--pp-purple-soft);
}

/* Búsqueda minimalista: fondo apenas teñido, borde fino, se expande al enfocar
   (comportamiento del tema). Desde el rediseño GitBook va CENTRADA en el header
   —absoluta, para que crecer al enfocar no empuje al resto— con el chip «⌘K»
   dentro de la caja; el atajo lo escucha pagetoc.js. */
.md-search__form {
  background: var(--pp-brandsoft);
  border: 1px solid var(--pp-borde);
  border-radius: 0.5rem;
  height: 1.5rem;
  color: var(--pp-ink);
}

.md-search__form:hover {
  background: var(--pp-brandsoft);
  border-color: var(--pp-purple-soft);
}

[data-md-color-scheme="slate"] .md-search__form,
[data-md-color-scheme="slate"] .md-search__form:hover {
  color: #e8e6f2;
}

.md-search__input {
  font-size: 0.68rem;
  color: currentcolor;
}

.md-search__input::placeholder {
  color: rgba(28, 26, 46, 0.5);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: rgba(232, 230, 242, 0.5);
}

/* La lupa hereda el color del texto del header, no el blanco de antes. */
.md-search__icon {
  color: currentcolor;
}

[dir="ltr"] .md-search__input {
  padding-left: 2rem;
  padding-right: 2.4rem;
}

.md-search__icon[for="__search"] {
  height: 1.5rem;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--md-default-bg-color);
  border-color: transparent;
}

@media screen and (min-width: 60em) {
  .md-header__inner {
    position: relative;
  }

  .md-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Más ancha en reposo que los 11.7rem del tema, como la de GitBook; el ancho
     de foco (23.4rem) sigue siendo el del tema, que gana por su selector. */
  .md-search__inner {
    width: 16rem;
  }

  .md-search__form::after {
    content: "⌘K";
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    padding: 0.02rem 0.26rem;
    border: 1px solid var(--pp-borde);
    border-radius: 0.25rem;
    font-size: 0.52rem;
    font-weight: 700;
    color: rgba(28, 26, 46, 0.5);
    pointer-events: none;
  }

  [data-md-color-scheme="slate"] .md-search__form::after {
    color: rgba(232, 230, 242, 0.5);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__form::after {
    display: none;
  }
}

/* Selector de tema como el de la app de tesis: un segmentado con las
   tres opciones a la vista (◐ Auto · ☀ Claro · 🌙 Oscuro). Los toggles del
   tema quedan ocultos y pagetoc.js los acciona desde estos botones. */
/* Material marca con [hidden] los labels que no toca mostrar y deja uno visible; ese
   sobrevivia junto al segmentado porque `.md-header__button:not([hidden])` (0,2,0) le
   gana a un selector de menor especificidad. Con la clase en el propio label, gana
   este (0,2,2) y el header queda con un solo control de tema. */
form[data-md-component="palette"] label.md-header__button {
  display: none;
}

/* Con una preferencia guardada, `.md-option:checked + label:not([hidden])`
   (0,3,1) de Material revivía el label del tema activo junto al segmentado; el
   fix del 2026-08-26 solo cubría Auto, donde ningún input está marcado. */
form[data-md-component="palette"] .md-option:checked + label.md-header__button {
  display: none;
}

.pp-seg {
  display: flex;
  align-items: center;
  margin: 0 0.3rem;
  border: 1px solid var(--pp-borde);
  border-radius: 0.5rem;
  overflow: hidden;
}

.pp-seg button {
  padding: 0.22rem 0.42rem;
  font-size: 0.58rem;
  line-height: 1.2;
  color: currentcolor;
  opacity: 0.75;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--md-text-font-family);
}

.pp-seg__ic {
  margin-right: 0.28em;
}

.pp-seg button + button {
  border-left: 1px solid var(--pp-borde);
}

.pp-seg button.on {
  background: var(--pp-purple);
  color: #ffffff;
  opacity: 1;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .pp-seg button.on {
  background: var(--pp-purple);
  color: #ffffff;
}

/* Acceso al header del sitio desde el header (rediseño GitBook): el
   inverso del botón «📚 Docs» de la app. Lo inyecta pagetoc.js junto al segmentado. */
.pp-dash {
  display: flex;
  align-items: center;
  margin-right: 0.3rem;
  padding: 0.22rem 0.5rem;
  font-size: 0.58rem;
  line-height: 1.2;
  font-weight: 700;
  color: currentcolor;
  border: 1px solid var(--pp-borde);
  border-radius: 0.5rem;
  white-space: nowrap;
}

.pp-dash:hover {
  background: var(--pp-purple);
  color: #ffffff;
  border-color: var(--pp-purple);
  text-decoration: none;
}

.pp-dash__ic {
  margin-right: 0.28em;
  filter: grayscale(1);
}

/* Íconos del menú izquierdo, como Unsloth. Los pone pagetoc.js por el texto del
   enlace; en gris para que no compitan con la tipografía. */
.md-sidebar--primary .pp-nav-ic {
  display: inline-block;
  margin-right: 0.35em;
  font-size: 0.85em;
  filter: grayscale(1);
  opacity: 0.72;
}

/* Botones por página (copiar como Markdown, guardar PDF), como los de GitBook.
   Flotan a la derecha del título, al estilo de los content.action del tema. */
.md-typeset .pp-acciones {
  float: right;
  display: flex;
  gap: 0.35rem;
  margin: 0.25rem 0 0.6rem 1rem;
}

.md-typeset .pp-acciones button {
  padding: 0.2rem 0.55rem;
  font-family: var(--md-text-font-family);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(28, 26, 46, 0.72);
  background: transparent;
  border: 1px solid var(--pp-borde);
  border-radius: 0.4rem;
  cursor: pointer;
  white-space: nowrap;
}

.md-typeset .pp-acciones button:hover {
  color: var(--pp-purple);
  border-color: var(--pp-purple);
}

[data-md-color-scheme="slate"] .md-typeset .pp-acciones button {
  color: rgba(232, 230, 242, 0.72);
}

[data-md-color-scheme="slate"] .md-typeset .pp-acciones button:hover {
  color: var(--pp-purple-soft);
  border-color: var(--pp-purple-soft);
}

/* ==========================================================================
   SEGUNDO ÍNDICE. El riel «En esta página», a la derecha del cuerpo.

   Panel permanente, como el de GitBook (pedido de Javier 2026-08-27): los
   títulos se leen siempre, con los h2 numerados y los h3 a la vista. Antes era
   un riel de barritas que se abría al pasar el cursor —el del apunte de
   Marketing Engineering—: se veía elegante, pero obligaba a apuntarle para
   saber qué decía y el panel tapaba el texto al abrirse.

   Al ser permanente vuelve a la grilla del tema (era `position: fixed` pegado
   al borde) y ocupa su columna, así que ya no pisa la prosa ni necesita la
   reserva de margen que tenía `.md-content`. El scrollspy lo sigue haciendo
   Material.
   ========================================================================== */

@media screen and (min-width: 76.25em) {
  /* El cuerpo queda entre dos menús: el de la izquierda se estrecha (arriba) y
     este ocupa 10.2rem, suficiente para un título de dos líneas sin cortar. */
  .md-sidebar--secondary {
    width: 10.2rem;
  }

  .md-sidebar--secondary .md-sidebar__inner {
    border-left: 1px solid var(--pp-borde);
    padding-left: 0.8rem;
  }

  /* Barra propia y discreta: la de macOS es superpuesta y no avisa de nada
     hasta que uno ya está desplazando. */
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    scrollbar-width: thin;
    scrollbar-color: var(--pp-riel) transparent;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 4px;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
    background: transparent;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
    background: var(--pp-riel);
    border-radius: 2px;
  }

  /* Lista apretada: en una página de 40 encabezados el ritmo por defecto del
     tema deja el índice tres pantallas de largo. */
  .md-sidebar--secondary .md-nav--secondary .md-nav__link {
    font-size: 0.62rem;
    line-height: 1.35;
    margin-top: 0.4em;
    padding: 0;
  }

  .md-sidebar--secondary .md-nav--secondary .md-nav__list .md-nav__list .md-nav__link {
    padding-left: 0.9em;
    font-size: 0.58rem;
    opacity: 0.85;
  }

  /* Numeración de los h2, como el «On this page» de GitBook; los h3 se leen por
     la sangría. pagetoc.js apaga el contador en los documentos cuyos h2 ya
     vienen numerados —«1. 1. Visión general» numera dos veces—. */
  .md-sidebar--secondary .md-nav--secondary > .md-nav__list {
    counter-reset: pp-toc;
  }

  .md-sidebar--secondary .md-nav--secondary > .md-nav__list > .md-nav__item {
    counter-increment: pp-toc;
  }

  .md-sidebar--secondary
    .md-nav--secondary
    > .md-nav__list
    > .md-nav__item
    > .md-nav__link::before {
    content: counter(pp-toc) ".";
    margin-right: 0.4em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(28, 26, 46, 0.4);
  }

  [data-md-color-scheme="slate"]
    .md-sidebar--secondary
    .md-nav--secondary
    > .md-nav__list
    > .md-nav__item
    > .md-nav__link::before {
    color: rgba(232, 230, 242, 0.4);
  }

  .md-sidebar--secondary.pp-toc--ya-numerado
    .md-nav--secondary
    > .md-nav__list
    > .md-nav__item
    > .md-nav__link::before {
    content: none;
  }

  /* La sección activa lleva filete a la izquierda: el color solo no se ve
     cuando el índice entero está a la vista. */
  .md-sidebar--secondary .md-nav--secondary .md-nav__link--active {
    box-shadow: inset 2px 0 0 var(--pp-purple);
    padding-left: 0.5em;
    margin-left: -0.8rem;
    padding-right: 0;
  }

  .md-sidebar--secondary
    .md-nav--secondary
    .md-nav__list
    .md-nav__list
    .md-nav__link--active {
    padding-left: 1.4em;
  }

  [data-md-color-scheme="slate"]
    .md-sidebar--secondary
    .md-nav--secondary
    .md-nav__link--active {
    box-shadow: inset 2px 0 0 var(--pp-purple-soft);
  }

  /* El degradado dice que la lista sigue más abajo; pagetoc.js lo apaga al
     llegar al final. */
  .md-sidebar--secondary.pp-riel--mas .md-sidebar__inner::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 1.6rem;
    margin-top: -1.6rem;
    pointer-events: none;
    background: linear-gradient(rgba(247, 246, 252, 0), var(--md-default-bg-color) 70%);
  }
}

.md-nav--secondary .md-nav__title {
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5pt;
  color: var(--pp-ink);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
  color: #e8e6f2;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--pp-purple);
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: var(--pp-purple-soft);
}

/* Barra de progreso de lectura. La mueve assets/pagetoc.js. */
#pp-progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--pp-purple);
  z-index: 10000;
  transition: width 100ms linear;
}

[data-md-color-scheme="slate"] #pp-progreso {
  background: var(--pp-purple-soft);
}

/* --------------------------------------------------------------------------
   Callouts. Filete superior grueso, fondo teñido, cuerpo algo menor.
   -------------------------------------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  border: none;
  border-top: 7pt solid rgba(104, 91, 199, 0.28);
  border-radius: 0;
  box-shadow: none;
  background-color: rgba(104, 91, 199, 0.07);
  font-size: 0.72rem;
  line-height: 1.7em;
  padding: 0.2rem 0.9rem 0.1rem;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: transparent;
  font-weight: 700;
  letter-spacing: 0.6pt;
  margin-inline: 0;
  padding-inline: 1.6rem 0;
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  left: 0;
}

.md-typeset .admonition > .admonition-title::after,
.md-typeset details > summary::after {
  right: 0;
}

.md-typeset .admonition.warning,
.md-typeset .admonition.danger {
  background-color: rgba(239, 68, 68, 0.08);
  border-top-color: rgba(239, 68, 68, 0.4);
}

.md-typeset .admonition.info,
.md-typeset .admonition.note {
  background-color: rgba(104, 91, 199, 0.08);
  border-top-color: rgba(104, 91, 199, 0.35);
}

/* --------------------------------------------------------------------------
   Tablas. Centradas y con su propio deslizador: una tabla ancha se desliza
   sola en vez de empujar el ancho de la página.
   -------------------------------------------------------------------------- */

.md-typeset__table {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5em;
  overflow-x: auto;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--pp-borde);
  box-shadow: none;
  font-size: 0.7rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--pp-brandsoft);
  color: var(--pp-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6pt;
  font-size: 0.6rem;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  color: #e8e6f2;
}

/* --------------------------------------------------------------------------
   Tarjetas de portada e índices de sección.
   -------------------------------------------------------------------------- */

.md-typeset .pp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0.9rem;
  margin: 1.6rem 0 2em;
}

.md-typeset .pp-card {
  position: relative;
  background: var(--md-default-bg-color);
  border: 1px solid var(--pp-borde);
  border-top: 3pt solid rgba(104, 91, 199, 0.35);
  border-radius: 0 0 6px 6px;
  padding: 1.05rem 1.1rem 1.1rem;
  transition: border-top-color 140ms, transform 140ms, box-shadow 140ms;
}

[data-md-color-scheme="slate"] .md-typeset .pp-card {
  background: var(--pp-ink);
}

.md-typeset .pp-card:hover {
  border-top-color: var(--pp-purple);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(28, 26, 46, 0.08);
}

.md-typeset .pp-card h3 {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 2pt;
  color: var(--pp-ink);
}

[data-md-color-scheme="slate"] .md-typeset .pp-card h3 {
  color: #e8e6f2;
}

/* El título es el enlace, pero el área clicable es la tarjeta entera: así el
   marcado sigue siendo válido (un <a> no puede envolver un <h3> con md_in_html)
   sin perder el comportamiento de tarjeta. */
.md-typeset .pp-card h3 > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
}

.md-typeset .pp-card h3 > a:first-child {
  color: inherit;
}

.md-typeset .pp-card:hover h3 > a:first-child {
  color: var(--pp-purple);
}

[data-md-color-scheme="slate"] .md-typeset .pp-card:hover h3 > a:first-child {
  color: var(--pp-purple-soft);
}

.md-typeset .pp-card h3 .headerlink {
  display: none;
}

.md-typeset .pp-card p {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.6;
  color: rgba(30, 30, 30, 0.78);
}

[data-md-color-scheme="slate"] .md-typeset .pp-card p {
  color: rgba(232, 230, 242, 0.75);
}

/* Distintivos de estado de cada sección. */
.md-typeset .pp-estado {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  margin-left: 0.45rem;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 1.2pt;
  text-transform: uppercase;
  vertical-align: middle;
  border-radius: 999px;
}

.md-typeset .pp-estado--completo {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.md-typeset .pp-estado--parcial {
  background: rgba(104, 91, 199, 0.16);
  color: var(--pp-purple);
}

.md-typeset .pp-estado--pendiente {
  background: rgba(100, 116, 139, 0.16);
  color: #64748b;
}

[data-md-color-scheme="slate"] .md-typeset .pp-estado--completo {
  color: #6ee7a0;
}

[data-md-color-scheme="slate"] .md-typeset .pp-estado--parcial {
  color: var(--pp-purple-soft);
}

[data-md-color-scheme="slate"] .md-typeset .pp-estado--pendiente {
  color: #94a3b8;
}

/* --------------------------------------------------------------------------
   Pantallas grandes: el cuerpo respira sin pasar de la medida cómoda.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 64rem;
  }

  .md-sidebar--primary {
    width: 9.5rem;
  }
}

@media screen and (min-width: 118.75em) {
  .md-grid {
    max-width: 70rem;
  }

  .md-sidebar--primary {
    width: 10.5rem;
  }

  .md-sidebar--secondary {
    width: 11.5rem;
  }
}

/* --------------------------------------------------------------------------
   Pantallas angostas.
   -------------------------------------------------------------------------- */

/* El segmentado con las tres etiquetas no entra en el header compacto: empujaba
   el titulo del sitio fuera de la barra. Debajo de tablet quedan solo los tres
   iconos, que es lo mismo que hace la aplicación del sitio. */
@media screen and (max-width: 59.9375em) {
  .pp-seg {
    margin: 0 0.2rem;
  }

  .pp-seg__tx,
  .pp-dash__tx {
    display: none;
  }

  .pp-seg__ic,
  .pp-dash__ic {
    margin-right: 0;
  }

  .pp-seg button,
  .pp-dash {
    padding: 0.22rem 0.34rem;
    font-size: 0.66rem;
  }

  /* Flotando, las acciones dejan al h1 una columna en la que «Arquitectura» no
     entra y se parte a mitad de palabra. En angosto van en su propia fila. */
  .md-typeset .pp-acciones {
    float: none;
    margin: 0 0 1rem;
  }
}

/* La prosa se justifica solo cuando la columna lo aguanta. En un telefono, sin
   guionado, el castellano abre calles de 40 px entre palabras: «Basado en los
   [       ] contratos [       ] dbt». Alineada a la izquierda se lee. */
@media screen and (max-width: 44.9375em) {
  .md-typeset p {
    text-align: left;
  }
}

/* Sello de build al pie: dice qué commit está publicado, para poder distinguir
   «no se aplicó el cambio» de «estoy viendo una copia en caché». */
.md-copyright .pp-sello {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(104, 91, 199, 0.14);
  color: var(--pp-purple);
  font-family: var(--md-code-font-family);
  font-size: 0.85em;
  letter-spacing: 0.3pt;
}

[data-md-color-scheme="slate"] .md-copyright .pp-sello {
  color: var(--pp-purple-soft);
}

/* Pie de página al fondo de la ventana en páginas cortas: el body pasa a columna
   flex y el contenedor principal absorbe el espacio sobrante. NO es un footer
   fijo (regla 2026-08-27): en páginas largas fluye al final del contenido y se
   desplaza con él. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.md-container {
  flex: 1 0 auto;
}

/* --------------------------------------------------------------------------
   Footer en columnas (rediseño GitBook): enlaces del sitio y detalles de la
   columnas y franja de marca del sitio. El markup
   vive en overrides/partials/footer.html.
   -------------------------------------------------------------------------- */

.md-footer-meta__inner.pp-footer {
  display: block;
  padding: 1.5rem 0.8rem 1.1rem;
}

.pp-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.4rem;
  padding-bottom: 1.3rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--pp-borde);
}

.pp-footer__rotulo {
  margin: 0 0 0.55rem;
  font-size: 0.55rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2pt;
  color: var(--md-footer-fg-color);
}

.pp-footer .pp-footer__col a {
  display: block;
  margin: 0.3rem 0;
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--md-footer-fg-color--light);
}

.pp-footer .pp-footer__col a:hover {
  color: var(--pp-purple);
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .pp-footer .pp-footer__col a:hover {
  color: var(--pp-purple-soft);
}

.pp-footer__col p:not(.pp-footer__rotulo) {
  margin: 0.3rem 0;
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--md-footer-fg-color--lighter);
}

/* Franja de marca, como el footer de la app de tesis: logo y tagline a
   la izquierda, copyright con el sello del build a la derecha. */
.pp-footer__marca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Contra `.md-typeset img { height: auto }` del tema, que gana con (0,1,1):
   el selector necesita al menos dos clases. */
.pp-footer .pp-footer__logo {
  height: 18px;
  width: auto;
  opacity: 0.85;
}

.pp-footer__logo--oscuro {
  display: none;
}

[data-md-color-scheme="slate"] .pp-footer__logo--claro {
  display: none;
}

[data-md-color-scheme="slate"] .pp-footer__logo--oscuro {
  display: inline-block;
}

.pp-footer__tag {
  font-size: 0.6rem;
  color: var(--md-footer-fg-color--lighter);
}

.pp-footer .md-copyright {
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 0.6rem;
  color: var(--md-footer-fg-color--lighter);
}

.pp-footer .md-copyright__highlight {
  display: inline;
  color: var(--md-footer-fg-color--light);
}

@media screen and (max-width: 44.9375em) {
  .pp-footer .md-copyright {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Impresión: el «Descargar PDF» es window.print() sobre esta hoja — por página
   y sin dependencia headless en el pipeline. Solo queda el contenido.
   -------------------------------------------------------------------------- */

@media print {
  #pp-progreso,
  .pp-acciones,
  .pp-seg,
  .pp-dash,
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-sidebar--secondary,
  .md-footer {
    display: none !important;
  }

  .md-content {
    margin-right: 0 !important;
  }

  .md-typeset h1 {
    color: var(--pp-purple);
  }
}

/* Componentes propios del archivo de casos. Conservan las tarjetas, callouts,
   filtros y acciones del sitio de referencia con contenido académico local. */
.tesis-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.tesis-card,
.casos-panel,
.caso-tarjeta {
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
  border-radius: 0.7rem;
  background: var(--md-code-bg-color);
  padding: 1.15rem 1.25rem;
}

.tesis-card h3 {
  margin-top: 0;
}

.casos-panel {
  margin: 1.5rem 0 2rem;
}

.casos-filtros {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: 0.6rem 0.8rem;
}

.casos-filtros select {
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 28%, transparent);
  border-radius: 0.35rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  padding: 0.45rem 0.55rem;
}

.casos-contador {
  color: var(--md-default-fg-color--light);
  font-size: 0.88rem;
  margin: 1rem 0 0.4rem;
}

.casos-lista {
  display: grid;
  gap: 0.8rem;
}

.casos-vacio {
  border-top: 2px solid var(--md-primary-fg-color);
  color: var(--md-default-fg-color--light);
  margin: 0.4rem 0 0;
  padding: 0.85rem 0 0;
}

.caso-tarjeta h3 {
  margin-top: 0;
}

.caso-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.caso-insignia {
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 32%, transparent);
  border-radius: 999px;
  color: var(--md-default-fg-color--light);
  font-size: 0.74rem;
  padding: 0.18rem 0.55rem;
}

.caso-cuerpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
  margin-top: 1rem;
}

.caso-bloque {
  border-top: 2px solid color-mix(in srgb, var(--md-primary-fg-color) 70%, transparent);
  padding-top: 0.45rem;
}

.caso-bloque h4 {
  margin: 0 0 0.35rem;
}

.caso-bloque p,
.caso-bloque ol {
  margin: 0;
}

.caso-bloque ol {
  padding-left: 1.2rem;
}

.caso-pie {
  border-top: 1px solid color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
}

@media (max-width: 44rem) {
  .tesis-cards,
  .casos-filtros,
  .caso-cuerpo,
  .caso-pie {
    grid-template-columns: 1fr;
  }
}