/* ============================================================================
   EL INSTRUMENTO
   ----------------------------------------------------------------------------
   La interfaz es un visor de precisión; el deck es la obra que sostiene.

   Es fiel a lo que hace el producto: verificar el encaje, certificar la
   accesibilidad, rastrear de dónde sale cada cifra. Todo eso es medir un
   artefacto que no escribimos nosotros — así que la carcasa se comporta como
   un instrumento y la pieza conserva su propio calor dentro.

   Esta capa NO toca los tokens del deck. --paper, --ink y --accent siguen
   siendo del tema de la presentación (o de la plantilla corporativa de la
   empresa), y por eso un deck crema sobre esta carcasa se ilumina como una
   pieza en vitrina. La carcasa vive en su propio espacio, --ui-*.
   ============================================================================ */

:root {
  /* Carcasa. Azul-negro, no gris neutro: un instrumento tiene temperatura. */
  --ui-void:    #05080F;
  --ui-panel:   #0A0F1A;
  --ui-rise:    #0E1524;
  --ui-sink:    #03060B;

  /* Los filos llevan luz fría, como el canto de una pieza mecanizada. */
  --ui-edge:    rgba(126,158,220,.14);
  --ui-edge-2:  rgba(126,158,220,.30);
  --ui-edge-3:  rgba(126,158,220,.55);

  --ui-ink:     #E6ECF8;
  --ui-dim:     #8492AC;   /* 6.4:1 sobre la carcasa */
  --ui-faint:   #5B6880;

  /* La señal es el bermellón de la marca, un punto más caliente porque sobre
     negro azulado el mismo tono se apaga. La marca no se tira: se traslada. */
  --ui-signal:  #FF4A2B;
  --ui-signal-2:#FF6A4E;
  --ui-live:    #29DFA0;   /* solo para lo verificado */

  --ui-r:       10px;
  --ui-r-sm:    7px;

  /* Profundidad con desplazamiento y desenfoque: un halo sin offset es adorno. */
  --ui-lift:    0 1px 0 rgba(255,255,255,.04) inset,
                0 2px 4px rgba(0,0,0,.5),
                0 18px 40px -22px rgba(0,0,0,.9);
  --ui-inset:   inset 0 1px 2px rgba(0,0,0,.55);

  --ui-fast:    140ms cubic-bezier(.22,1,.36,1);
  --ui-slow:    520ms cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- superficies
   Solo las pantallas de trabajo. La página pública conserva su mundo. */
html body.app,
html body.deck {
  background:
    /* Dos luces muy bajas, arriba y abajo: dan volumen a la carcasa sin
       convertirse en un degradado decorativo. */
    radial-gradient(120% 70% at 50% -8%, rgba(126,158,220,.09), transparent 62%),
    radial-gradient(90% 55% at 50% 108%, rgba(255,74,43,.055), transparent 60%),
    var(--ui-void);
  background-attachment: fixed;
  color: var(--ui-ink);
}

/* Superficies de las que ya existen tarjetas o paneles. */
body.app .deck-card,
body.app .bk-card,
body.deck .share-panel,
body.deck .exp-panel,
body.deck .rev-panel,
body.deck .hist-panel,
body.deck .look-panel {
  background: linear-gradient(180deg, var(--ui-rise), var(--ui-panel));
  border: 1px solid var(--ui-edge);
  border-radius: var(--ui-r);
  box-shadow: var(--ui-lift);
  color: var(--ui-ink);
}

body.app .deck-card { transition: transform var(--ui-fast), border-color var(--ui-fast), box-shadow var(--ui-fast); }
body.app .deck-card:hover {
  transform: translateY(-2px);
  border-color: var(--ui-edge-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset,
              0 4px 8px rgba(0,0,0,.5),
              0 26px 54px -24px rgba(0,0,0,.95);
}

body.app .dc-title, body.deck .sa-title { color: var(--ui-ink); }
body.app .dc-meta, body.app .dc-foot,
body.app .muted, body.deck .muted,
body.app .bk-main p, body.deck .share-hint { color: var(--ui-dim); }

/* --------------------------------------------------------------------- tipos
   El display de la carcasa es un grotesco técnico; toda la utilidad y la
   telemetría van en mono, que aquí está ganado: son medidas, no disfraz. */
body.app .app-head h1,
body.app .bk-main h3,
body.deck .deck-head h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.022em;
}

body.app .dc-meta, body.deck .deck-sub, body.deck .rail-item,
body.deck .exp-k, body.deck .fit-n, body.deck .save-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;   /* las cifras no bailan al actualizarse */
  letter-spacing: -.01em;
}

/* ------------------------------------------------------------------ controles
   Un control dice lo que hace y responde al instante. */
body.app .btn, body.deck .btn {
  border-radius: var(--ui-r-sm);
  transition: background var(--ui-fast), border-color var(--ui-fast),
              color var(--ui-fast), transform var(--ui-fast), box-shadow var(--ui-fast);
}
body.app .btn-ghost, body.deck .btn-ghost {
  background: var(--ui-rise);
  border: 1px solid var(--ui-edge);
  color: var(--ui-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
body.app .btn-ghost:hover, body.deck .btn-ghost:hover {
  background: #131C2E;
  border-color: var(--ui-edge-3);
  color: #fff;
}
body.app .btn-ghost:active, body.deck .btn-ghost:active { transform: translateY(1px); }

body.app .btn-primary, body.deck .btn-primary {
  background: var(--ui-signal);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 2px 6px rgba(255,74,43,.28),
              0 14px 30px -18px rgba(255,74,43,.7);
}
body.app .btn-primary:hover, body.deck .btn-primary:hover { background: var(--ui-signal-2); }
body.app .btn-primary:active, body.deck .btn-primary:active { transform: translateY(1px); }

body.app input, body.app textarea, body.app select,
body.deck input, body.deck textarea, body.deck select {
  background: var(--ui-sink);
  border: 1px solid var(--ui-edge);
  color: var(--ui-ink);
  border-radius: var(--ui-r-sm);
  box-shadow: var(--ui-inset);
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast);
}
body.app input:focus, body.app textarea:focus, body.app select:focus,
body.deck input:focus, body.deck textarea:focus, body.deck select:focus {
  outline: none;
  border-color: var(--ui-signal);
  box-shadow: var(--ui-inset), 0 0 0 3px rgba(255,74,43,.18);
}
body.app ::placeholder, body.deck ::placeholder { color: var(--ui-faint); }

/* ------------------------------------------------------- el visor y sus marcas
   FIRMA. La obra se sostiene dentro de un visor con marcas de registro en las
   cuatro esquinas, como el encuadre de un escáner. No decoran: dicen dónde
   empieza y acaba lo que se está midiendo — que es exactamente lo que hace el
   resto del producto. */
body.deck .deck-stage {
  position: relative;
  padding-top: 26px;
}
body.deck .deck-stage::before,
body.deck .deck-stage::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: .55;
}
body.deck .deck-stage::before {
  top: 8px; left: 6px;
  border-top: 1px solid var(--ui-edge-3);
  border-left: 1px solid var(--ui-edge-3);
}
body.deck .deck-stage::after {
  top: 8px; right: 6px;
  border-top: 1px solid var(--ui-edge-3);
  border-right: 1px solid var(--ui-edge-3);
}

/* La obra: separada de la carcasa por un filo y una sombra profunda, para que
   se lea como un objeto iluminado y no como un panel más de la interfaz. */
body.deck .slide-wrap {
  box-shadow: 0 0 0 1px var(--ui-edge),
              0 2px 6px rgba(0,0,0,.45),
              0 40px 80px -46px rgba(0,0,0,1);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow var(--ui-fast);
}
body.deck .slide-wrap:hover {
  box-shadow: 0 0 0 1px var(--ui-edge-2),
              0 2px 6px rgba(0,0,0,.45),
              0 46px 90px -44px rgba(0,0,0,1);
}

/* ------------------------------------------------------------------ telemetría
   El índice y la barra de estado leen como la lectura de un aparato. */
body.deck .deck-rail { border-right: 1px solid var(--ui-edge); }
body.deck .rail-item {
  color: var(--ui-dim);
  border-left: 1px solid transparent;
  transition: color var(--ui-fast), border-color var(--ui-fast), background var(--ui-fast);
}
body.deck .rail-item:hover { color: var(--ui-ink); background: rgba(126,158,220,.06); }
body.deck .rail-item.is-active {
  color: var(--ui-ink);
  border-left-color: var(--ui-signal);
  background: rgba(255,74,43,.07);
}

body.deck .save-pill {
  background: var(--ui-rise);
  border: 1px solid var(--ui-edge);
  color: var(--ui-dim);
  border-radius: 999px;
}
body.deck .save-pill.ok { color: var(--ui-live); border-color: rgba(41,223,160,.35); }

/* Las franjas de verificación son la voz del instrumento: lo comprobado. */
body.deck .fit-strip {
  border: 1px dashed var(--ui-edge-2);
  border-radius: var(--ui-r-sm);
  background: rgba(126,158,220,.035);
}
body.deck .fit-go { color: var(--ui-dim); }
body.deck .fit-go:hover { color: var(--ui-signal-2); }
body.deck .fit-ok b { color: var(--ui-live); }
body.deck .fit-ko b { color: var(--ui-signal-2); }
body.deck .fit-item { color: var(--ui-dim); }
body.deck .fit-n { color: var(--ui-faint); }

body.deck .exp-row {
  border: 1px solid var(--ui-edge);
  background: var(--ui-rise);
  border-radius: var(--ui-r-sm);
  color: var(--ui-ink);
  transition: border-color var(--ui-fast), background var(--ui-fast), transform var(--ui-fast);
}
body.deck .exp-row:hover {
  border-color: var(--ui-edge-3);
  background: #131C2E;
  transform: translateX(2px);
}
body.deck .exp-k { color: var(--ui-faint); }
body.deck .exp-row small { color: var(--ui-dim); }

/* --------------------------------------------------- superficies del navegador
   Lo que no dibujamos también lleva el diseño. Es lo más barato de arreglar y
   lo que más delata a una página montada en vez de construida. */
body.app ::selection, body.deck ::selection { background: rgba(255,74,43,.28); color: #fff; }
body.app, body.deck { caret-color: var(--ui-signal); scrollbar-color: var(--ui-edge-2) transparent; }
body.app ::-webkit-scrollbar, body.deck ::-webkit-scrollbar { width: 11px; height: 11px; }
body.app ::-webkit-scrollbar-track, body.deck ::-webkit-scrollbar-track { background: transparent; }
body.app ::-webkit-scrollbar-thumb, body.deck ::-webkit-scrollbar-thumb {
  background: var(--ui-edge-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
body.app ::-webkit-scrollbar-thumb:hover, body.deck ::-webkit-scrollbar-thumb:hover { background: var(--ui-edge-3); background-clip: content-box; }

/* El foco tiene que verse SIEMPRE: es la única guía de quien navega con teclado. */
body.app :focus-visible, body.deck :focus-visible {
  outline: 2px solid var(--ui-signal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------- el único movimiento
   Un instrumento no "aparece": ENFOCA. Al abrir, la carcasa resuelve una vez —
   los filos se trazan y la obra se asienta desde un desenfoque mínimo—. Una
   sola secuencia autorizada, con salida exponencial y desde un estado ya
   visible, para que nadie se quede mirando una pantalla en blanco. */
@keyframes ui-resolve {
  from { opacity: .55; filter: blur(7px); transform: translateY(9px) scale(.994); }
  to   { opacity: 1;   filter: blur(0);   transform: none; }
}
@keyframes ui-trace {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

body.deck .deck-stage > * { animation: ui-resolve var(--ui-slow) both; }
body.deck .deck-head { animation: ui-resolve 420ms cubic-bezier(.16,1,.3,1) both; }
body.app .deck-grid > * { animation: ui-resolve 460ms cubic-bezier(.16,1,.3,1) both; }
/* Escalonado corto: cinco pasos y para. Más se convierte en espera. */
body.app .deck-grid > *:nth-child(1) { animation-delay: 20ms; }
body.app .deck-grid > *:nth-child(2) { animation-delay: 55ms; }
body.app .deck-grid > *:nth-child(3) { animation-delay: 90ms; }
body.app .deck-grid > *:nth-child(4) { animation-delay: 120ms; }
body.app .deck-grid > *:nth-child(n+5) { animation-delay: 145ms; }

body.deck .deck-rail { position: relative; }
body.deck .deck-rail::after {
  content: "";
  position: absolute; inset: 0 -1px 0 auto;
  width: 1px; background: var(--ui-edge-2);
  transform-origin: top;
  animation: ui-trace 620ms cubic-bezier(.16,1,.3,1) both;
}

@media (prefers-reduced-motion: reduce) {
  body.app *, body.deck * {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------------------------- respuesta
   Zonas táctiles de 44px donde se toca con el dedo, no donde se apunta con el
   ratón: un control de 30px se falla, y fallar un control en el móvil de otro
   es lo que hace que se abandone una herramienta. */
@media (pointer: coarse) {
  body.app .btn, body.deck .btn { min-height: 44px; }
  body.deck .rail-item { min-height: 40px; display: flex; align-items: center; }
}

@media (max-width: 880px) {
  body.deck .deck-stage { padding-top: 14px; }
  body.deck .deck-stage::before, body.deck .deck-stage::after { display: none; }
  body.deck .slide-wrap { border-radius: 9px; }
}

/* ------------------------------------------------------------- barra superior
   La barra es el borde del instrumento: se apoya en la carcasa, no flota sobre
   ella con un color propio. Va traslúcida con desenfoque, y aquí el desenfoque
   está ganado — separa dos planos que se solapan al desplazar — no es adorno. */
html body.app .nav,
html body.deck .nav {
  background: color-mix(in srgb, var(--ui-void) 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--ui-edge);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
html body.app .nav-links a,
html body.deck .nav-links a { color: var(--ui-dim); transition: color var(--ui-fast); }
html body.app .nav-links a:hover,
html body.deck .nav-links a:hover { color: var(--ui-ink); }
html body.app .brand,
html body.deck .brand { color: var(--ui-ink); }

/* La cabecera del deck es la lectura del aparato: qué pieza hay dentro. */
html body.deck .deck-head {
  background: color-mix(in srgb, var(--ui-void) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--ui-edge);
}
html body.deck .deck-head h1 { color: var(--ui-ink); }
html body.deck .deck-sub { color: var(--ui-dim); }

html body.app .footer,
html body.deck .footer {
  background: var(--ui-sink);
  border-top: 1px solid var(--ui-edge);
  color: var(--ui-dim);
}
html body.app .footer a,
html body.deck .footer a { color: var(--ui-dim); }
html body.app .footer a:hover,
html body.deck .footer a:hover { color: var(--ui-ink); }

/* Avisos: el color dice qué clase de cosa ha pasado antes de leer la frase. */
html body.app .flash, html body.deck .flash {
  background: var(--ui-rise);
  border: 1px solid var(--ui-edge-2);
  color: var(--ui-ink);
  border-radius: var(--ui-r-sm);
}
html body.app .flash.error, html body.deck .flash.error {
  border-color: rgba(255,74,43,.42);
  background: linear-gradient(180deg, rgba(255,74,43,.10), var(--ui-rise));
}
html body.app .flash.ok, html body.app .flash.success,
html body.deck .flash.ok, html body.deck .flash.success {
  border-color: rgba(41,223,160,.38);
  background: linear-gradient(180deg, rgba(41,223,160,.09), var(--ui-rise));
}

/* Una pantalla vacía es una invitación a actuar, no un hueco. */
html body.app .empty {
  border: 1px dashed var(--ui-edge-2);
  border-radius: var(--ui-r);
  background: rgba(126,158,220,.03);
  color: var(--ui-dim);
}

/* ------------------------------------------------------------------ ajustes
   Correcciones de la primera inspección, medidas y no supuestas. */

/* El escenario conservaba un fondo cálido propio (rgb 22,18,16) que tapaba la
   carcasa: por eso el hueco alrededor de la obra se veía marrón. Transparente,
   para que la pieza flote sobre el instrumento y no sobre otro panel. */
html body.deck .deck-stage { background: transparent; }

/* Las marcas de registro encuadran la COLUMNA de la obra, no el ancho de la
   ventana. Puestas en el borde de la pantalla quedaban a medio metro de lo que
   pretendían encuadrar, que es como no encuadrar nada. */
html body.deck .deck-stage::before,
html body.deck .deck-stage::after { display: none; }
html body.deck .deck-stage > .container { position: relative; }
html body.deck .deck-stage > .container::before,
html body.deck .deck-stage > .container::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 20px; height: 20px;
  pointer-events: none;
  opacity: .5;
}
html body.deck .deck-stage > .container::before {
  left: -22px;
  border-top: 1px solid var(--ui-edge-3);
  border-left: 1px solid var(--ui-edge-3);
}
html body.deck .deck-stage > .container::after {
  right: -22px;
  border-top: 1px solid var(--ui-edge-3);
  border-right: 1px solid var(--ui-edge-3);
}
@media (max-width: 1100px) {
  html body.deck .deck-stage > .container::before,
  html body.deck .deck-stage > .container::after { display: none; }
}

/* Los avisos del sistema hablan con la voz del instrumento, no con la del
   mundo cálido anterior. */
html body.deck .demo-banner, html body.app .demo-banner,
html body.deck .banner, html body.app .banner {
  background: linear-gradient(180deg, rgba(255,74,43,.10), var(--ui-sink));
  border-bottom: 1px solid var(--ui-edge-2);
  color: var(--ui-dim);
}
html body.deck .demo-banner b, html body.app .demo-banner b,
html body.deck .banner b, html body.app .banner b { color: var(--ui-signal-2); }

/* La ayuda de la barra y los conmutadores de tamaño, al mismo mundo. */
html body.deck .edit-hint { color: var(--ui-dim); }   /* 6,4:1 medido */
html body.deck .vp-btn {
  background: var(--ui-rise);
  border: 1px solid var(--ui-edge);
  color: var(--ui-dim);
}
html body.deck .vp-btn.is-on {
  border-color: var(--ui-signal);
  color: var(--ui-signal-2);
  background: rgba(255,74,43,.08);
}

/* La barra de acciones del deck (.deck-topbar) conservaba su propio fondo
   cálido y partía la carcasa en dos mundos. Es el panel de mandos del
   instrumento: se apoya en la carcasa y se separa por un filo, no por color. */
html body.deck .deck-topbar {
  background: color-mix(in srgb, var(--ui-void) 84%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--ui-edge);
}
html body.deck .deck-topbar h1 { color: var(--ui-ink); }

/* El hueco bajo la última diapositiva usa la altura MEDIDA de la barra fija de
   móvil, no un valor adivinado. Con 92 px fijos la barra tapaba texto en
   reposo —arriba del todo, sin nada que desplazar para descubrirlo— y eso sí
   es un defecto y no el comportamiento normal de una barra fija. */
@media (max-width: 900px) {
  html body.deck .deck-stage { padding-bottom: var(--barra-alta, 92px); }
}

@media (max-width: 900px) {
  /* Si la barra de acciones queda fija arriba, la cabecera del deck se metía
     debajo y el título desaparecía: en móvil no había forma de saber qué
     presentación se estaba editando. El hueco se reserva con la altura MEDIDA
     de la barra, no con un número escrito a mano. */
  html body.deck .deck-head { padding-top: var(--barra-arriba, 0); }
}


/* ------------------------------------------------- la regresion de cuatro turnos
   El desenfoque de la barra superior CREA UN CONTENEDOR para sus descendientes
   fijos: un `position: fixed` dentro de un ancestro con backdrop-filter se
   fija respecto a ese ancestro, no a la pantalla. En movil, la barra de
   acciones que debia pegarse al borde inferior —la zona del pulgar— quedaba
   pegada al fondo de la barra superior, a media altura, tapando el titulo del
   deck. El auditor lo senalo desde el primer dia y se le pusieron tres parches
   de relleno alrededor antes de mirar la causa. En movil, el desenfoque de esa
   barra se retira: es lo unico que no se puede tener junto con el hijo fijo. */
@media (max-width: 719px) {
  html body.deck .deck-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ui-void);
  }
  /* Y sobran los parches que compensaban el sintoma. */
  html body.deck .deck-head { padding-top: 0; }
}

/* ------------------------------------------------------- la barra en movil
   Visto en captura, no supuesto: el logo se partia en dos lineas ("AIM /
   DECK") y el boton principal tambien ("Nuevo / deck"), porque la fila no
   dejaba a nadie encoger y el texto se plegaba. Un logo partido es lo primero
   que ve quien entra desde el telefono. Ni el logo ni el boton se parten: si
   falta sitio, se comprime el espacio entre enlaces, no el nombre. */
@media (max-width: 719px) {
  html body .brand,
  html body .nav-links a,
  html body .nav-links .btn { white-space: nowrap; }
  html body .brand { flex: 0 0 auto; }
  html body .nav-links { gap: 12px; min-width: 0; }
  html body .nav-links .btn { padding-left: 14px; padding-right: 14px; }
}

/* Lo ultimo de la pagina tambien tiene que salir de debajo de la barra: el
   pie va despues del escenario, y era lo que quedaba tapado al final. */
@media (max-width: 900px) {
  html body.deck .footer { padding-bottom: calc(var(--barra-alta, 92px) + 12px); }
}