/* css/global.css */
/* Estilos globales mínimos que Tailwind no cubre */

/* ============================================ */
/* RESET Y BASE */
/* ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f8fafc;
    color: #0a1628;
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================ */
/* SELECTORES DE UTILIDAD (para componentes JS) */
/* ============================================ */

/* NOTA: Los estilos de tool-card ahora están en Tailwind */
/* Este selector se mantiene como referencia para que JS pueda encontrarlos */
.tool-card {
    display: flex;
    flex-direction: column;
}

.tool-card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-card .name {
    font-weight: 700;
    font-size: 1.125rem;
    color: #0a1628;
}

.tool-card .desc {
    font-size: 0.875rem;
    color: #6b7a8f;
    line-height: 1.5;
    flex: 1;
}

.tool-card .badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================ */
/* HEADER FIJO (compartido por todas las páginas) */
/* ============================================ */

#geo-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 50; 
    height: 80px; 
}

.header-spacer { height: 80px; }

@media (max-width: 1024px) {
    #geo-header { height: 64px; }
    .header-spacer { height: 64px; }
}

@media (max-width: 768px) {
    #geo-header { height: 56px; }
    .header-spacer { height: 56px; }
}

@media (max-width: 480px) {
    #geo-header { height: 48px; }
    .header-spacer { height: 48px; }
}

/* ============================================ */
/* BANNER ADSENSE STICKY (compartido por todas las herramientas) */
/* ============================================ */

/* Contenedor flotante inferior */
#contenedor-adsense-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    /* La altura se ajusta por breakpoint según el ad servido */
    height: 90px;   /* desktop: 90px (leaderboard) */
    /* Transición suave para ocultar/mostrar cuando se despliega el teclado móvil */
    transition: transform 0.25s ease-in-out;
}

/* Contenedor interno del ad (tamaño reservado para evitar CLS) */
#contenedor-adsense-local {
    width: 100%;
    max-width: 728px;   /* desktop: leaderboard estándar */
    height: 90px;
    overflow: hidden;
}

/* Modo debug: placeholder visible cuando no hay AdSense real */
#contenedor-adsense-local.ad-debug {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
}

.ad-debug-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}

.ad-debug-placeholder small {
    font-size: 11px;
    color: #cbd5e1;
}

/* Blindaje de UX: el contenido principal nunca es tapado por el banner. */
#main-content,
.contenedor-principal-app {
    margin-bottom: 90px;
}

/* ============================================ */
/* RESPONSIVE — TAMAÑOS DEL BANNER POR BREAKPOINT */
/* ============================================ */

/* Tablet: 468x60 */
@media (max-width: 1024px) {
    #contenedor-adsense-fijo {
        height: 60px;
    }
    #contenedor-adsense-local {
        max-width: 468px;
        height: 60px;
    }
    #main-content,
    .contenedor-principal-app {
        margin-bottom: 60px;
    }
}

/* Móvil: 320x50 */
@media (max-width: 768px) {
    #contenedor-adsense-fijo {
        height: 50px;
    }
    #contenedor-adsense-local {
        max-width: 320px;
        height: 50px;
    }
    #main-content,
    .contenedor-principal-app {
        margin-bottom: 50px;
    }
}

/* ============================================
   PRODUCT PATH (landing - Cómo funciona GeoContext)
   ============================================ */
#productPathContainer {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 60%, #ffffff 100%);
  border-radius: 24px;
  padding: 3rem 1.5rem;
}

#productPathContainer .step-number-bg {
  position: absolute;
  top: -20px;
  right: -5px;
  font-size: 90px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
  font-family: 'Georgia', serif;
}

#productPathContainer .step-hover {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#productPathContainer .step-hover:hover {
  border-color: #2a9d8f;
  box-shadow: 0 6px 20px rgba(42, 157, 143, 0.08);
}

#productPathContainer .step-circle {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#productPathContainer .step-hover:hover .step-circle {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================
   HEADER: nav desktop (.gc-header-nav)
   ============================================ */
/* La nav desktop usa clase custom en vez de .hidden de Tailwind,
   porque .hidden de tools.css tiene !important y rompe el responsive. */

.gc-header-nav {
  display: none;
}

@media (min-width: 1024px) {
  .gc-header-nav {
    display: flex;
  }
}

/* ============================================
   HEADER: logo GeoContext (wordmark bicolor)
   ============================================ */
/* Logo del header: icono token-branded:lm + wordmark bicolor
   "GeoContext" en Red Hat Display. El icono se pinta al verde
   del sitio con un filtro CSS (los iconos de Token Branded
   traen colores embebidos, no heredan `color`). */

.gc-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  text-decoration: none;
}

.gc-logo-icon {
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
  filter: brightness(0) saturate(100%) invert(52%) sepia(38%) saturate(625%) hue-rotate(132deg) brightness(95%) contrast(92%);
}

.gc-logo-wordmark {
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0a1628;
  display: block;
}

.gc-logo-wordmark .gc-geo {
  color: #2a9d8f;
}

/* Version compacta para el drawer mobile */
.gc-logo--sm .gc-logo-wordmark {
  font-size: 18px;
}

/* ============================================
   HEADER: logo, badge premium, nombre de usuario
   ============================================ */
/* Estos elementos usan clases custom con media queries en vez
   de .hidden + sm:* de Tailwind. */

.gc-header-logo,
.gc-header-premium-badge,
.gc-header-user-name {
  display: none;
}

@media (min-width: 640px) {
  .gc-header-logo {
    display: block;
  }
  .gc-header-premium-badge {
    display: inline-flex;
    align-items: center;
  }
  .gc-header-user-name {
    display: inline;
  }
}