/* ===========================================================
   Global-VZLA · Plataforma Web — LAYOUT COMPARTIDO
   -----------------------------------------------------------
   El "chrome" que se repite en todas las herramientas: la marca,
   la barra superior, el riel de navegación y el marco de página.
   Toda pieza de layout que aparezca en dos herramientas va acá,
   no se copia. Ver ../CLAUDE.md §8 y shared/DESIGN.md.

   Se carga después de tokens.css, base.css y components.css.
   =========================================================== */

/* ===========================================================
   MARCA
   -----------------------------------------------------------
   El logo animado es OBLIGATORIO y siempre igual: el nodo cian
   orbita el anillo. Se aplica poniendo class="gv-orbit-node" en
   el <circle> del nodo, dentro de un mark de viewBox 0 0 110 110.
   El origen 55px 55px es el centro del anillo — no cambiar.
   Nunca redefinir la animación en la herramienta.
   =========================================================== */
@keyframes gv-orbit{ to{ transform:rotate(360deg); } }

.gv-orbit-node{
  animation:gv-orbit 6s linear infinite;
  transform-origin:55px 55px;
}

/* Bloque de marca: mark + palabra. Sirve de botón "volver al
   inicio" (por eso resetea los estilos de <button>). */
.gv-brand{
  display:flex; align-items:center; gap:var(--sp-3);
  background:none; border:none; padding:0;
  color:inherit; font:inherit; text-decoration:none;
  cursor:pointer;
}
.gv-brand:hover{ text-decoration:none; opacity:.88; }
.gv-brand__mark{ flex:0 0 auto; width:34px; height:34px; }
.gv-brand__mark svg{ width:100%; height:100%; }
.gv-brand__txt{ display:flex; flex-direction:column; line-height:1.12; min-width:0; }
.gv-brand__txt b{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:.2px;
}
/* El nombre de la herramienta debajo de la marca. Es lo que dice
   dónde estás parado cuando hay 6 pestañas abiertas. */
.gv-brand__txt span{ font-size:var(--fs-xs); color:var(--text-2); letter-spacing:.3px; }

/* Lockup vertical GLOBAL / VZLA (login, pantallas de acceso). */
.gv-wordmark{
  display:flex; flex-direction:column; line-height:.92;
  font-family:var(--font-display); font-weight:700; letter-spacing:-1px;
}
.gv-wordmark b{ font-size:var(--fs-2xl); color:var(--text); font-weight:700; }
/* `--accent-text` y no `--accent-2`: acá el indigo es texto, y el indigo
   insignia sobre grafito da 3.3:1. Ver tokens.css. */
.gv-wordmark span{ font-size:var(--fs-xl); color:var(--accent-text); }

/* ===========================================================
   BARRA SUPERIOR
   -----------------------------------------------------------
   ⚠️ El fondo sale de --bg-2, NUNCA de un color fijo. Control de
   Activos la tenía en rgba(9,12,18,.8) y en tema claro quedaba
   una franja negra encima de una página blanca, con el texto en
   3.3:1. Bug real medido el 2026-08-09.
   =========================================================== */
.gv-topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  display:flex; align-items:center; gap:var(--sp-4);
  min-height:64px;
  padding:var(--sp-3) clamp(var(--sp-4), 3vw, var(--sp-8));
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
}
/* Empuja lo que sigue hacia la derecha. Un solo separador por barra. */
.gv-topbar__sp{ flex:1; min-width:var(--sp-3); }
.gv-topbar__right{ display:flex; align-items:center; gap:var(--sp-3); }

/* Migas: dónde estoy, en mono, con el punto de estado del sistema. */
.gv-crumb{
  display:flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-sm);
  letter-spacing:.06em; color:var(--text-2);
}
.gv-crumb__sep{ color:var(--text-3); }
.gv-crumb__here{ color:var(--accent-text); }
.gv-crumb__led{
  width:8px; height:8px; border-radius:var(--r-full);
  background:var(--success);
  box-shadow:0 0 8px var(--success);
  animation:gv-pulse 3s ease-in-out infinite;
}
@keyframes gv-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* Identidad de quien está usando la herramienta. */
.gv-user{ display:flex; align-items:center; gap:var(--sp-3); }
.gv-user__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.gv-user__name{ font-size:var(--fs-base); font-weight:500; }
.gv-role{
  padding:1px var(--sp-2);
  border:1px solid var(--accent-line); border-radius:var(--r-full);
  background:var(--accent-soft); color:var(--accent-text);
  font-family:var(--font-mono); font-size:var(--fs-2xs);
  letter-spacing:.1em; text-transform:uppercase;
}
.gv-role[data-role="general"]{
  border-color:var(--info-line); background:var(--info-soft); color:var(--info);
}

/* ===========================================================
   RIEL DE NAVEGACIÓN (lateral)
   -----------------------------------------------------------
   ⚠️ position:sticky + height:100vh solo funciona si el <body> NO
   tiene height:100%: con height:100% el body mide un viewport y el
   riel se queda sin recorrido, así que desaparece al bajar. El
   reset de base.css ya lo resuelve — no reponer height:100% en el
   body de ninguna herramienta.
   =========================================================== */
.gv-rail{
  position:sticky; top:0; z-index:var(--z-rail);
  display:flex; flex-direction:column;
  flex:0 0 auto;
  width:248px; height:100vh;
  padding:var(--sp-3);
  background:var(--sidebar);
  border-right:1px solid var(--border);
  transition:width var(--t-slow) var(--ease);
}
.gv-rail--collapsed{ width:72px; }

.gv-rail__head{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-2) var(--sp-4);
  margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--border);
}
.gv-rail--collapsed .gv-rail__head{ flex-direction:column; gap:var(--sp-3); padding-inline:0; }
.gv-rail--collapsed .gv-brand__txt{ display:none; }

.gv-rail__toggle{
  display:grid; place-items:center; flex:0 0 auto; margin-left:auto;
  width:28px; height:28px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text-2); cursor:pointer;
  transition:color var(--t), border-color var(--t);
}
.gv-rail--collapsed .gv-rail__toggle{ margin-left:0; }
.gv-rail__toggle:hover{ color:var(--text); border-color:var(--border-2); }
.gv-rail__toggle svg{ transition:transform var(--t-slow); }
.gv-rail--collapsed .gv-rail__toggle svg{ transform:rotate(180deg); }

.gv-rail__nav{ flex:1; display:flex; flex-direction:column; gap:2px; overflow-y:auto; overflow-x:hidden; }
.gv-rail__nav::-webkit-scrollbar{ width:0; }

.gv-nav-i{
  position:relative;
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; height:42px;
  padding:0 var(--sp-3);
  border:none; border-radius:var(--r-md);
  background:transparent;
  color:var(--text-2);
  font-family:var(--font-body); font-size:var(--fs-base); font-weight:500;
  text-align:left; text-decoration:none;
  cursor:pointer;
  transition:background var(--t), color var(--t);
}
.gv-nav-i:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.gv-nav-i__ic{ display:grid; place-items:center; flex:0 0 22px; }
.gv-nav-i__lbl{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gv-rail--collapsed .gv-nav-i{ justify-content:center; padding:0; }
.gv-rail--collapsed .gv-nav-i__lbl{ display:none; }

/* Ítem activo: fondo tenue + barra de acento a la izquierda.
   ⚠️ No se usa el indigo sólido con texto blanco: en tema claro ese
   patrón terminaba pintando blanco sobre una superficie casi blanca.
   El fondo tenue con texto de acento se lee en los dos temas. */
.gv-nav-i.is-active{
  background:var(--accent-soft);
  color:var(--accent-text);
  font-weight:600;
}
.gv-nav-i.is-active::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px;
  width:3px; border-radius:var(--r-full);
  background:var(--accent);
}
.gv-rail__sep{ height:1px; margin:var(--sp-2) var(--sp-2); background:var(--border); }

/* Nombre del ítem cuando el riel está plegado. Vive fuera del flujo
   para no ensanchar el riel. */
.gv-rail--collapsed .gv-nav-i__tip{
  position:absolute; left:calc(100% + var(--sp-2)); z-index:var(--z-pop);
  padding:var(--sp-2) var(--sp-3);
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-sm); box-shadow:var(--shadow-pop);
  color:var(--text); font-size:var(--fs-sm); white-space:nowrap;
  opacity:0; pointer-events:none;
  transform:translateX(-6px);
  transition:opacity var(--t), transform var(--t);
}
.gv-rail--collapsed .gv-nav-i:hover .gv-nav-i__tip{ opacity:1; transform:none; }
.gv-nav-i__tip{ display:none; }
.gv-rail--collapsed .gv-nav-i__tip{ display:block; }

/* ===========================================================
   MARCO DE PÁGINA
   =========================================================== */
.gv-shell{ display:flex; min-height:100vh; }
.gv-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.gv-content{
  flex:1;
  width:100%;
  padding:var(--sp-6) clamp(var(--sp-4), 3vw, var(--sp-8)) var(--sp-12);
}
/* Ancho de lectura para pantallas de formulario o de texto. Las de
   tabla no lo llevan: necesitan todo el ancho. */
.gv-content--narrow{ max-width:1080px; margin-inline:auto; }

.gv-page-head{ margin-bottom:var(--sp-6); }
.gv-kicker{
  margin-bottom:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan);
}
.gv-page-title{ font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:600; letter-spacing:-.02em; }
.gv-page-sub{ margin-top:var(--sp-2); color:var(--text-2); font-size:var(--fs-md); }

/* Atmósfera de fondo: dos halos de marca, muy tenues. Se pinta sobre
   un elemento aparte, fijo y sin eventos, para que no interfiera con
   nada. Los colores salen de tokens → cambian con el tema solos. */
.gv-atmo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 82% -8%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 60%),
    radial-gradient(52rem 28rem at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%);
}
/* Todo lo que va sobre la atmósfera necesita su propia capa. */
.gv-above{ position:relative; z-index:1; }

/* ===========================================================
   CARTEL "estás dentro del ambiente de un cliente"
   -----------------------------------------------------------
   SaaS, Frente B (paso 4). Lo ve SOLO el admin mientras está
   impersonando; el cliente no lo ve nunca porque el estado vive en
   la sesión del admin (R3).

   ⚠️ No es decoración. Sin él, el admin puede creer que está en su
   propia cuenta y no entender por qué ve datos que no cargó — o, el
   día que se encienda la llave de escritura, escribir en la cuenta
   equivocada.

   Ámbar y no rojo a propósito: no pasó nada malo, hay que prestar
   atención. Va arriba de todo y ocupa el ancho: tiene que ser
   imposible no verlo.
   =========================================================== */
.gv-imp-bar{
  position:sticky; top:0; z-index:var(--z-imp);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--sp-2) var(--sp-4);
  padding:9px var(--sp-4);
  background:var(--warning-soft);
  border-bottom:1px solid var(--warning);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.3;
}
.gv-imp-bar[hidden]{ display:none; }
.gv-imp-bar .gv-imp-ico{ display:inline-flex; color:var(--warning); }
.gv-imp-bar strong{ font-weight:600; color:var(--warning); }
.gv-imp-bar .gv-imp-out{
  padding:4px var(--sp-3);
  border:1px solid var(--warning); border-radius:var(--r-full);
  background:transparent; color:var(--warning);
  font:inherit; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.gv-imp-bar .gv-imp-out:hover{ background:var(--warning); color:var(--bg); text-decoration:none; }

/* ===========================================================
   RESPONSIVO
   El riel se convierte en un cajón que entra desde la izquierda.
   =========================================================== */
@media (max-width:860px){
  .gv-rail{
    position:fixed; left:-268px; top:0;
    width:248px;
    box-shadow:var(--shadow-pop);
    transition:left var(--t-slow) var(--ease);
  }
  .gv-rail.is-open{ left:0; }
  .gv-rail--collapsed{ width:248px; }
  .gv-topbar{ min-height:56px; gap:var(--sp-2); }
  .gv-user__meta{ display:none; }
  .gv-content{ padding:var(--sp-4) var(--sp-4) var(--sp-10); }
}