/* ════════════════════════════════════════════════════════════
   INFRAMAP · Sistema de temas conmutables
   3 paletas (A · claro / B · oscuro / C · papel) sobre un único
   conjunto de variables. Cambio en caliente con data-theme.
   ════════════════════════════════════════════════════════════ */

/* ───── Tema A · Cartográfica clara (default) ───── */
:root,
:root[data-theme="A"]{
  --bg:           #fafaf7;
  --bg-soft:      #f3f2ec;
  --surface:      #ffffff;
  --surface-2:    #f7f6f1;
  --ink:          #18181b;
  --ink-soft:     #27272a;
  --ink-mute:     #52525b;
  --ink-faint:    #a1a1aa;
  --line:         #e4e4e7;
  --line-strong:  #d4d4d8;
  --accent:       #2563eb;          /* cobalto */
  --accent-soft:  #dbeafe;
  --accent-ink:   #ffffff;          /* texto sobre fondo accent */
  --danger:       #dc2626;
  --warn:         #d97706;
  --ok:           #15803d;
  --shadow:       0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.04), 0 14px 30px -12px rgba(37,99,235,0.22);
  /* curvas de nivel */
  --contour-stroke: rgba(180, 174, 160, 0.30);
  --contour-stroke-2: rgba(180, 174, 160, 0.18);
  /* mapa Leaflet · tile suggestion */
  --map-bg:       #eceae3;
  color-scheme: light;
}

/* ───── Tema B · Topográfica oscura ───── */
:root[data-theme="B"]{
  --bg:           #0e1014;
  --bg-soft:      #14171c;
  --surface:      #181b22;
  --surface-2:    #1f232b;
  --ink:          #f4f4f5;
  --ink-soft:     #d4d4d8;
  --ink-mute:     #a1a1aa;
  --ink-faint:    #a1a1aa;
  --line:         #2a2f38;
  --line-strong:  #3a4150;
  --accent:       #22d3ee;          /* cian eléctrico */
  --accent-soft:  rgba(34,211,238,0.12);
  --accent-ink:   #06141a;
  --danger:       #f87171;
  --warn:         #fbbf24;
  --ok:           #4ade80;
  --shadow:       0 1px 2px rgba(0,0,0,0.4), 0 12px 30px -12px rgba(0,0,0,0.6);
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.4), 0 18px 40px -12px rgba(34,211,238,0.30);
  --contour-stroke: rgba(255, 255, 255, 0.045);
  --contour-stroke-2: rgba(34, 211, 238, 0.06);
  --map-bg:       #0e1014;
  color-scheme: dark;
}

/* ───── Tema C · Papel cartográfico ───── */
:root[data-theme="C"]{
  --bg:           #f4efe4;
  --bg-soft:      #ebe4d3;
  --surface:      #fbf7eb;
  --surface-2:    #f0eadb;
  --ink:          #2c1f14;
  --ink-soft:     #3d2f1f;
  --ink-mute:     #5d4d38;
  --ink-faint:    #b09b80;
  --line:         #d9cdb3;
  --line-strong:  #c4b491;
  --accent:       #b8512c;          /* terracota */
  --accent-soft:  #f4d8c7;
  --accent-ink:   #fff8ee;
  --danger:       #b8512c;
  --warn:         #c69033;
  --ok:           #5a7a3e;
  --shadow:       0 1px 2px rgba(60,40,20,0.06), 0 10px 28px -12px rgba(60,40,20,0.16);
  --shadow-hover: 0 1px 2px rgba(60,40,20,0.06), 0 16px 36px -12px rgba(184,81,44,0.30);
  --contour-stroke: rgba(180, 130, 80, 0.36);
  --contour-stroke-2: rgba(180, 130, 80, 0.22);
  --map-bg:       #ebe4d3;
  color-scheme: light;
}

/* ════════════════════════════════════════════════════════════
   Reset y base
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
:root[data-theme="C"] html,
:root[data-theme="C"]{
  font-family: 'Inter', system-ui, sans-serif;
}
body{
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
  min-height:100vh;
  position:relative;
  transition:background-color 0.25s ease, color 0.25s ease;
}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
.mono{font-family:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;font-feature-settings:"zero","ss01"}

/* ════════════════════════════════════════════════════════════
   FONDO DE CURVAS DE NIVEL (SVG inline, color por tema)
   Aplicado a body::before para no afectar interacciones.
   ════════════════════════════════════════════════════════════ */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'><g fill='none' stroke='%23999999' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' opacity='1'><path d='M-50 720 Q 80 700 200 690 T 420 660 T 640 600 T 880 540 T 1100 480 T 1280 460'/><path d='M-50 660 Q 100 640 230 620 T 470 580 T 720 510 T 960 440 T 1280 400'/><path d='M-50 600 Q 120 580 260 560 T 520 510 T 800 430 T 1060 370 T 1280 340'/><path d='M-50 540 Q 140 520 290 490 T 570 440 T 880 360 T 1160 310 T 1280 290'/><path d='M-50 470 Q 160 450 320 420 T 620 360 T 960 290 T 1280 250'/><path d='M-50 400 Q 180 380 360 350 T 680 280 T 1040 220 T 1280 200'/><path d='M-50 320 Q 200 300 400 270 T 740 200 T 1110 150 T 1280 140'/><path d='M-50 240 Q 220 220 440 190 T 800 130 T 1180 90 T 1280 80'/><path d='M-50 160 Q 240 140 480 110 T 860 60 T 1280 30'/></g><g fill='none' stroke='%23999999' stroke-width='1' stroke-linecap='round' stroke-dasharray='2 6' opacity='0.6'><path d='M-50 690 Q 90 670 210 658 T 430 628 T 660 568 T 900 508 T 1280 450'/><path d='M-50 568 Q 130 548 270 528 T 540 478 T 820 398 T 1080 338 T 1280 310'/><path d='M-50 432 Q 170 412 340 380 T 650 320 T 1000 250 T 1280 220'/><path d='M-50 280 Q 210 260 420 230 T 770 165 T 1140 120 T 1280 110'/></g></svg>");
  background-size: 1200px 800px;
  background-repeat: repeat;
  background-position: center top;
  /* color via CSS filter — replaced per theme via SVG stroke override below */
  opacity: 0.9;
}
/* Cambiamos el color de las curvas por tema usando un overlay con color y mezcla */
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background: var(--contour-stroke);
  mix-blend-mode: multiply;
}
:root[data-theme="B"] body::after{
  mix-blend-mode: lighten;
  background: rgba(255,255,255,0.018);
}
/* Recolorear las líneas: usamos filter para que el SVG gris adopte color del tema */
:root[data-theme="A"] body::before{
  filter: opacity(0.45) contrast(0.7);
}
:root[data-theme="B"] body::before{
  filter: invert(1) opacity(0.06) contrast(1.2);
}
:root[data-theme="C"] body::before{
  filter: sepia(1) saturate(1.4) hue-rotate(-12deg) opacity(0.55);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT contenedores
   ════════════════════════════════════════════════════════════ */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-wide{max-width:1480px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.container,.container-wide{padding:0 16px}}

/* ════════════════════════════════════════════════════════════
   HEADER + NAV (compartido entre módulos)
   ════════════════════════════════════════════════════════════ */
.app-header{
  position:sticky;top:0;z-index:50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.app-header-inner{
  max-width:1480px;margin:0 auto;
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:var(--ink);color:var(--bg);
  display:grid;place-items:center;
  font-weight:800;font-size:18px;letter-spacing:-0.04em;
  flex-shrink:0;
}
.brand-mark img{width:70%;height:70%;object-fit:contain}
:root[data-theme="B"] .brand-mark img{filter:invert(1)}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-0.02em;line-height:1}
.brand-name span{color:var(--accent)}
.brand-tag{font-size:11px;color:var(--ink-mute);margin-top:3px;letter-spacing:0.01em}

.nav{display:flex;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:8px;
  font-size:13px;font-weight:500;letter-spacing:0;
  color:var(--ink-mute);
  transition:background 0.15s, color 0.15s;
}
.nav-link:hover{background:var(--surface);color:var(--ink)}
.nav-link.current{background:var(--ink);color:var(--bg);font-weight:600}
:root[data-theme="B"] .nav-link.current{background:var(--accent);color:var(--accent-ink)}
:root[data-theme="C"] .nav-link.current{background:var(--accent);color:var(--accent-ink)}

@media(max-width:760px){
  .app-header-inner{padding:10px 16px;gap:12px;flex-wrap:wrap}
  .brand-tag{display:none}
  .nav{flex-wrap:wrap}
  .nav-link{padding:6px 10px;font-size:12px}
}

/* ════════════════════════════════════════════════════════════
   BOTONES — llamativos pero limpios
   ════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:10px;
  font-size:14px;font-weight:600;letter-spacing:-0.005em;
  border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);
  transition:transform 0.12s ease, box-shadow 0.18s ease, background 0.15s, border-color 0.15s;
  white-space:nowrap;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--ink-mute)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.btn-primary{
  background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);
  font-weight:600;
}
.btn-primary:hover{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:var(--shadow-hover);
  filter:brightness(1.06);
}

.btn-ghost{
  background:transparent;border-color:transparent;color:var(--ink-mute);
}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);border-color:transparent}

.btn-lg{padding:14px 26px;font-size:15px;border-radius:12px}
.btn-sm{padding:7px 14px;font-size:12.5px;border-radius:8px}

.btn-icon{
  display:inline-grid;place-items:center;
  width:36px;height:36px;padding:0;
}

/* ════════════════════════════════════════════════════════════
   CARD / SURFACE
   ════════════════════════════════════════════════════════════ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  transition:border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.card-hover:hover{
  border-color:var(--ink-mute);
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}
.card-padded{padding:24px}
.card-title{font-size:18px;font-weight:600;letter-spacing:-0.012em;margin-bottom:6px}
.card-desc{font-size:14px;color:var(--ink-mute);line-height:1.55}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:500;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* ════════════════════════════════════════════════════════════
   TYPE
   ════════════════════════════════════════════════════════════ */
h1.display{
  font-size:clamp(36px, 6vw, 64px);
  font-weight:700;letter-spacing:-0.025em;line-height:1.05;
  color:var(--ink);
}
h1.display em{font-style:normal;color:var(--accent)}
.lead{
  font-size:clamp(15px, 1.6vw, 18px);color:var(--ink-soft);
  max-width:60ch;line-height:1.55;
}
h2.section-title{
  font-size:clamp(22px, 3vw, 32px);
  font-weight:700;letter-spacing:-0.02em;line-height:1.1;
}

/* ════════════════════════════════════════════════════════════
   DROP ZONE (compartida)
   ════════════════════════════════════════════════════════════ */
.drop{
  position:relative;
  background:var(--surface);
  border:1.5px dashed var(--line-strong);
  border-radius:18px;
  padding:48px 32px;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.drop:hover{border-color:var(--ink-mute);background:var(--surface-2)}
.drop.drag-over{
  border-color:var(--accent);
  border-style:solid;
  background:var(--accent-soft);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.drop-icon{
  width:56px;height:56px;border-radius:14px;
  background:var(--surface-2);
  display:grid;place-items:center;margin:0 auto 16px;
  color:var(--ink-mute);
  transition:background 0.2s, color 0.2s, transform 0.2s;
}
.drop.drag-over .drop-icon{background:var(--accent);color:var(--accent-ink);transform:scale(1.06)}
.drop-title{font-size:20px;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
.drop-title strong{color:var(--accent);font-weight:700}
.drop-hint{font-size:13.5px;color:var(--ink-mute);margin-top:8px;line-height:1.55}
.drop-divider{
  display:flex;align-items:center;gap:14px;margin:22px auto 18px;max-width:240px;
  color:var(--ink-faint);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
}
.drop-divider::before,.drop-divider::after{
  content:"";flex:1;height:1px;background:var(--line);
}
.drop-formats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px;
}
.drop-format{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:3px 9px;border-radius:6px;
  background:var(--surface-2);color:var(--ink-mute);
  border:1px solid var(--line);
}

/* ════════════════════════════════════════════════════════════
   INPUTS (textarea, select)
   ════════════════════════════════════════════════════════════ */
.input,
.textarea,
.select{
  width:100%;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:11px 14px;
  font-size:14px;
  color:var(--ink);
  font-family:inherit;
  transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.input:focus,.textarea:focus,.select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.textarea{resize:vertical;min-height:90px;line-height:1.6;font-family:'JetBrains Mono',monospace;font-size:13px}
.textarea::placeholder,.input::placeholder{color:var(--ink-faint)}

/* ════════════════════════════════════════════════════════════
   TAGS / BADGES / CHIPS
   ════════════════════════════════════════════════════════════ */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:600;letter-spacing:-0.005em;
  background:var(--surface-2);color:var(--ink-mute);
  border:1px solid var(--line);
}
.tag-ok{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok);border-color:color-mix(in srgb, var(--ok) 30%, transparent)}
.tag-warn{background:color-mix(in srgb, var(--warn) 14%, transparent);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 32%, transparent)}
.tag-mute{background:var(--surface-2);color:var(--ink-mute);border-color:var(--line)}
.tag-accent{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.tag-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ════════════════════════════════════════════════════════════
   TOAST + INDICADOR DE TEMA
   ════════════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:12px;
  font-size:13px;font-weight:500;letter-spacing:-0.005em;
  z-index:9999;
  box-shadow:0 12px 40px -8px rgba(0,0,0,0.35);
  animation:toastIn 0.25s cubic-bezier(.22,1,.36,1);
  display:flex;align-items:center;gap:10px;max-width:90vw;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

#theme-indicator{
  position:fixed;top:18px;right:18px;
  background:var(--ink);color:var(--bg);
  padding:7px 13px;border-radius:99px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;letter-spacing:0.06em;
  z-index:9999;box-shadow:var(--shadow-hover);
  pointer-events:none;
  opacity:0;transform:translateY(-6px);
  transition:opacity 0.2s, transform 0.2s;
}
#theme-indicator.show{opacity:1;transform:translateY(0)}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.app-footer{
  margin-top:80px;
  border-top:1px solid var(--line);
  padding:32px 24px;
  color:var(--ink-mute);
  font-size:13px;
}
.app-footer-inner{
  max-width:1480px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.app-footer a{color:var(--ink-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ════════════════════════════════════════════════════════════
   SCROLLBARS finos
   ════════════════════════════════════════════════════════════ */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

/* ════════════════════════════════════════════════════════════
   UTIL · animaciones de entrada
   ════════════════════════════════════════════════════════════ */
[data-reveal]{opacity:0;transform:translateY(12px);animation:reveal 0.6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
[data-reveal="1"]{animation-delay:0.05s}
[data-reveal="2"]{animation-delay:0.15s}
[data-reveal="3"]{animation-delay:0.25s}
[data-reveal="4"]{animation-delay:0.35s}
[data-reveal="5"]{animation-delay:0.45s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ════════════════════════════════════════════════════════════
   MOBILE POLISH · universal (Android · iOS)
   Aplica a las 5 páginas que importan este archivo.
   ════════════════════════════════════════════════════════════ */

/* Tap highlight transparente · evita el flash gris en Android al tocar */
button, a, .btn, [role="button"], input[type="button"], input[type="submit"]{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 640px){
  /* Anti-zoom iOS · Safari hace zoom al focus si el font-size del input es < 16px */
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  textarea,
  select{
    font-size: 16px;
  }

  /* Áreas de tap mínimas (Material Design recomienda 48px, Apple 44px) */
  .btn, .nav-link, .filter-chip, button[type="button"], button[type="submit"]{
    min-height: 36px;
  }

  /* Evita scroll horizontal accidental por overflow de elementos absolutos */
  html, body{ overflow-x: clip; }

  /* Footer apilado · ya cubierto por .app-footer-inner pero lo refuerzo */
  .app-footer-inner{ flex-direction: column; align-items: flex-start; gap: 8px; text-align: left }

  /* Toast más cerca del centro inferior, no choca con el indicador del sistema */
  .toast{ bottom: 16px; padding: 11px 16px; font-size: 12.5px; max-width: calc(100vw - 24px) }

  /* Theme indicator: más arriba en móvil para no cubrir contenido */
  #theme-indicator{ top: 12px; right: 12px; padding: 6px 11px; font-size: 10.5px }

  /* Tablas: scroll suave inercial en iOS */
  table, .scroll-x, .tbl-wrap{ -webkit-overflow-scrolling: touch }

  /* Drop zones más compactas para no dominar el viewport */
  .drop{ padding: 32px 18px }
  .drop-icon{ width: 48px; height: 48px; margin-bottom: 12px }
  .drop-title{ font-size: 17px }
  .drop-hint{ font-size: 12.5px }
}

/* iOS · respeta safe-area en footer (notch / home indicator) */
@supports (padding: max(0px)){
  .app-footer{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* ════════════════════════════════════════════════════════════
   PAGE TRANSITION · cortina entre módulos
   ════════════════════════════════════════════════════════════ */
.page-curtain{
  position:fixed; inset:0; z-index:9998;
  background:var(--bg);
  opacity:0; pointer-events:none;
  transition: opacity 0.45s cubic-bezier(.22, 1, .36, 1);
}
.page-curtain::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,
    transparent 0% 35%,
    color-mix(in srgb, var(--accent) 22%, transparent) 50%,
    transparent 65% 100%);
  background-size:280% 100%;
  background-position:110% 0;
  opacity:0;
}
.page-curtain.entering{ opacity:1; pointer-events:auto }
.page-curtain.entering::before{
  opacity:1;
  animation: curtainShine 0.60s ease-out forwards;
}
.page-curtain.lifting{
  opacity:0;
  transition: opacity 0.55s cubic-bezier(.22, 1, .36, 1);
}
@keyframes curtainShine{
  from{ background-position:110% 0 }
  to  { background-position:-10% 0 }
}
@media (prefers-reduced-motion: reduce){
  .page-curtain, .page-curtain.lifting{ transition:none }
  .page-curtain::before, .page-curtain.entering::before{ animation:none; opacity:0 }
}