/* =========================================================
   GIS — Page (scoped) ✅ FULL REPLACEMENT
   Contrato:
   - Solo GIS: body[data-page="gis"]
   - Theme-aware (dark/light) sin tocar globals
   - Sin resets globales que rompan otras páginas
   ========================================================= */

body[data-page="gis"]{
  /* fallback friendly */
  --gis-radius: var(--gl-radius, 26px);
  --gis-shadow: var(--gl-shadow, 0 18px 55px rgba(0,0,0,.22));
  --gis-ease: var(--gl-ease, cubic-bezier(.2,.8,.2,1));

  /* Colores base (fallbacks por si tu set difiere) */
  --gis-bg: var(--gl-bg);
  --gis-fg: var(--gl-fg, rgba(232,221,204,.96));
  --gis-fg-dim: var(--gl-fg-dim, rgba(232,221,204,.78));
  --gis-accent: var(--gl-accent, rgba(147,168,95,1));
  --gis-accent-strong: var(--gl-accent-strong, rgba(147,168,95,1));

  --gis-border-1: var(--gl-border-1, var(--gl-border, rgba(147,168,95,.18)));
  --gis-border-2: var(--gl-border-2, var(--gl-border, rgba(147,168,95,.26)));

  /* Superficies */
  --gis-card-bg: linear-gradient(135deg, rgba(10,34,1,.86), rgba(6,16,4,.94));
  --gis-input-bg: rgba(6,16,4,.56);

  /* Grid overlay (controlado) */
  --gis-grid-a: rgba(147,168,95,.05);
  --gis-grid-b: rgba(147,168,95,.04);

  color: var(--gis-fg);
}

/* ===== Light mode: corregimos contraste SIN tocar tokens globales ===== */
html[data-theme="light"] body[data-page="gis"]{
  --gis-fg: rgba(16,20,16,.94);
  --gis-fg-dim: rgba(34,44,28,.76);

  /* mantenemos el “panel” oscuro porque es parte del lenguaje GIS,
     pero controlamos el header y overlays para que no se laven */
  --gis-border-1: rgba(60,80,40,.18);
  --gis-border-2: rgba(60,80,40,.24);

  --gis-grid-a: rgba(60,80,40,.06);
  --gis-grid-b: rgba(60,80,40,.05);
}

/* Box sizing SOLO dentro del layout GIS */
body[data-page="gis"] .gis-main-layout,
body[data-page="gis"] .gis-main-layout *{
  box-sizing: border-box;
}

/* Layout general */
body[data-page="gis"] .gis-main-layout{
  padding: 44px 0 64px;
  min-height: 80vh;
  display: flex;
  justify-content: center;
}

body[data-page="gis"] .gis-container{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* =========================
   HEADER
   ========================= */
body[data-page="gis"] .gis-header{
  text-align: center;
  margin-bottom: 22px;
}

body[data-page="gis"] .gis-badge{
  display: inline-block;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--gis-border-1);
  background: color-mix(in oklab, var(--gis-accent) 10%, transparent);
  color: color-mix(in oklab, var(--gis-accent-strong) 72%, var(--gis-fg));
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

body[data-page="gis"] .gis-title{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
  line-height: 1.10;
  color: var(--gis-fg);
}

body[data-page="gis"] .gis-subtitle{
  font-size: 16px;
  color: var(--gis-fg-dim);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0 auto;
}

/* =========================
   FORM + RESULT CARDS
   ========================= */
body[data-page="gis"] .gis-form-card,
body[data-page="gis"] .gis-result-card{
  border-radius: var(--gis-radius);
  border: 1px solid var(--gis-border-1);
  background: var(--gis-card-bg);
  box-shadow: var(--gis-shadow);
  position: relative;
  overflow: hidden;
}

body[data-page="gis"] .gis-form-card{
  padding: 28px;
}

body[data-page="gis"] .gis-result-card{
  margin-top: 14px;
  padding: 26px;
  display: none;
  animation: gis-fadeIn .42s var(--gis-ease);
}

body[data-page="gis"] .gis-result-card.visible{ display:block; }

@keyframes gis-fadeIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* “volumen” interno sutil */
body[data-page="gis"] .gis-form-card::before,
body[data-page="gis"] .gis-result-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(80% 60% at 18% 18%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(75% 60% at 85% 70%, color-mix(in oklab, var(--gis-accent) 10%, transparent), transparent 62%);
  opacity: .95;
}

html[data-theme="light"] body[data-page="gis"] .gis-form-card::before,
html[data-theme="light"] body[data-page="gis"] .gis-result-card::before{
  background:
    radial-gradient(80% 60% at 18% 18%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(75% 60% at 85% 70%, rgba(60,80,40,.08), transparent 62%);
}

/* Grid overlay (tu .gis-bg) */
body[data-page="gis"] .gis-bg{
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 18% 18%, color-mix(in oklab, var(--gis-accent) 18%, transparent), transparent 60%),
    radial-gradient(700px 360px at 78% 32%, rgba(47,81,1,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.52)),
    repeating-linear-gradient(90deg, var(--gis-grid-a) 0, var(--gis-grid-a) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, var(--gis-grid-b) 0, var(--gis-grid-b) 1px, transparent 1px, transparent 64px);
  opacity: .88;
  z-index: 0;
}

html[data-theme="light"] body[data-page="gis"] .gis-bg{
  opacity: .60; /* si lo dejás igual que dark, ensucia */
}

body[data-page="gis"] .gis-form-card > form,
body[data-page="gis"] .gis-result-card > *{
  position: relative;
  z-index: 1;
}

/* =========================
   FORM FIELDS
   ========================= */
body[data-page="gis"] .gis-form-group{ margin-bottom: 18px; }
body[data-page="gis"] .gis-form-group:last-child{ margin-bottom: 0; }

body[data-page="gis"] .gis-label{
  display:block;
  font-size: 14.5px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
  margin-bottom: 10px;
  line-height: 1.35;
}

html[data-theme="light"] body[data-page="gis"] .gis-label{
  color: rgba(255,255,255,.92); /* label vive dentro del panel oscuro */
}

/* Select */
body[data-page="gis"] .select-wrapper{ position: relative; }

body[data-page="gis"] .gis-select{
  width:100%;
  padding: 14px 44px 14px 16px;
  font-size: 15px;
  font-family: inherit;
  color: rgba(255,255,255,.92);
  background: var(--gis-input-bg);
  border: 1px solid var(--gis-border-1);
  border-radius: 16px;
  cursor:pointer;
  transition: transform .22s var(--gis-ease), border-color .22s var(--gis-ease), background .22s var(--gis-ease);
  appearance: none;
}

/* UNA sola flecha (sacamos la duplicación) */
body[data-page="gis"] .select-wrapper::after{
  content:"";
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events:none;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a85f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

html[data-theme="light"] body[data-page="gis"] .select-wrapper::after{
  /* en light, subimos un toque el contraste del icono */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a85f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

body[data-page="gis"] .gis-select:hover{
  background: rgba(47,81,1,.22);
  border-color: var(--gis-border-2);
  transform: translateY(-1px);
}

body[data-page="gis"] .gis-select:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--gis-accent) 50%, var(--gis-border-2));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gis-accent) 18%, transparent);
}

/* Opciones: legibles en dropdown del navegador */
body[data-page="gis"] .gis-select option{
  background: var(--gis-bg);
  color: var(--gis-fg);
}

/* =========================
   BUTTONS
   ========================= */
body[data-page="gis"] .gis-calculate-btn,
body[data-page="gis"] .gis-result-cta{
  width:100%;
  margin-top: 10px;
  padding: 16px 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gis-accent) 22%, transparent);
  cursor:pointer;
  background: linear-gradient(135deg, rgba(67,81,2,.92), rgba(147,168,95,.92));
  color: var(--gis-bg);
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transition: transform .22s var(--gis-ease), box-shadow .22s var(--gis-ease), filter .22s var(--gis-ease);
  position: relative;
  overflow: hidden;
}

body[data-page="gis"] .gis-calculate-btn:hover,
body[data-page="gis"] .gis-result-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  filter: saturate(112%);
}

body[data-page="gis"] .gis-calculate-btn:active,
body[data-page="gis"] .gis-result-cta:active{ transform: translateY(0px); }

/* =========================
   RESULT AREA
   ========================= */
body[data-page="gis"] .gis-result-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gis-border-1);
}

body[data-page="gis"] .gis-score-label,
body[data-page="gis"] .gis-estado-label,
body[data-page="gis"] .gis-decision-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(147,168,95,.92);
  font-weight: 800;
}

body[data-page="gis"] .gis-score-value{
  font-size: 36px;
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(255,255,255,.94);
}

body[data-page="gis"] .gis-estado-badge{
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .25px;
  border: 1px solid var(--gis-border-1);
  background: rgba(6,16,4,.55);
  color: rgba(255,255,255,.92);
}

body[data-page="gis"] .gis-estado-i1{ border-color: rgba(147,168,95,.55); color: rgba(147,168,95,.96); background: rgba(147,168,95,.14); }
body[data-page="gis"] .gis-estado-i2{ border-color: rgba(147,168,95,.38); color: rgba(147,168,95,.92); background: rgba(147,168,95,.10); }
body[data-page="gis"] .gis-estado-i3{ border-color: rgba(255,180,100,.35); color: rgba(255,210,170,.95); background: rgba(255,180,100,.10); }
body[data-page="gis"] .gis-estado-i4{ border-color: rgba(255,100,100,.35); color: rgba(255,170,170,.95); background: rgba(255,100,100,.10); }

body[data-page="gis"] .gis-decision-value{
  font-size: 18px;
  font-weight: 950;
  color: rgba(255,255,255,.94);
  margin: 10px 0 10px 0;
}

body[data-page="gis"] .gis-result-copy{
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
}

body[data-page="gis"] .gis-result-note{
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(147,168,95,.90);
  font-style: italic;
}

/* =========================
   FOOTER
   ========================= */
body[data-page="gis"] .gis-footer{
  text-align:center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--gis-border-1);
}

body[data-page="gis"] .gis-footer-text{
  font-size: 12.5px;
  color: rgba(147,168,95,.88);
  line-height: 1.55;
}
/* =========================================================
   GIS — Scale + Guided Reading Modal (append)
   ========================================================= */

.gis-scale{
  margin: 14px 0 4px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  border: 1px solid var(--gl-border);
  background: rgba(6,16,4,.40);
  position: relative;
  z-index: 1;
}

.gis-scale-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.gis-scale-k{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gl-sage);
  font-weight: 800;
}

.gis-scale-pct{
  font-size: 12.5px;
  color: var(--gl-sand);
  font-weight: 900;
  opacity: .95;
}

.gis-scale-track{
  position: relative;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--gl-border);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}

.gis-scale-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,120,120,.90), rgba(255,200,150,.88), rgba(147,168,95,.92));
  box-shadow: inset 0 0 0 1px rgba(232,221,204,.10);
  transition: width .55s var(--gl-ease);
}

/* segment lines */
.gis-scale-segs{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  pointer-events:none;
}

.gis-scale-segs .seg{
  position: relative;
}
.gis-scale-segs .seg::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width: 1px;
  height: 100%;
  background: rgba(232,221,204,.10);
}
.gis-scale-segs .seg:last-child::after{ display:none; }

.gis-scale-labels{
  display:flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(147,168,95,.88);
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .92;
}

/* State-tint (subtle) */
.gis-result-card[data-tier="i1"] .gis-scale{ background: rgba(147,168,95,.10); }
.gis-result-card[data-tier="i2"] .gis-scale{ background: rgba(147,168,95,.08); }
.gis-result-card[data-tier="i3"] .gis-scale{ background: rgba(255,200,150,.07); }
.gis-result-card[data-tier="i4"] .gis-scale{ background: rgba(255,120,120,.06); }

/* --- Modal (guided reading) --- */
#gis-guided-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.62);
  padding: 18px;
}

#gis-guided-modal .gm-card{
  width: min(860px, 100%);
  border-radius: 20px;
  border: 1px solid rgba(147,168,95,.22);
  background: linear-gradient(135deg, rgba(10,34,1,.88), rgba(6,16,4,.82));
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  color: var(--gl-sand);
  padding: 18px 18px 14px;
  position: relative;
  overflow:hidden;
}

#gis-guided-modal .gm-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(147,168,95,.18), transparent 60%),
    radial-gradient(700px 360px at 78% 32%, rgba(47,81,1,.22), transparent 62%),
    linear-gradient(180deg, rgba(6,16,4,.15), rgba(6,16,4,.65));
  opacity: .9;
}

#gis-guided-modal .gm-inner{ position:relative; z-index:1; }

#gis-guided-modal .gm-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(147,168,95,.22);
  background: rgba(6,16,4,.55);
  color: var(--gl-sand);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

#gis-guided-modal .gm-title{
  font-weight: 900;
  font-size: 18px;
  margin: 6px 0 10px;
  letter-spacing: -.01em;
}

#gis-guided-modal .gm-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#gis-guided-modal .gm-chip{
  padding: 6px 10px;
  border: 1px solid rgba(147,168,95,.18);
  border-radius: 999px;
  background: rgba(6,16,4,.35);
  font-size: 12.5px;
  opacity: .92;
  font-weight: 800;
}

#gis-guided-modal .gm-body{
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 14.9px;
  opacity: .98;
}

#gis-guided-modal .gm-actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

#gis-guided-modal .gm-btn{
  flex: 1;
  min-width: 260px;
  border-radius: 999px;
  border: 1px solid rgba(147,168,95,.28);
  background: rgba(147,168,95,.10);
  color: var(--gl-sand);
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .2px;
}

#gis-guided-modal .gm-btn.primary{
  background: linear-gradient(135deg, rgba(67,81,2,.92), rgba(147,168,95,.92));
  color: var(--gl-bg);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}

#gis-guided-modal .gm-foot{
  margin-top: 10px;
  opacity: .84;
  font-size: 12.5px;
  color: rgba(147,168,95,.88);
}

/* LIGHT: que no se “ensucie” */
html[data-theme="light"] .gis-scale{
  background: rgba(255,255,255,.55);
  border-color: rgba(10,18,10,.12);
}
html[data-theme="light"] .gis-scale-track{
  background: rgba(10,18,10,.06);
  border-color: rgba(10,18,10,.12);
}
html[data-theme="light"] .gis-scale-labels{
  color: rgba(10,18,10,.62);
}
/* === FIX: cerrar modal (X) siempre clickeable === */
#gis-guided-modal .gm-card{
  isolation: isolate; /* crea stacking context limpio */
}

#gis-guided-modal .gm-card::before{
  z-index: 0; /* asegura que el overlay visual quede atrás */
}

#gis-guided-modal .gm-inner{
  position: relative;
  z-index: 1;
}

#gis-guided-modal .gm-close{
  z-index: 3;           /* arriba de todo */
  pointer-events: auto; /* por si alguna capa lo anulaba */
}
/* =========================================
   GIS — Modal Buttons (Premium Fit)
   ========================================= */

#gis-guided-modal .gm-actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

#gis-guided-modal .gm-btn{
  flex: 1;
  min-width: 220px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;

  cursor:pointer;
  border: 1px solid var(--gl-border-2);

  background: color-mix(in oklab, var(--gl-surface-1) 85%, transparent);
  color: var(--gl-fg);

  box-shadow: var(--gl-shadow-1);
  transition: 
    transform var(--gl-t-fast),
    background var(--gl-t-fast),
    border-color var(--gl-t-fast),
    box-shadow var(--gl-t-fast),
    filter var(--gl-t-fast);
}

/* Hover */
#gis-guided-modal .gm-btn:hover{
  transform: translateY(-1px);
  border-color: var(--gl-border-3);
  background: color-mix(in oklab, var(--gl-surface-2) 88%, transparent);
  box-shadow: var(--gl-shadow-2);
}

/* Focus */
#gis-guided-modal .gm-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--gl-accent) 28%, transparent),
    var(--gl-shadow-2);
}

/* PRIMARY (Siguiente paso) */
#gis-guided-modal .gm-btn.primary{
  color: var(--gl-bg);
  border: 1px solid color-mix(in oklab, var(--gl-accent) 22%, transparent);
  background: linear-gradient(
    135deg,
    var(--gl-accent-strong),
    var(--gl-accent)
  );

  box-shadow:
    0 14px 32px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

#gis-guided-modal .gm-btn.primary:hover{
  transform: translateY(-2px);
  filter: saturate(110%);
  box-shadow:
    0 18px 42px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* LIGHT MODE CORRECCIÓN */
html[data-theme="light"] #gis-guided-modal .gm-btn{
  background: color-mix(in oklab, var(--gl-surface-1) 94%, transparent);
}

html[data-theme="light"] #gis-guided-modal .gm-btn.primary{
  color: rgba(248,246,240,.96);
  box-shadow:
    0 16px 44px rgba(16,20,16,.12),
    inset 0 0 0 1px rgba(255,255,255,.22);
}