/* ==========================================================================
   css/mutador/15-calibracion-editorial.css — parte 15/15 de lo que era styles.css
   --------------------------------------------------------------------------
   Detalles de imprenta: barra de color, muestras, marcas de registro, retícula, meta, topbar fantasma.
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ==========================================================================
   MUTADOR — Componentes de Calibración Editorial y Precisión v2
   --------------------------------------------------------------------------
   Sumario:
   - .mut-color-bar: Barra de control de calibración de color (tonos de marca).
   - .mut-reg-mark: Cruces de registro analógicas (se anclan a las esquinas).
   - .mut-section-grid: Retícula de guías verticales (12 columnas por sección).
   - .mut-print-meta: Tipografía micro para metadatos marginales.
   - .mut-swatches: Tira de muestras de la paleta (elemento gráfico p/ SPBuilder).
   ========================================================================== */

/* ---------- §01 · Barra de control de color (Color Bar Calibration) ---------- */
.mut-color-bar {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  pointer-events: none;
}
.mut-color-bar span {
  width: 8px;
  height: 8px;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 1px;
  animation: mut-bar-pulse 2.2s infinite ease-in-out;
}
.mut-color-bar .c-paper  { background: var(--paper); }   /* antiguo #efece4 */
.mut-color-bar .c-ink    { background: var(--ink); }     /* antiguo #1a1814 */
.mut-color-bar .c-mute   { background: var(--mute); }    /* antiguo #7a7568 */
.mut-color-bar .c-accent { background: var(--accent); }  /* antiguo #b4533a */

/* Tiempos escalonados para simular barrido de calibración retro */
.mut-color-bar span:nth-child(1) { animation-delay: 0.0s; }
.mut-color-bar span:nth-child(2) { animation-delay: 0.4s; }
.mut-color-bar span:nth-child(3) { animation-delay: 0.8s; }
.mut-color-bar span:nth-child(4) { animation-delay: 1.2s; }

@keyframes mut-bar-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.9);
    box-shadow: 0 0 0 rgba(180, 83, 58, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 4px currentColor;
  }
}

/* ---------- §01b · Tira de muestras de paleta (.mut-swatches) ----------
   Sumario:
   - Elemento gráfico para incrustar en SPBuilder: muestra la paleta 2026
     como retícula de bloques con nombre + hex.
   - Colores 100% por CLASE (sin estilos inline) → el snippet HTML que pega
     Manu queda limpio y SPBuilder no puede comerse estilos inline.
   - Cada muestra = .mut-swatch + modificador de color .mut-swatch--<nombre>.
   - El texto de cada muestra usa color claro/oscuro segun contraste (AA).
   - Responsive: auto-fit, se reordena solo. Sin position:absolute → inmune
     a los wrappers position:relative de SPBuilder.
   ---------------------------------------------------------------------- */
.mut-swatches{
  /* Primitivas de la paleta 2026 — SCOPED aquí: viven SOLO para este
     componente, no tocan el tema del sitio (que usa la paleta original). */
  --c-light-orange:    #fef6f1;
  --c-white:           #ffffff;
  --c-cream:           #f2ebe3;
  --c-middle-cream:    #e6dfda;
  --c-neutral-lightest:#eeeeee;
  --c-seafoam:         #bfe5cb;   /* verde */
  --c-sky:             #bcd8e6;   /* azul — pareja del verde */
  --c-pop:             #e78745;
  --c-earth:           #976a4e;
  --c-hero-text:       #865e46;
  --c-clay:            #7b3d2c;
  --c-lines-brown:     #5f4540;
  --c-dark-brown:      #43312d;
  --c-neutral-darker:  #222222;
  --c-neutral-darkest: #000000;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  border-top: 1px solid var(--rule);
  /* FULL-BLEED: rompe el max-width del contenedor SPBuilder y ocupa 100vw
     a cualquier ancho. El calc(50% - 50vw) tira de cada lado hasta el borde
     del viewport (el contenedor está centrado). Funciona porque html/body
     tienen overflow-x:clip + max-width:100vw (no genera scroll horizontal).
     REQUISITO: ningún wrapper ancestro con overflow:hidden (ver regla de
     neutralización abajo). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Neutralizar overflow de los wrappers SPBuilder que envuelven la tira,
   para que el full-bleed no quede recortado. Quirúrgico vía :has(). */
.sppb-column-addons:has(> .sppb-addon:where(.addon-root-mut-div2) .mut-swatches),
.sppb-addon-wrapper:has(.mut-swatches),
.clearfix:has(> .mut-swatches){
  overflow: visible;
}
.mut-swatch{
  min-height: 124px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.mut-swatch b{
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.mut-swatch span{
  font-family: var(--mono);
  font-size: 10px;
  opacity: 0.72;
}
/* Muestras claras → texto dark-brown */
.mut-swatch--light-orange,
.mut-swatch--cream,
.mut-swatch--middle-cream,
.mut-swatch--neutral-lightest,
.mut-swatch--seafoam,
.mut-swatch--sky,
.mut-swatch--pop{ color: var(--c-dark-brown); }
/* Muestras oscuras → texto crema */
.mut-swatch--earth,
.mut-swatch--hero-text,
.mut-swatch--clay,
.mut-swatch--lines-brown,
.mut-swatch--dark-brown,
.mut-swatch--neutral-darker,
.mut-swatch--neutral-darkest{ color: var(--c-cream); }
/* Fondos */
.mut-swatch--light-orange   { background: var(--c-light-orange); }
.mut-swatch--cream          { background: var(--c-cream); }
.mut-swatch--middle-cream   { background: var(--c-middle-cream); }
.mut-swatch--neutral-lightest{ background: var(--c-neutral-lightest); }
.mut-swatch--seafoam        { background: var(--c-seafoam); }
.mut-swatch--sky            { background: var(--c-sky); }
.mut-swatch--pop            { background: var(--c-pop); }
.mut-swatch--earth          { background: var(--c-earth); }
.mut-swatch--hero-text      { background: var(--c-hero-text); }
.mut-swatch--clay           { background: var(--c-clay); }
.mut-swatch--lines-brown    { background: var(--c-lines-brown); }
.mut-swatch--dark-brown     { background: var(--c-dark-brown); }
.mut-swatch--neutral-darker { background: var(--c-neutral-darker); }
.mut-swatch--neutral-darkest{ background: var(--c-neutral-darkest); }
/* earth es tono medio: crema baja a 3.96 → blanco puro alcanza AA (4.68) */
.mut-swatch--earth{ color: var(--c-white); }

/* ── Dos muestras EXTRA fuera de paleta, SOLO móvil (≤768px) ──
   Tokens propios (ajusta el hex). El texto va en blanco por defecto;
   si el fondo fuese claro, cambia a color:var(--c-dark-brown) en su
   modificador. Las muestras se ocultan en desktop con .mut-swatch--mobile. */
.mut-swatches{
  --c-extra-1: #2e6e8e;   /* NUEVO fuera de paleta — placeholder, dime el hex */
  --c-extra-2: #c9a227;   /* NUEVO fuera de paleta — placeholder, dime el hex */
}
.mut-swatch--mobile{ display: none; }            /* oculta en desktop */
.mut-swatch--extra-1{ background: var(--c-extra-1); color: var(--c-white); }
.mut-swatch--extra-2{ background: var(--c-extra-2); color: var(--c-white); }
@media (max-width: 768px){
  .mut-swatch--mobile{ display: flex; }          /* visibles solo en móvil */
}

/* ---------- §02 · Marcas de registro analógicas (Registration Marks) ---------- */
.sppb-section {
  position: relative; /* Asegura que las marcas se posicionen respecto a la sección */
}
.mut-reg-mark {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 10;
}
.mut-reg-mark::before,
.mut-reg-mark::after {
  content: "";
  position: absolute;
  background: var(--rule);
}
/* Línea horizontal de la cruz */
.mut-reg-mark::before {
  top: 50%; left: -4px;
  width: 24px; height: 1px;
  transform: translateY(-50%);
}
/* Línea vertical de la cruz */
.mut-reg-mark::after {
  left: 50%; top: -4px;
  width: 1px; height: 24px;
  transform: translateX(-50%);
}

.mut-reg-mark--top-left     { top: 12px; left: 12px; }
.mut-reg-mark--top-right    { top: 12px; right: 12px; }
.mut-reg-mark--bottom-left  { bottom: 12px; left: 12px; }
.mut-reg-mark--bottom-right { bottom: 12px; right: 12px; }

/* ---------- §03 · Retícula de guías (Optional Section Grid) ---------- */
/* Opción 1: Rejilla precisa alineada con gutters (requiere elemento HTML .mut-section-grid) */
.mut-section-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 0 var(--gutter);
  opacity: 0.035; /* ultra sutil */
  transition: opacity .5s ease;
}
.sppb-section[data-section-theme="dark"] .mut-section-grid {
  opacity: 0.02;
}
.mut-grid-col {
  height: 100%;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: rgba(26, 24, 20, 0.01);
}
.sppb-section[data-section-theme="dark"] .mut-grid-col {
  border-color: rgba(239, 236, 228, 0.08);
  background: rgba(239, 236, 228, 0.005);
}

/* Opción 2: Rejilla pura CSS aplicable a sección (sólo requiere añadir la clase .mut-section--with-grid) */
.sppb-section.mut-section--with-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    to right,
    var(--rule),
    var(--rule) 1px,
    transparent 1px,
    transparent calc(100% / 12)
  );
  opacity: 0.035;
  transition: opacity .5s ease;
}
.sppb-section[data-section-theme="dark"].mut-section--with-grid::before {
  opacity: 0.02;
}

/* ---------- §04 · Metadatos marginales micro (Typographic Meta) ---------- */
.mut-print-meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0.7;
}

/* ---------- §05 · Topbar fantasma sobre un bloque a pantalla completa ----------
   SUMARIO
   · Estado nuevo y temporal del header, pensado para el addon M3 `mutreel`
     (cover a pantalla completa): mientras ese bloque ocupa la pantalla, el JS
     del addon pone `body.mut-header-ghost` y la topbar pasa a flotar encima
     del cover, sin velo, sin blur y sin borde. Al salir del bloque, la clase
     se quita y el header vuelve exactamente a lo de siempre.
   · El blanco/negro del logo y de los textos NO se toca aquí: lo sigue dando
     el sistema de temas (`body[data-theme]`, core.js §03), porque el addon
     marca su sección con `data-section-theme="dark"` y `.bs-section--dark`.
   · La topbar NO cambia de `position`. Lo hizo durante un tiempo —pasaba a
     `fixed` y el hueco se devolvía con un padding-top en el body— y eso provocaba
     un salto de maquetación cada vez que el reel tomaba o soltaba el mando: al
     volver arriba en móvil se veía parpadear. No hace falta: la topbar ya es
     `sticky`, y el bloque del reel se mete debajo con su propio margen negativo.
     Aquí sólo se le quita el velo.
   · `background-color` en longhand obligatorio: el shorthand con color-mix
     congela la transición (ver CLAUDE.md · Registro de fallos nº2).
   · Mismo patrón que §08b (body.idn-page), pero por bloque y no por página. */

/* Sin velo ni borde, tanto sobre dark como sobre light: la clase extra gana en
   especificidad a §08 y a body[data-theme="dark"] .topbar sin depender del orden.
   La primera pareja de selectores es la que evita el parpadeo: si la página trae
   un reel con el menú fantasma, el header NACE transparente —sin esperar al JS—
   y sólo se le devuelve el velo cuando el reel suelta el mando y el JS marca
   `body.mut-header-solid`. No hay nada más que dependa del JS: la topbar sigue
   siendo `sticky` en los dos estados, así que entrar o salir del reel no mueve
   un solo píxel de la maquetación. */
body:has(.mut-reel[data-reel-ghost]):not(.mut-header-solid) .topbar,
body:has(.mut-reel[data-reel-ghost]):not(.mut-header-solid)[data-theme="dark"] .topbar,
body.mut-header-ghost .topbar,
body.mut-header-ghost[data-theme="dark"] .topbar,
body.mut-header-ghost[data-theme="light"] .topbar{
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}