/* ==========================================================================
   Orbit — ui.css
   Componentes reutilizables: navegación, botones, tarjetas, terminal,
   paleta de comandos, avisos, pestañas, controles.
   ========================================================================== */

/* --- Navegación ----------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  isolation: isolate;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-3) var(--ease-out);
}

/* El desenfoque va en una capa propia, no en la barra.
   Un `position: fixed` con backdrop-filter encima de un canvas también fijo
   crea un bloque contenedor que en algunos motores se traga el pintado de
   media ventana. Aislándolo en un pseudoelemento el efecto se queda dentro
   de su caja y la barra sigue siendo legible aunque el filtro no se aplique. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  transition: opacity var(--d-3) var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (min-width: 769px) {
    .nav::before {
      background: color-mix(in srgb, var(--bg) 72%, transparent);
      backdrop-filter: blur(16px) saturate(1.5);
      -webkit-backdrop-filter: blur(16px) saturate(1.5);
    }
  }
}

.nav.is-stuck::before {
  opacity: 1;
}

.nav.is-stuck {
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.brand__mark {
  width: 27px;
  height: 27px;
  flex: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent));
  transition: rotate var(--d-4) var(--ease-spring);
}

.brand:hover .brand__mark {
  rotate: 22deg;
}

.brand__sub {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--ink-4);
  border-left: 1px solid var(--line-2);
  padding-left: 0.6rem;
  margin-left: 0.15rem;
}

@media (max-width: 720px) {
  .brand__sub {
    display: none;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline: auto;
}

@media (max-width: 1080px) {
  .nav__links {
    display: none;
  }
}

.nav__link {
  position: relative;
  padding: 0.42rem 0.7rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
  border-radius: var(--r-2);
  transition: color var(--d-2) var(--ease-out),
    background var(--d-2) var(--ease-out);
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.nav__link[aria-current='true'] {
  color: var(--cyan);
}

.nav__link[aria-current='true']::after {
  content: '';
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.1rem;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

@media (min-width: 1081px) {
  .nav__tools {
    margin-left: 0;
  }
}

/* --- Botones -------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  font-size: var(--t-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-2);
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--d-2) var(--ease-out),
    border-color var(--d-2) var(--ease-out),
    background var(--d-2) var(--ease-out), translate var(--d-2) var(--ease-out),
    box-shadow var(--d-3) var(--ease-out);
}

.btn:hover {
  translate: 0 -1px;
}
.btn:active {
  translate: 0 0;
  transition-duration: 60ms;
}

/* Brillo que sigue al puntero. Las coordenadas las pone boot.js. */
.btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    18rem 18rem at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--cyan) 26%, transparent),
    transparent 60%
  );
  transition: opacity var(--d-3) var(--ease-out);
}
.btn:hover::before {
  opacity: 1;
}

.btn--primary {
  --btn-fg: #04060d;
  --btn-bd: transparent;
  background: var(--grad);
  font-weight: 600;
  box-shadow: 0 6px 26px -10px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 12px 40px -12px color-mix(in srgb, var(--cyan) 85%, transparent);
}
.btn--primary::before {
  background: radial-gradient(
    18rem 18rem at var(--mx, 50%) var(--my, 50%),
    rgb(255 255 255 / 0.28),
    transparent 55%
  );
}

.btn--ghost {
  --btn-bd: var(--line-2);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.btn--ghost:hover {
  --btn-bd: var(--line-hot);
  color: var(--cyan);
}

.btn--sm {
  padding: 0.45rem 0.75rem;
  font-size: var(--t-xs);
}

.btn--icon {
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  color: var(--ink-3);
}
.btn--icon:hover {
  color: var(--cyan);
  border-color: var(--line-hot);
}
.btn--icon svg {
  width: 17px;
  height: 17px;
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* Botón de la paleta: muestra el atajo */
.kbd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem 0.4rem 0.75rem;
  font-size: var(--t-xs);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  transition: border-color var(--d-2) var(--ease-out),
    color var(--d-2) var(--ease-out);
}
.kbd-btn:hover {
  border-color: var(--line-hot);
  color: var(--ink);
}

/* La regla que ocultaba «Buscar» por posición vive ahora en sections.css,
   con clases propias, porque en móvil el botón cambia de significado. */

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.1em 0.4em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* --- Tarjetas ------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: border-color var(--d-3) var(--ease-out),
    background var(--d-3) var(--ease-out),
    transform var(--d-3) var(--ease-out);
}

/* Borde que se ilumina siguiendo al puntero. Sólo pintura, no layout. */
.card--lit::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  opacity: 0;
  background: radial-gradient(
    14rem 14rem at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--cyan) 60%, transparent),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity var(--d-3) var(--ease-out);
  pointer-events: none;
}
.card--lit:hover::after {
  opacity: 1;
}

.card--lit:hover {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-2);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 20%, transparent);
}
.card__icon svg {
  width: 19px;
  height: 19px;
}

.card h3,
.card h4 {
  /* Dentro de una tarjeta el nivel semántico es h3 (para no saltarse
     niveles) pero el tamaño sigue siendo el de un h4. */
  font-size: var(--t-h4);
  margin-bottom: 0.55rem;
}

.card p {
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* --- Insignias ------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.badge--ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-color: color-mix(in srgb, var(--ok) 28%, transparent);
}
.badge--warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
}
.badge--err {
  color: var(--err);
  background: color-mix(in srgb, var(--err) 10%, transparent);
  border-color: color-mix(in srgb, var(--err) 28%, transparent);
}
.badge--cyan {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 28%, transparent);
}
.badge--violet {
  color: var(--violet-pale);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  border-color: color-mix(in srgb, var(--violet) 30%, transparent);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.dot--pulse {
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* --- Bloques de código ---------------------------------------------------- */

.code {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.75;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}

.code__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.code__name {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-right: auto;
}

.code pre {
  padding: 1rem 1.1rem;
  overflow-x: auto;
  white-space: pre;
}

.code--plain {
  background: color-mix(in srgb, var(--void) 60%, transparent);
}

/* Coloreado mínimo, aplicado por marcas en el HTML o por JS. */
.tok-cmd {
  color: var(--cyan);
}
.tok-flag {
  color: var(--violet-pale);
}
.tok-str {
  color: #9be08a;
}
.tok-num {
  color: #f2b880;
}
.tok-com {
  color: var(--ink-4);
  font-style: italic;
}
.tok-key {
  color: var(--violet-pale);
}
.tok-fn {
  color: var(--cyan-pale);
}
.tok-ok {
  color: var(--ok);
}
.tok-warn {
  color: var(--warn);
}
.tok-err {
  color: var(--err);
}
.tok-dim {
  color: var(--ink-4);
}
.tok-path {
  color: #7fb2ff;
}

/* Línea de comando copiable */
.cmd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.7rem 0.7rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  background: var(--void);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  transition: border-color var(--d-2) var(--ease-out);
}
.cmd:hover {
  border-color: var(--line-hot);
}
.cmd__prompt {
  color: var(--cyan);
  user-select: none;
  flex: none;
}
.cmd__text {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  color: var(--ink);
}
.cmd__text::-webkit-scrollbar {
  display: none;
}

.copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-1);
  color: var(--ink-4);
  transition: color var(--d-2), background var(--d-2);
}
.copy:hover {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}
.copy svg {
  width: 15px;
  height: 15px;
}
.copy.is-done {
  color: var(--ok);
}

/* --- Pestañas ------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  padding: 0.42rem 0.85rem;
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  color: var(--ink-3);
  border-radius: var(--r-1);
  white-space: nowrap;
  transition: color var(--d-2) var(--ease-out);
}
.tab:hover {
  color: var(--ink);
}
.tab[aria-selected='true'] {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* --- Controles deslizantes ------------------------------------------------ */

.field {
  display: grid;
  gap: 0.55rem;
}

.field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.field__label {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.field__value {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--cyan) 0 var(--fill, 50%),
    var(--line-2) var(--fill, 50%) 100%
  );
}
input[type='range']::-moz-range-track {
  height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--cyan) 0 var(--fill, 50%),
    var(--line-2) var(--fill, 50%) 100%
  );
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--cyan);
  box-shadow: 0 0 12px -2px var(--cyan);
  transition: scale var(--d-2) var(--ease-spring);
}
input[type='range']::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--cyan);
  box-shadow: 0 0 12px -2px var(--cyan);
}
input[type='range']:hover::-webkit-slider-thumb,
input[type='range']:focus-visible::-webkit-slider-thumb {
  scale: 1.2;
}

/* Interruptor */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  position: relative;
  width: 38px;
  height: 21px;
  flex: none;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border: 1px solid var(--line-2);
  transition: background var(--d-2) var(--ease-out),
    border-color var(--d-2) var(--ease-out);
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: translate var(--d-2) var(--ease-spring),
    background var(--d-2) var(--ease-out);
}
.switch input:checked + .switch__track {
  background: color-mix(in srgb, var(--cyan) 28%, transparent);
  border-color: var(--line-hot);
}
.switch input:checked + .switch__track::after {
  translate: 17px 0;
  background: var(--cyan);
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* --- Terminal ------------------------------------------------------------- */

.term {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--void) 96%, var(--violet) 4%),
    var(--void)
  );
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--sh-3);
}

.term::before {
  /* barrido de escaneo, muy sutil */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgb(0 0 0 / 0.14) 3px 4px
  );
  opacity: 0.35;
  mix-blend-mode: multiply;
}

:root[data-theme='light'] .term::before {
  opacity: 0.1;
}

:root[data-scanlines='off'] .term::before {
  display: none;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-bottom: 1px solid var(--line);
  flex: none;
  position: relative;
  z-index: 4;
}

.term__lights {
  display: flex;
  gap: 0.4rem;
  padding-right: 0.4rem;
}
.term__lights i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background var(--d-2);
}
.term:hover .term__lights i:nth-child(1) {
  background: #ff5f57;
}
.term:hover .term__lights i:nth-child(2) {
  background: #febc2e;
}
.term:hover .term__lights i:nth-child(3) {
  background: #28c840;
}

.term__title {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term__body {
  flex: 1;
  min-height: 0;
  padding: 1rem 1.1rem 1.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.62;
  color: var(--ink-2);
  position: relative;
  z-index: 2;
  scroll-behavior: smooth;
}

.term__body::after {
  /* zona de clic para enfocar la entrada */
  content: '';
  display: block;
  min-height: 1.5rem;
}

.term-line {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.62em;
}

.term-line--in {
  color: var(--ink);
}

.term-line--pad {
  height: 0.55rem;
  min-height: 0;
}

.term__prompt {
  color: var(--cyan);
  user-select: none;
}
.term__prompt-host {
  color: var(--violet-pale);
}

.term__input-row {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  position: relative;
  z-index: 2;
}

.term__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 1.62;
  color: var(--ink);
  caret-color: transparent;
  padding: 0;
}

/* Cursor de bloque dibujado a mano: se comporta mejor que caret nativo. */
.term__cursor {
  position: absolute;
  width: 0.62em;
  height: 1.12em;
  background: var(--cyan);
  opacity: 0.9;
  pointer-events: none;
  translate: 0 0.16em;
  transition: left 60ms linear;
  animation: blink 1.05s steps(1) infinite;
}

.term.is-busy .term__cursor,
.term:not(.is-focused) .term__cursor {
  animation: none;
  opacity: 0.35;
}

@keyframes blink {
  0%,
  50% {
    opacity: 0.9;
  }
  51%,
  100% {
    opacity: 0;
  }
}

.term__ghost {
  position: absolute;
  pointer-events: none;
  color: var(--ink-4);
  opacity: 0.55;
  white-space: pre;
}

/* Barra de estado inferior, estilo tmux */
.term__status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink-4);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-top: 1px solid var(--line);
  flex: none;
  position: relative;
  z-index: 4;
  overflow: hidden;
  white-space: nowrap;
}

.term__status b {
  color: var(--cyan);
  font-weight: 500;
}

/* Barra de progreso dentro del terminal */
.term-bar {
  display: inline-block;
  width: 22ch;
  color: var(--cyan);
}

/* --- Paleta de comandos --------------------------------------------------- */

.palette {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: start center;
  padding: clamp(3rem, 12vh, 9rem) 1rem 1rem;
  background: color-mix(in srgb, var(--void) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-2) var(--ease-out),
    visibility 0s linear var(--d-2);
}

.palette.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.palette__panel {
  width: min(100%, 40rem);
  max-height: min(60vh, 34rem);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3), 0 0 0 1px color-mix(in srgb, var(--cyan) 12%, transparent);
  overflow: hidden;
  translate: 0 -12px;
  scale: 0.985;
  transition: translate var(--d-3) var(--ease-out), scale var(--d-3) var(--ease-out);
}

.palette.is-open .palette__panel {
  translate: 0 0;
  scale: 1;
}

.palette__search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.palette__search svg {
  width: 17px;
  height: 17px;
  color: var(--ink-4);
  flex: none;
}
.palette__search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  font-size: 0.98rem;
  color: var(--ink);
}
.palette__search input::placeholder {
  color: var(--ink-4);
}

.palette__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem;
  overscroll-behavior: contain;
}

.palette__group {
  padding: 0.6rem 0.7rem 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.palette__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-2);
  text-align: left;
  color: var(--ink-2);
  font-size: var(--t-sm);
  transition: background var(--d-1) linear, color var(--d-1) linear;
}

.palette__item[aria-selected='true'] {
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  color: var(--ink);
}

.palette__item svg {
  width: 16px;
  height: 16px;
  color: var(--ink-4);
  flex: none;
}
.palette__item[aria-selected='true'] svg {
  color: var(--cyan);
}

.palette__item small {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-4);
  white-space: nowrap;
}

.palette__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--ink-4);
  flex: none;
  flex-wrap: wrap;
}
.palette__foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.palette__empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ink-4);
  font-size: var(--t-sm);
}

/* --- Avisos flotantes ----------------------------------------------------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  z-index: 1400;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  font-size: var(--t-sm);
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: toast-in 400ms var(--ease-spring) both;
}

.toast svg {
  width: 15px;
  height: 15px;
  color: var(--cyan);
  flex: none;
}

.toast.is-out {
  animation: toast-out 260ms var(--ease-in-out) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    translate: 0 14px;
    scale: 0.94;
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    translate: 0 8px;
    scale: 0.97;
  }
}

/* --- Raíl de progreso ----------------------------------------------------- */

.rail {
  position: fixed;
  right: clamp(0.75rem, 1.6vw, 1.5rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 800;
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
}

@media (max-width: 1180px) {
  .rail {
    display: none;
  }
}

.rail__dot {
  position: relative;
  display: grid;
  place-items: center;
  /* El punto se ve pequeño, pero el objetivo táctil son 24 px. */
  width: 26px;
  height: 24px;
}

.rail__dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background var(--d-2) var(--ease-out),
    scale var(--d-2) var(--ease-spring);
}

.rail__dot:hover i {
  background: var(--ink-3);
  scale: 1.3;
}

.rail__dot[aria-current='true'] i {
  background: var(--cyan);
  scale: 1.35;
  box-shadow: 0 0 10px var(--cyan);
}

.rail__dot span {
  position: absolute;
  right: calc(100% + 0.6rem);
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  white-space: nowrap;
  opacity: 0;
  translate: 6px 0;
  pointer-events: none;
  transition: opacity var(--d-2) var(--ease-out),
    translate var(--d-2) var(--ease-out);
}

.rail__dot:hover span,
.rail__dot:focus-visible span {
  opacity: 1;
  translate: 0 0;
}

/* Barra de progreso de lectura, arriba del todo */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 950;
  transform-origin: 0 50%;
  scale: var(--p, 0) 1;
  background: var(--grad);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 60%, transparent);
  pointer-events: none;
}

/* --- Acordeón ------------------------------------------------------------- */

.acc {
  border-top: 1px solid var(--line);
}

.acc__item {
  border-bottom: 1px solid var(--line);
}

.acc__btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  transition: color var(--d-2) var(--ease-out);
}
.acc__btn:hover {
  color: var(--ink);
}
.acc__btn[aria-expanded='true'] {
  color: var(--cyan);
}

.acc__sign {
  margin-left: auto;
  flex: none;
  width: 20px;
  height: 20px;
  position: relative;
}
.acc__sign::before,
.acc__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: rotate var(--d-3) var(--ease-spring),
    opacity var(--d-2) var(--ease-out);
}
.acc__sign::after {
  rotate: 90deg;
}
.acc__btn[aria-expanded='true'] .acc__sign::after {
  rotate: 0deg;
  opacity: 0;
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-4) var(--ease-out);
}
.acc__panel.is-open {
  grid-template-rows: 1fr;
}
.acc__panel > div {
  overflow: hidden;
}
.acc__panel p {
  padding-bottom: 1.3rem;
  color: var(--ink-3);
  max-width: 62ch;
}

/* --- Tablas --------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}

.table {
  min-width: 40rem;
  font-size: var(--t-sm);
}

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.8rem 1rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr {
  transition: background var(--d-1) linear;
}
.table tbody tr:hover {
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
}

.table tr.is-us td {
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  color: var(--ink);
}
.table tr.is-us td:first-child {
  box-shadow: inset 2px 0 0 var(--cyan);
}

/* --- Diálogo modal genérico ----------------------------------------------- */

dialog.modal {
  width: min(100%, 44rem);
  max-height: 84vh;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
}
dialog.modal::backdrop {
  background: color-mix(in srgb, #04060d 74%, transparent);
  backdrop-filter: blur(6px);
}
dialog.modal[open] {
  animation: modal-in 320ms var(--ease-out) both;
}
@keyframes modal-in {
  from {
    opacity: 0;
    translate: 0 12px;
    scale: 0.98;
  }
}
.modal__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.modal__head h3 {
  font-size: 1.1rem;
}
.modal__body {
  padding: 1.2rem;
  overflow-y: auto;
  max-height: 64vh;
}

/* --- Marquesina ----------------------------------------------------------- */

.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  user-select: none;
}

.marquee__track {
  display: flex;
  gap: var(--sp-6);
  padding-right: var(--sp-6);
  flex: none;
  min-width: 100%;
  animation: marquee var(--marquee-dur, 46s) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    translate: -100% 0;
  }
}

/* --- Tarjeta con número --------------------------------------------------- */

.stat {
  display: grid;
  gap: 0.2rem;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__num em {
  font-style: normal;
  color: var(--cyan);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}