/* ============================================================================
 * yk-frame.css — Marco CUADRÁTICO de AdmiraNeXT para el perímetro de seguridad
 * de Yokup.  ·  yk-frame v3 (2026-07-12, canon precisado por Carlos)
 *
 * CANON v3:
 *  · BARRA SUPERIOR REAL (.yk-bar): entidad propia del sitio, fixed top:0, ancho
 *    completo, fondo sólido del tema terminal cian, borde inferior. Estructura:
 *      [icono OPCIONES] · logotipo YO KUP (→ /) · rótulo de la página ·
 *      referencias de la home (Plataforma · Agentes IoT · as a Service · Equipo ·
 *      Incidencias · Asistencia · App) · FLOTA admira.tv + reloj ·
 *      [icono AVANZADO] [icono EXPERTO]
 *  · La barra NUNCA se mueve ni se tapa: z-index por encima de paneles.
 *  · Los tres paneles OVERLAY nacen DESDE el borde inferior de la barra
 *    (top: var(--yk-bar-h)) y NO encogen el contenido (flotan encima). La esquina
 *    inferior derecha queda libre para la burbuja del avatar.
 *  · El contenido recibe padding-top = alto de la barra (única excepción al
 *    «no empujar»: padding constante, no dependiente de paneles).
 *  · Los ICONOS viven DENTRO de la barra y NO se mueven: toggle + Escape, estado
 *    encendido (relleno cian + aria-pressed) cuando su panel está abierto.
 *
 * Estética terminal oscuro / fósforo-cian / monospace de la casa (sci-fi
 * 80s/90s). Los colores salen de las CSS vars de cada página, con fallback.
 * ==========================================================================*/

:root{
  --yk-bar-h: 46px;        /* alto de la barra superior real */
  --yk-rail-w: 300px;      /* ancho de paneles laterales */
  --yk-rail-h: 240px;      /* alto del panel inferior */
  --yk-avatar-safe: 132px; /* esquina inf-dcha reservada para la burbuja avatar */
  --yk-z: 2147483000;      /* por debajo del gate de acceso.js, por encima de todo lo demás */
  /* fallbacks por si la página no define los tokens */
  --yk-bg: var(--card, #0a1620);
  --yk-bg2: var(--bg, #02080d);
  --yk-ink: var(--ink, #dff8ff);
  --yk-mut: var(--mut, #75aab9);
  --yk-dim: var(--dim, #4d7a88);
  --yk-brand: var(--brand, #78f3ff);
  --yk-line: var(--line, rgba(120,243,255,.16));
  --yk-line2: var(--line2, rgba(120,243,255,.30));
  --yk-mono: var(--mono, ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace);
}

/* El contenido baja bajo la barra: padding-top constante. Scoped a las páginas
 * con marco (html.yk-framed) — vence al reset *{padding:0} de cada página. */
html.yk-framed body{ padding-top: var(--yk-bar-h); }

/* ============================ BARRA SUPERIOR ============================== */
.yk-bar{
  position: fixed; top:0; left:0; right:0;
  height: var(--yk-bar-h);
  z-index: calc(var(--yk-z) + 3);   /* SIEMPRE por encima de paneles y contenido */
  display: flex; align-items: center; gap: 12px;
  padding: 0 10px;
  background: var(--yk-bg2);         /* fondo sólido del tema terminal */
  border-bottom: 1px solid var(--yk-line2);
  box-shadow: 0 2px 20px rgba(0,0,0,.55), inset 0 -1px 0 rgba(120,243,255,.05);
  font-family: var(--yk-mono);
  color: var(--yk-ink);
}

/* logotipo YO KUP — igual que la landing: puntito cian + YO KUP (enlace a /) */
.yk-logo{
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 14px;
  color: var(--yk-ink);
}
.yk-logo b{ color: var(--yk-brand) }
.yk-logo .yk-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yk-brand); box-shadow: 0 0 16px var(--yk-brand);
  animation: yk-blink 2s infinite;
}
@keyframes yk-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

/* rótulo de la página actual (SOPORTE / TICKET / …) */
.yk-page{
  flex: 0 0 auto; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--yk-brand);
  padding-left: 13px; border-left: 1px solid var(--yk-line);
}

/* referencias de la home — zona central compresible (scroll horizontal interno) */
.yk-nav{
  display: flex; align-items: center; gap: 15px;
  /* blindaje: grupo compacto tras el rótulo SIEMPRE — un nav{} legacy de la
     página (p.ej. justify-content:space-between) no puede esparcir el menú */
  justify-content: flex-start !important;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; padding: 4px 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.yk-nav::-webkit-scrollbar{ display: none }
.yk-nav a{
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yk-mut); text-decoration: none; white-space: nowrap; transition: .15s;
}
.yk-nav a:hover{ color: var(--yk-ink) }
.yk-nav a.on{ color: var(--yk-brand); font-weight: 700 }
.yk-nav a[data-yk-open]{ cursor: pointer }

/* ===================== SELECTOR DE PROYECTO (desplegable) ================= */
/* Absorbe el antiguo rótulo «FLOTA admira.tv»: el botón lee el proyecto activo
 * y el menú (clic, no hover) permite saltar al otro proyecto. Estética terminal
 * cian, hermana de los iconos cuadráticos de la barra. */
.yk-proj{ position: relative; flex: 0 0 auto }
.yk-proj-btn{
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px;
  font-family: var(--yk-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yk-ink); cursor: pointer; white-space: nowrap;
  background: rgba(120,243,255,.05);
  border: 1px solid var(--yk-line2); border-radius: 8px;
  transition: background .15s, border-color .15s, box-shadow .15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.yk-proj-btn:hover{
  border-color: var(--yk-brand);
  background: rgba(120,243,255,.12);
  box-shadow: 0 0 14px rgba(120,243,255,.25);
}
.yk-proj-btn b{ color: var(--yk-brand); font-weight: 700 }
.yk-proj-ic{ font-size: 13px; line-height: 1 }
.yk-proj-cx{ color: var(--yk-mut); font-size: 10px; transition: transform .15s, color .15s }
.yk-proj-nm .yk-pj-short{ display: none }
.yk-proj.open .yk-proj-btn{
  border-color: var(--yk-brand);
  background: rgba(120,243,255,.12);
  box-shadow: 0 0 16px rgba(120,243,255,.30);
}
.yk-proj.open .yk-proj-cx{ transform: rotate(180deg); color: var(--yk-brand) }

/* menú desplegado bajo el botón (se abre por clic; JS conmuta .open) */
.yk-proj-menu{
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 232px; max-width: calc(100vw - 16px);
  display: none; flex-direction: column; gap: 2px;
  padding: 6px;
  background: var(--yk-bg2);
  border: 1px solid var(--yk-line2); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.6), inset 0 0 30px rgba(120,243,255,.03);
  z-index: calc(var(--yk-z) + 4);
}
.yk-proj.open .yk-proj-menu{ display: flex }
.yk-proj-opt{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px; text-decoration: none;
  border: 1px solid transparent; transition: .15s;
}
.yk-proj-opt:hover{ background: rgba(120,243,255,.10); border-color: var(--yk-line2) }
.yk-proj-opt .yk-proj-txt{ display: flex; flex-direction: column; gap: 2px }
.yk-proj-opt .yk-proj-txt b{ font-size: 12px; letter-spacing: .04em; color: var(--yk-ink); font-weight: 700 }
.yk-proj-opt .yk-proj-txt em{
  font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yk-mut);
}
.yk-proj-opt.on{ background: rgba(120,243,255,.08); border-color: var(--yk-line2) }
.yk-proj-opt.on .yk-proj-txt b{ color: var(--yk-brand) }
.yk-proj-opt:focus-visible{ outline: 2px solid var(--yk-brand); outline-offset: 1px }

/* reloj (separador + hora) */
.yk-meta{
  flex: 0 0 auto; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yk-mut);
}
.yk-meta .yk-sep{ color: var(--yk-dim); margin: 0 4px 0 8px }
.yk-clock{ color: var(--yk-ink) }

/* ===================== ICONOS CUADRÁTICOS (en la barra) ================== */
.yk-ico{
  flex: 0 0 auto;
  height: 32px; min-width: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--yk-mono); cursor: pointer;
  color: var(--yk-brand);
  background: rgba(120,243,255,.05);
  border: 1px solid var(--yk-line2);
  border-radius: 8px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.yk-ico:hover{
  border-color: var(--yk-brand);
  background: rgba(120,243,255,.12);
  box-shadow: 0 0 14px rgba(120,243,255,.25);
}
.yk-ico-gl{ font-size: 15px; line-height: 1 }
/* estado ABIERTO: icono «encendido» (relleno) — NO se mueve */
.yk-ico[aria-pressed="true"]{
  color: var(--yk-bg2);
  background: var(--yk-brand);
  border-color: var(--yk-brand);
  box-shadow: 0 0 16px rgba(120,243,255,.45);
}

/* =============================== PANELES ================================= */
.yk-rail{
  position: fixed;
  z-index: var(--yk-z);   /* por debajo de la barra */
  background: linear-gradient(180deg, var(--yk-bg), var(--yk-bg2));
  border: 1px solid var(--yk-line2);
  box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 0 40px rgba(120,243,255,.03);
  transition: transform .28s cubic-bezier(.4,.0,.2,1);
  overflow: auto;
  font-family: var(--yk-mono);
  color: var(--yk-ink);
  scrollbar-width: thin;
}
.yk-rail::-webkit-scrollbar{ width:8px; height:8px }
.yk-rail::-webkit-scrollbar-thumb{ background: var(--yk-line2); border-radius:8px }

/* --- panel IZQUIERDO (OPCIONES) — nace bajo la barra --- */
.yk-rail-left{
  top: var(--yk-bar-h); bottom:0; left:0;
  width: var(--yk-rail-w);
  border-left: 0; border-top: 0; border-bottom: 0;
  transform: translateX(-103%);
  padding: 18px 14px 22px;
}
.yk-open-left .yk-rail-left{ transform: translateX(0) }

/* --- panel DERECHO (AVANZADO) — nace bajo la barra --- */
.yk-rail-right{
  top: var(--yk-bar-h); bottom:0; right:0;
  width: var(--yk-rail-w);
  border-right: 0; border-top: 0; border-bottom: 0;
  transform: translateX(103%);
  padding: 18px 14px 22px;
}
.yk-open-right .yk-rail-right{ transform: translateX(0) }

/* --- panel INFERIOR (EXPERTO) — deja libre la esquina del avatar --- */
.yk-rail-bottom{
  left:0; right: var(--yk-avatar-safe); bottom:0;
  height: var(--yk-rail-h);
  border-left: 0; border-right: 0; border-bottom: 0;
  transform: translateY(103%);
  padding: 14px 16px 16px;
}
.yk-open-bottom .yk-rail-bottom{ transform: translateY(0) }

/* --- cabeceras de panel --- */
.yk-hd{
  font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--yk-brand); font-weight:700;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--yk-line);
  display:flex; align-items:center; gap:8px;
}
.yk-hd::before{ content:""; width:7px; height:7px; border-radius:50%;
  background: var(--yk-brand); box-shadow:0 0 10px var(--yk-brand) }

/* Contenedores donde caen los nodos movidos: verticalizar y ocupar el ancho */
.yk-slot{ display:flex; flex-direction:column; align-items:stretch; gap:8px }
.yk-slot :is(button, a.simBtn, a.bellBtn, .tab, .btn){ width:100%; text-align:left }
.yk-slot .tabs, .yk-slot .tools{ display:flex; flex-direction:column; gap:8px; width:100% }
/* dentro del EXPERTO los botones van en fila, no apilados a full-width */
.yk-expert > .yk-slot{ flex:1; min-height:0 }
.yk-slot .yk-expert-btns button{ width:auto; text-align:center }
.yk-empty{
  font-size: 11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--yk-dim); padding: 8px 2px; opacity:.8;
}

/* --- Panel EXPERTO --- */
.yk-expert{ display:flex; flex-direction:column; height:100%; gap:10px }
.yk-expert-btns{ display:flex; gap:8px; flex-wrap:wrap }
.yk-expert-btns button{
  font-family: var(--yk-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding: 8px 12px; border-radius:8px; cursor:pointer;
  color: var(--yk-brand); background: rgba(120,243,255,.06);
  border: 1px dashed var(--yk-line2); transition:.15s;
}
.yk-expert-btns button:hover{ background: rgba(120,243,255,.14); border-style:solid }
.yk-expert-out{
  flex:1; min-height:0; overflow:auto; margin:0;
  font-family: var(--yk-mono); font-size:11px; line-height:1.5;
  color: var(--yk-mut); white-space:pre-wrap; word-break:break-word;
  background: rgba(2,8,13,.5); border:1px solid var(--yk-line); border-radius:10px;
  padding: 10px 12px;
}
.yk-ver{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--yk-dim) }
.yk-ver b{ color: var(--yk-brand) }

/* ============================ RESPONSIVE ================================= */
/* ≤790px: el nombre del proyecto se compacta (admira.live ▾) para no desplazar
 * el reloj ni los iconos; la zona de referencias se comprime con scroll. */
@media (max-width: 790px){
  .yk-proj-nm .yk-pj-full{ display: none }
  .yk-proj-nm .yk-pj-short{ display: inline }
}

/* ≤520px: las referencias y el reloj salen; el selector queda como icono + caret
 * (sin nombre); permanecen logo + iconos (quietos). */
@media (max-width: 520px){
  :root{ --yk-rail-w: 92vw; --yk-rail-h: 78vh; --yk-avatar-safe: 0px; }
  .yk-rail-bottom{ right:0 }
  .yk-nav, .yk-meta, .yk-page{ display:none }
  .yk-proj-nm{ display: none }
  .yk-bar{ gap:10px }
}