/* Factory OS · sitio web — tokens y base compartidos por las maquetas.
   Heredado de packages/ui/src/tokens.css [data-ds="07"]; ver docs/03-sistema-visual.md. */

:root {
  color-scheme: light;
  --paper: #fafaf9;
  --paper-raised: #ffffff;
  --ink: #202023;
  --ink-2: #575757;
  --ink-3: #686868;
  --line: rgb(0 0 0 / .08);
  --line-strong: rgb(0 0 0 / .14);
  --hilo-base: rgb(0 0 0 / .16);

  --plant: #0a0a0a;
  --plant-raised: #141414;
  --plant-ink: #ededed;
  --plant-ink-2: #a1a1a1;
  --plant-line: rgb(255 255 255 / .10);
  --plant-hilo-base: rgb(255 255 255 / .20);

  --accent: #0062d1;
  --accent-hover: #004fa8;
  --accent-plant: #5aa2f5;
  --success: #107d4f;
  --warning: #c27a1a;
  --danger: #c52828;
  --success-plant: #3fc287;
  --warning-plant: #f0a43e;

  /* El papel es un objeto físico: no cambia con el tema. */
  --tag: #ffffff;
  --tag-ink: #202023;
  --tag-ink-2: #686868;

  --font: "Geist", "Geist Variable", system-ui, sans-serif;
  --mono: "Geist Mono", "Geist Mono Variable", ui-monospace, monospace;

  --margen: clamp(16px, 4vw, 56px);
  --bloque: clamp(96px, 14vw, 200px);
  --ancho: 1440px;

  --r-outer: 16px;
  --r-inner: 10px;
  --r-btn: 9px;
  --sombra-objeto: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);

  --ease-brand: cubic-bezier(.22, 1, .36, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0a0a0a;
    --paper-raised: #111111;
    --ink: #ededed;
    --ink-2: #a1a1a1;
    --ink-3: #8a8a8a;
    --line: rgb(255 255 255 / .08);
    --line-strong: rgb(255 255 255 / .14);
    --hilo-base: rgb(255 255 255 / .18);
    --plant: #111111;
    --plant-raised: #181818;
    --accent: #5aa2f5;
    --accent-hover: #7db4f5;
    --sombra-objeto: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0a0a0a;
  --paper-raised: #111111;
  --ink: #ededed;
  --ink-2: #a1a1a1;
  --ink-3: #8a8a8a;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .14);
  --hilo-base: rgb(255 255 255 / .18);
  --plant: #111111;
  --plant-raised: #181818;
  --accent: #5aa2f5;
  --accent-hover: #7db4f5;
  --sombra-objeto: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.saltar {
  position: absolute; left: var(--margen); top: -48px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--paper);
  border-radius: var(--r-btn); text-decoration: none; font-size: 14px; font-weight: 500;
}
.saltar:focus { top: 12px; }

/* Contenedor y grilla: 12 / 8 columnas. En el teléfono el canal del hilo mide cero:
   el contenido queda centrado entre los dos márgenes y el hilo, si lo hay, corre por el margen. */
.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.grid {
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}
.grid > * { grid-column: 2; min-width: 0; }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 20px; }
  .grid > * { grid-column: 2 / -1; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
}

/* Puntos por los que pasa el hilo; los ubica la maqueta con la grilla. */
.nodo { display: block; width: 0; height: 0; }
.grid > .nodo { grid-column: 1; justify-self: center; }

/* Tipografía editorial */
.display {
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.titulo {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.subtitulo { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.bajada { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -.01em; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.lectura { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.nota { font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* Acciones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-btn);
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms var(--ease-std), transform 120ms var(--ease-std);
}
.boton:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
.boton:active { transform: scale(.98); }
.boton-chico { min-height: 36px; padding: 0 14px; font-size: 14px; }
.enlace {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color 140ms var(--ease-std);
}
.enlace:hover { text-decoration-color: currentColor; }

/* Marca */
.marca { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; font-size: 20px; font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.marca .os { font-weight: 400; color: var(--accent); margin-left: 2px; }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color 220ms var(--ease-std); }
.nav[data-desplazado="true"] { border-bottom-color: var(--line); }
.nav-barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.nav-enlaces { display: none; align-items: center; gap: 4px; }
.nav-enlaces a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color 140ms var(--ease-std), background-color 140ms var(--ease-std); }
.nav-enlaces a:hover { color: var(--ink); background: var(--line); }
.nav-acciones { display: flex; align-items: center; gap: 8px; }
.nav-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; }
.nav-acciones .boton { display: none; }
/* Tema: automático, claro u oscuro; el ícono muestra el estado actual. */
.nav-tema { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; color: var(--ink-2); cursor: pointer; transition: color 140ms var(--ease-std), border-color 140ms var(--ease-std); }
.nav-tema:hover { color: var(--ink); border-color: var(--ink-3); }
.nav-tema svg { grid-area: 1 / 1; display: none; width: 18px; height: 18px; }
.nav-tema[data-tema="automático"] .i-auto, .nav-tema[data-tema="claro"] .i-sol, .nav-tema[data-tema="oscuro"] .i-luna { display: block; }
@media (min-width: 1024px) { .nav-tema { width: 36px; height: 36px; } }
@media (min-width: 1024px) {
  .nav-enlaces { display: flex; }
  .nav-menu { display: none; }
  .nav-acciones .boton { display: inline-flex; }
}

.hoja-menu { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: flex; flex-direction: column; padding: 0 var(--margen) 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-enter), transform 300ms var(--ease-enter), visibility 0s linear 300ms; }
.hoja-menu[data-abierta="true"] { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.hoja-menu ul { display: grid; gap: 4px; margin-top: 24px; }
.hoja-menu ul a { display: block; padding: 10px 0; font-size: 34px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; text-decoration: none; }
.hoja-menu .boton { margin-top: auto; }

/* Estados con forma, como en el producto */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.estado::before { font-size: 11px; line-height: 1; }
.estado-ok { color: var(--success); } .estado-ok::before { content: "●"; }
.estado-pend { color: var(--warning); } .estado-pend::before { content: "○"; font-size: 13px; }
.estado-ret { color: var(--danger); } .estado-ret::before { content: "■"; }
.estado-rech { color: var(--danger); } .estado-rech::before { content: "▲"; }

/* Ajustes de visualización en el pie: tema y, en Inicio, repetir la apertura. */
.pie-ajustes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pie-ajuste { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: color 140ms var(--ease-std), border-color 140ms var(--ease-std); }
.pie-ajuste:hover { color: var(--ink); border-color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}