/* ============================================================
   GCG Design System V1 — Navbar / Sidebar / Footer
   Spec: GCG_DESIGN_SYSTEM_V1.md §21-22
   ============================================================ */

/* ---- Navbar (público, desktop) ----
   Tamaño subido ~20% en la revisión visual del 2026-08-26 (logo, texto,
   links y altura general se sentían demasiado chicos en 1440p/1920p). */
.gcg-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--gcg-navbar-height);
  display: flex;
  align-items: center;
  /* Más transparente que antes (revisión 2026-08-28) para que el video
     del hero se note detrás — el blur más fuerte compensa la legibilidad
     del texto tanto sobre el video como sobre el resto del contenido
     cuando el usuario baja la página (navbar es sticky). */
  background: rgba(8, 13, 16, 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gcg-border);
}
.gcg-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.gcg-navbar__brand { display: flex; align-items: center; gap: var(--gcg-space-3); }
/* El ícono vive en la celda superior del rail (desktop) — acá se
   muestra SOLO en mobile (<1024px, rail oculto) para no repetirlo. */
.gcg-navbar__brand img { height: 38px; width: auto; display: none; }
@media (max-width: 1023px) { .gcg-navbar__brand img { display: block; } }

.gcg-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--gcg-space-8);
}
.gcg-navbar__link {
  position: relative;
  font-size: var(--gcg-text-base);
  font-weight: 500;
  color: var(--gcg-text-secondary);
  padding: 8px 0;
  transition: color var(--gcg-transition-fast);
}
/* Botones/toggle del header — un poco más grandes que el tamaño base del
   design system, a tono con la navbar más presente. */
.gcg-navbar .gcg-btn { height: 46px; padding: 0 var(--gcg-space-6); font-size: var(--gcg-text-base); }
.gcg-navbar .gcg-btn--sm { height: 42px; padding: 0 var(--gcg-space-5); font-size: var(--gcg-text-sm); }
.gcg-navbar__toggle { width: 46px; height: 46px; }
.gcg-navbar__link:hover { color: var(--gcg-text); }
.gcg-navbar__link--activo { color: var(--gcg-text); }
.gcg-navbar__link--activo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gcg-accent);
  border-radius: 2px;
}
/* "Disponible próximamente": color muted DEL SISTEMA (no opacity — un
   texto atenuado con opacity se lee "roto/muerto", no "aún no
   disponible"). Mismo criterio en drawer y footer. */
.gcg-navbar__link--proximamente,
.gcg-drawer__link--proximamente { color: var(--gcg-text-muted); cursor: default; }

.gcg-navbar__actions { display: flex; align-items: center; gap: var(--gcg-space-3); }

.gcg-navbar__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--gcg-border-strong); border-radius: var(--gcg-radius-sm);
  color: var(--gcg-text);
}

@media (max-width: 1023px) {
  .gcg-navbar__links { display: none; }
  .gcg-navbar__toggle { display: flex; }
  /* Ingresar/Registrarme ya están en el drawer — mostrarlos también acá
     desbordaba el header en mobile (ingresar.php/registro.php quedan
     igual de accesibles vía el menú). */
  .gcg-navbar__actions > .gcg-btn { display: none; }
}

/* ---- Rail de iconos (columna izquierda, SOLO Home/marketing) ----
   Referencia: challengermode.com/start — el rail y la navbar comparten
   EXACTAMENTE el mismo fondo y SIN borde entre ambos (nada de línea
   vertical del rail cruzando la línea horizontal de la navbar) para que
   se lean como un único marco de menú, no dos barras separadas.
   `.gcg-shell` es el wrapper de TODO lo demás (navbar, drawer, main,
   footer) desplazado por el ancho del rail. Distinto de `.gcg-sidebar`
   (paneles autenticados, §"Sidebar de aplicación" arriba): ese es ancho
   con texto+ícono; este es angosto, solo ícono, público. */
.gcg-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--gcg-rail-width);
  background: var(--gcg-bg);
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Celda del logo: MISMA altura que la navbar, con un border-bottom que
   cae exactamente en el mismo y que el border-bottom de la navbar (ambas
   empiezan en top:0 con height:var(--gcg-navbar-height)) — así la línea
   se ve continua de punta a punta en vez de cortada/descuadrada. */
.gcg-rail__logo-cell {
  width: 100%; height: var(--gcg-navbar-height);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--gcg-border);
  flex: none;
}
.gcg-rail__logo-cell img { height: 34px; width: auto; display: block; }

.gcg-rail__games {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--gcg-space-5) 0;
  gap: var(--gcg-space-4);
}

/* Iconos de juego — mismo diseño para todos (monograma en tile
   redondeado): sin logos con marca registrada de terceros, solo texto.
   El nombre completo aparece en un tooltip propio y sutil al hacer
   hover (`.gcg-rail__tip`), no el `title` nativo del navegador. */
.gcg-rail__game {
  position: relative;
  width: 46px; height: 46px; border-radius: var(--gcg-radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--gcg-surface-raised);
  border: 1px solid var(--gcg-border);
  color: var(--gcg-text-secondary);
  font-family: var(--gcg-font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .02em;
  flex: none;
}
.gcg-rail__game:hover { border-color: rgba(244,166,42,.4); color: var(--gcg-text); }
.gcg-rail__tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  background: var(--gcg-surface-raised);
  border: 1px solid var(--gcg-border);
  border-radius: var(--gcg-radius-sm);
  padding: 5px var(--gcg-space-3);
  font-family: var(--gcg-font-body); font-weight: 500; font-size: var(--gcg-text-xs); letter-spacing: normal;
  color: var(--gcg-text);
  opacity: 0; pointer-events: none;
  transition: opacity var(--gcg-transition-fast), transform var(--gcg-transition-fast);
  z-index: 102;
}
.gcg-rail__game:hover .gcg-rail__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Bloque normal, NO flex: un flex column acá rompía el centrado de
   `.gcg-container` (margin:0 auto) en cuanto un hijo tenía contenido más
   ancho que el propio shell — auto-margins desactivan el stretch de
   flexbox y el hijo crece a su max-content en vez de quedar contenido
   (pasó con la fila de juegos con scroll horizontal). Bloque normal no
   tiene ese problema: cada hijo (header/hero/main/footer) simplemente
   se apila, que es todo lo que necesitamos acá. */
.gcg-shell { margin-left: var(--gcg-rail-width); min-height: 100vh; }
@media (max-width: 1023px) {
  .gcg-rail { display: none; }
  .gcg-shell { margin-left: 0; }
}

/* ---- Drawer móvil ---- */
.gcg-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; display: none;
}
.gcg-drawer-overlay--abierto { display: block; }
.gcg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  background: var(--gcg-bg-secondary);
  border-left: 1px solid var(--gcg-border);
  padding: var(--gcg-space-6) var(--gcg-space-5);
  display: flex; flex-direction: column; gap: var(--gcg-space-1);
  transform: translateX(100%);
  transition: transform var(--gcg-transition);
}
.gcg-drawer-overlay--abierto .gcg-drawer { transform: translateX(0); }
.gcg-drawer__link {
  padding: var(--gcg-space-3) var(--gcg-space-2);
  font-size: var(--gcg-text-base);
  color: var(--gcg-text-secondary);
  border-radius: var(--gcg-radius-sm);
}
.gcg-drawer__link--activo { color: var(--gcg-accent); background: var(--gcg-accent-soft); }

/* ---- Sidebar de aplicación (paneles autenticados) ---- */
.gcg-sidebar {
  width: 240px;
  flex: none;
  background: var(--gcg-bg-secondary);
  border-right: 1px solid var(--gcg-border);
  padding: var(--gcg-space-5) var(--gcg-space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gcg-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--gcg-space-3);
  padding: var(--gcg-space-3);
  border-radius: var(--gcg-radius-sm);
  color: var(--gcg-text-secondary);
  font-size: var(--gcg-text-sm);
  font-weight: 500;
  transition: background var(--gcg-transition-fast), color var(--gcg-transition-fast);
}
.gcg-sidebar__item svg { width: 18px; height: 18px; flex: none; }
.gcg-sidebar__item:hover { background: var(--gcg-surface-raised); color: var(--gcg-text); }
.gcg-sidebar__item--activo {
  background: var(--gcg-surface-raised);
  color: var(--gcg-text);
  position: relative;
}
.gcg-sidebar__item--activo::before {
  content: '';
  position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  background: var(--gcg-accent); border-radius: 2px;
}

/* ---- Feature strip ----
   En mobile pasa de fila con scroll horizontal (quedaba cortada, sin pista
   visual de que había más contenido) a cuadrícula 2×N intencional, con
   líneas finas de división entre celdas — comportamiento responsive
   explícito, no un recorte accidental. */
.gcg-feature-strip {
  background: var(--gcg-bg-secondary);
  border-top: 1px solid var(--gcg-border);
  border-bottom: 1px solid var(--gcg-border);
}
.gcg-feature-strip__row { display: flex; align-items: center; justify-content: center; }
.gcg-feature-strip__item {
  display: flex;
  align-items: center;
  gap: var(--gcg-space-2);
  padding: var(--gcg-space-4) var(--gcg-space-6);
  font-size: var(--gcg-text-sm);
  color: var(--gcg-text-secondary);
  border-right: 1px solid var(--gcg-divider);
  white-space: nowrap;
}
.gcg-feature-strip__item:last-child { border-right: none; }
.gcg-feature-strip__item svg { width: 16px; height: 16px; color: var(--gcg-accent); flex: none; }

@media (max-width: 1023px) and (min-width: 768px) {
  .gcg-feature-strip__row { overflow-x: auto; }
}

@media (max-width: 767px) {
  .gcg-feature-strip__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--gcg-border);
    padding: 0;
  }
  .gcg-feature-strip__item {
    background: var(--gcg-bg-secondary);
    justify-content: center;
    text-align: center;
    border-right: none;
    padding: var(--gcg-space-4) var(--gcg-space-2);
    white-space: normal;
  }
}

/* ---- Footer — diseño propio de GCG (NO el de Generación Cloud: sin
   canvas de matriz de puntos animada, sin "sellos" circulares — ver
   memoria "Referencia no es copia"). Firma visual: línea de acento
   arriba (mismo lenguaje que .gcg-panel--tech del resto de la Home) +
   marca de agua tipográfica GCG gigante, recortada, súper sutil.
   Vive acá (no en cada página) porque includes/partials/footer.php es
   compartido por index.php, ingresar.php y registro.php — sin este
   CSS acá, esas dos últimas se quedan sin estilos de footer. ---- */
.gcg-footer { position: relative; overflow: hidden; border-top: 2px solid var(--gcg-accent); background: var(--gcg-bg-secondary); font-size: var(--gcg-text-sm); }
.gcg-footer__marca-agua {
  position: absolute; right: -0.05em; bottom: -0.28em; z-index: 0;
  font-family: var(--gcg-font-display); font-weight: 700; font-size: 320px; line-height: 1;
  color: var(--gcg-text); opacity: .035; letter-spacing: -0.02em;
  pointer-events: none; user-select: none; white-space: nowrap;
}
@media (max-width: 1023px) { .gcg-footer__marca-agua { font-size: 220px; } }
@media (max-width: 640px) { .gcg-footer__marca-agua { display: none; } }
.gcg-footer__interior { position: relative; z-index: 1; padding-top: var(--gcg-space-10); }
.gcg-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gcg-space-8); padding-bottom: var(--gcg-space-8); }
@media (max-width: 1023px) { .gcg-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .gcg-footer__grid { grid-template-columns: 1fr; gap: var(--gcg-space-6); } }
.gcg-footer__brand { display: flex; align-items: center; gap: var(--gcg-space-2); color: var(--gcg-text); margin-bottom: var(--gcg-space-2); font-family: var(--gcg-font-display); font-weight: 700; font-size: var(--gcg-text-lg); }
.gcg-footer__brand img { height: 26px; width: auto; display: block; }
.gcg-footer__col-title { font-size: var(--gcg-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gcg-text-secondary); margin-bottom: var(--gcg-space-3); }
.gcg-footer__link { display: block; font-size: var(--gcg-text-sm); color: var(--gcg-text-muted); padding: var(--gcg-space-1) 0; cursor: default; }
button.gcg-footer__link { background: none; border: none; font-family: inherit; text-align: left; width: 100%; }
button.gcg-footer__link:hover { color: var(--gcg-accent); }
.gcg-footer__badges { display: flex; flex-wrap: wrap; gap: var(--gcg-space-2); margin-top: var(--gcg-space-5); }
.gcg-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--gcg-space-4); padding-top: var(--gcg-space-6); border-top: 1px solid var(--gcg-divider); font-size: var(--gcg-text-xs); flex-wrap: wrap; }