/* =====================================================================
   DALPGIS — Sistema visual web
   "La conexión inteligente de la información geográfica"
   Uso: <link rel="stylesheet" href="dalpgis.css"> (o inline con scripts/inline_assets.py)
   ===================================================================== */

:root {
  /* Marca */
  --dg-navy: #07225F;
  --dg-navy-900: #04153A;
  --dg-navy-700: #0E3282;
  --dg-navy-100: #E6EBF5;
  --dg-gold: #E5C00B;
  --dg-gold-600: #B89A00;
  --dg-gold-100: #FBF4CF;
  /* Apoyo cartográfico */
  --dg-teal: #1B8A8F;
  --dg-terra: #C8553D;
  --dg-sky: #5B8FD6;
  --dg-olive: #7A9E3B;
  --dg-orange: #E89B2C;
  --dg-green: #2E8B57;

  /* Semánticos (claro) */
  --dg-bg: #F5F7FB;
  --dg-surface: #FFFFFF;
  --dg-surface-2: #EEF2F8;
  --dg-ink: #0E1730;
  --dg-text: #26324D;
  --dg-muted: #4A5875;
  --dg-line: #DCE2EE;
  --dg-heading: var(--dg-navy);
  --dg-accent: var(--dg-gold);
  --dg-link: var(--dg-navy-700);

  /* Tipografía */
  --dg-font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --dg-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dg-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Forma */
  --dg-radius-sm: 6px;
  --dg-radius: 10px;
  --dg-radius-lg: 16px;
  --dg-shadow: 0 1px 2px rgba(7,34,95,.06), 0 4px 16px rgba(7,34,95,.08);
  --dg-shadow-lg: 0 10px 40px rgba(7,34,95,.16);
  --dg-max: 1120px;
  --dg-read: 720px;
}

/* Modo oscuro (automático salvo data-theme="light"; forzable con data-theme="dark") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dg-bg: #030D24; --dg-surface: #071A44; --dg-surface-2: #0B2356;
    --dg-ink: #F3F6FC; --dg-text: #D5DDEE; --dg-muted: #9AA9C7; --dg-line: #1B3266;
    --dg-heading: #FFFFFF; --dg-link: #F0D24A;
  }
}
:root[data-theme="dark"] {
  --dg-bg: #030D24; --dg-surface: #071A44; --dg-surface-2: #0B2356;
  --dg-ink: #F3F6FC; --dg-text: #D5DDEE; --dg-muted: #9AA9C7; --dg-line: #1B3266;
  --dg-heading: #FFFFFF; --dg-link: #F0D24A;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--dg-bg); color: var(--dg-text);
  font: 400 16px/1.65 var(--dg-font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--dg-link); text-underline-offset: 3px; }
a:hover { color: var(--dg-gold-600); }
h1, h2, h3, h4 { font-family: var(--dg-font-display); color: var(--dg-heading); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 900; }
h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1em; }
code, pre, kbd { font-family: var(--dg-font-mono); font-size: .9em; }
pre { background: var(--dg-navy-900); color: #E8EEFA; padding: 1rem 1.2rem; border-radius: var(--dg-radius); overflow-x: auto; border-left: 4px solid var(--dg-gold); line-height: 1.55; }
:not(pre) > code { background: var(--dg-surface-2); color: var(--dg-ink); padding: .12em .4em; border-radius: 4px; }
hr { border: 0; height: 1px; background: var(--dg-line); margin: 2rem 0; }

/* ---------- Firma de marca ---------- */
/* La regla dorada bajo el wordmark → subrayado de títulos */
.dg-rule::after, .dg-h-rule::after {
  content: ""; display: block; width: 72px; height: 5px; margin-top: .45em;
  background: var(--dg-gold); border-radius: 2px;
}
/* El eslogan del logo: mayúsculas con tracking amplio */
.dg-kicker {
  font: 700 .74rem/1.3 var(--dg-font-display); text-transform: uppercase;
  letter-spacing: .22em; color: var(--dg-gold-600); margin: 0 0 .7rem;
}
.dg-on-navy .dg-kicker, .dg-kicker--gold { color: var(--dg-gold); }
.dg-tagline { font: 600 .72rem/1.4 var(--dg-font-display); text-transform: uppercase; letter-spacing: .24em; }
/* Retícula de meridianos/paralelos (el globo del isotipo) */
.dg-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- Layout ---------- */
.dg-container { width: 100%; max-width: var(--dg-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .dg-container { padding: 0 32px; } }
.dg-section { padding: 64px 0; }
.dg-read { max-width: var(--dg-read); margin: 0 auto; }
.dg-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.dg-on-navy { background: var(--dg-navy); color: #DCE4F5; }
.dg-on-navy h1, .dg-on-navy h2, .dg-on-navy h3 { color: #fff; }

/* ---------- Cabecera / navegación ---------- */
.dg-header { position: sticky; top: 0; z-index: 50; background: var(--dg-surface); border-bottom: 1px solid var(--dg-line); }
.dg-header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.dg-header__logo img { height: 40px; width: auto; display: block; }
.dg-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.dg-nav a { font: 600 .9rem var(--dg-font-display); color: var(--dg-heading); text-decoration: none; }
.dg-nav a:hover { color: var(--dg-gold-600); }
@media (max-width: 720px) { .dg-nav { display: none; } }
.dg-logo-dark, .dg-header__logo img.dg-logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img.dg-logo-light { display: none; } :root:not([data-theme="light"]) img.dg-logo-dark { display: block; } }
:root[data-theme="dark"] img.dg-logo-light { display: none; } :root[data-theme="dark"] img.dg-logo-dark { display: block; }

/* ---------- Hero ---------- */
.dg-hero { position: relative; overflow: hidden; background: var(--dg-navy); color: #DCE4F5; padding: 88px 0 96px; }
.dg-hero h1 { color: #fff; max-width: 18ch; }
.dg-hero p.lead { font-size: 1.15rem; max-width: 56ch; color: #C9D4EC; }
.dg-hero::after { /* arco dorado: la flecha del isotipo */
  content: ""; position: absolute; right: -120px; bottom: -160px; width: 460px; height: 460px;
  border: 26px solid var(--dg-gold); border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent;
  transform: rotate(20deg); opacity: .9; pointer-events: none;
}
@media (max-width: 720px) { .dg-hero::after { width: 260px; height: 260px; right: -110px; bottom: -120px; border-width: 16px; } }

/* ---------- Botones ---------- */
.dg-btn {
  display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.5em; border-radius: 999px;
  font: 800 .9rem/1 var(--dg-font-display); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.dg-btn--gold { background: var(--dg-gold); color: var(--dg-navy-900); }
.dg-btn--gold:hover { color: var(--dg-navy-900); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(229,192,11,.35); }
.dg-btn--navy { background: var(--dg-navy); color: #fff; }
.dg-btn--navy:hover { color: #fff; background: var(--dg-navy-700); }
.dg-btn--ghost { border-color: currentColor; color: inherit; background: transparent; }

/* ---------- Tarjetas, KPIs, insignias ---------- */
.dg-card { background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-radius-lg); padding: 24px; box-shadow: var(--dg-shadow); }
.dg-card--accent { border-top: 5px solid var(--dg-gold); }
.dg-card h3 { margin-bottom: .35em; }
.dg-kpi { background: var(--dg-surface); border: 1px solid var(--dg-line); border-left: 5px solid var(--dg-gold); border-radius: var(--dg-radius); padding: 16px 18px; }
.dg-kpi__val { font: 900 2rem/1.1 var(--dg-font-display); color: var(--dg-heading); font-variant-numeric: tabular-nums; }
.dg-kpi__lbl { font: 700 .72rem/1.3 var(--dg-font-display); color: var(--dg-muted); text-transform: uppercase; letter-spacing: .14em; margin-top: 4px; }
.dg-badge { display: inline-block; font: 700 .7rem/1 var(--dg-font-display); letter-spacing: .1em; text-transform: uppercase; padding: .45em .8em; border-radius: 999px; background: var(--dg-gold-100); color: #5C4C00; }
.dg-badge--navy { background: var(--dg-navy); color: #fff; }

/* ---------- Llamadas / callouts ---------- */
.dg-callout { border-radius: var(--dg-radius); padding: 18px 20px; margin: 1.5em 0; background: var(--dg-navy-100); border-left: 5px solid var(--dg-navy); color: var(--dg-ink); }
.dg-callout--gold { background: var(--dg-gold-100); border-left-color: var(--dg-gold); }
.dg-callout--navy { background: var(--dg-navy); color: #E2E9F7; border-left-color: var(--dg-gold); }
.dg-callout--navy strong { color: #fff; }
.dg-callout__title { font: 800 .8rem/1.3 var(--dg-font-display); text-transform: uppercase; letter-spacing: .14em; margin-bottom: .4em; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg-callout:not(.dg-callout--navy) { background: var(--dg-surface-2); color: var(--dg-text); } }
:root[data-theme="dark"] .dg-callout:not(.dg-callout--navy) { background: var(--dg-surface-2); color: var(--dg-text); }

/* ---------- Tablas ---------- */
.dg-table-wrap { overflow-x: auto; border-radius: var(--dg-radius); border: 1px solid var(--dg-line); margin: 1.2em 0; }
.dg-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--dg-surface); }
.dg-table th { background: var(--dg-navy); color: #fff; text-align: left; font: 700 .76rem/1.3 var(--dg-font-display); text-transform: uppercase; letter-spacing: .08em; padding: 12px 14px; }
.dg-table td { padding: 11px 14px; border-top: 1px solid var(--dg-line); vertical-align: top; }
.dg-table tbody tr:nth-child(even) td { background: var(--dg-surface-2); }
.dg-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dg-table tfoot td { font-weight: 700; border-top: 2px solid var(--dg-gold); }

/* ---------- Figuras / mapas ---------- */
.dg-figure { margin: 1.6em 0; }
.dg-figure img { border-radius: var(--dg-radius); border: 1px solid var(--dg-line); display: block; }
.dg-figure figcaption { font-size: .85rem; color: var(--dg-muted); margin-top: .6em; padding-left: 12px; border-left: 3px solid var(--dg-gold); }

/* ---------- Pasos numerados ---------- */
.dg-steps { counter-reset: dgstep; list-style: none; padding: 0; margin: 1.2em 0; }
.dg-steps > li { counter-increment: dgstep; position: relative; padding: 0 0 1.1em 3.2rem; }
.dg-on-navy .dg-steps > li::before { background: var(--dg-gold); color: var(--dg-navy-900); }
.dg-steps > li::before { content: counter(dgstep); position: absolute; left: 0; top: -2px; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--dg-navy); color: var(--dg-gold); font: 800 1rem/2.2rem var(--dg-font-display); text-align: center; }

/* ---------- Pie ---------- */
.dg-footer { background: var(--dg-navy-900); color: #A9B6D3; padding: 48px 0 28px; font-size: .9rem; }
.dg-footer a { color: #fff; text-decoration: none; }
.dg-footer a:hover { color: var(--dg-gold); }
.dg-footer__brand img { height: 44px; width: auto; }
.dg-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---------- Accesibilidad ---------- */
:focus-visible { outline: 3px solid var(--dg-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }