/* Chrome compartido de informes.gestionporte.com
   Cada informe trae su propio style.css con su identidad visual.
   Acá solo va lo común: barra superior, pie y el índice. */

:root {
  --ig-ground: #eef0f4;
  --ig-surface: #ffffff;
  --ig-fg: #14161b;
  --ig-fg-2: #4a4f5d;
  --ig-fg-3: #767b8a;
  --ig-line: #d4d8e2;
  --ig-accent: #33489c;
  --ig-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ig-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ig-ground: #0f1014;
    --ig-surface: #171a21;
    --ig-fg: #e5e8ef;
    --ig-fg-2: #a4a9b8;
    --ig-fg-3: #7b8090;
    --ig-line: #2a2e3a;
    --ig-accent: #8b93ec;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ig-ground: #0f1014;
  --ig-surface: #171a21;
  --ig-fg: #e5e8ef;
  --ig-fg-2: #a4a9b8;
  --ig-fg-3: #7b8090;
  --ig-line: #2a2e3a;
  --ig-accent: #8b93ec;
  color-scheme: dark;
}

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.ig-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 10px 22px 0;
  font-family: var(--ig-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ig-back { color: var(--ig-fg-3); text-decoration: none; }
.ig-back:hover { color: var(--ig-accent); }
.ig-date { margin-left: auto; color: var(--ig-fg-3); }

.ig-foot {
  max-width: 1220px;
  margin: 0 auto;
  padding: 30px 22px 50px;
  border-top: 1px solid var(--ig-line);
  color: var(--ig-fg-3);
  font-family: var(--ig-mono);
  font-size: 11.5px;
  line-height: 1.7;
}

.ig-foot p { margin: 0; }

/* ── Índice ── */
.ig-index {
  margin: 0;
  background: var(--ig-ground);
  color: var(--ig-fg);
  font-family: var(--ig-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ig-shell { max-width: 900px; margin: 0 auto; padding: 0 22px 80px; }

.ig-head { padding: 64px 0 40px; border-bottom: 1px solid var(--ig-line); }

.ig-head .ig-kicker {
  font-family: var(--ig-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ig-fg-3);
  margin: 0 0 18px;
}

.ig-head h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.ig-head p {
  margin: 18px 0 0;
  max-width: 58ch;
  color: var(--ig-fg-2);
  font-size: 17px;
}

.ig-list { display: grid; gap: 14px; padding: 34px 0 0; }

.ig-card {
  display: block;
  background: var(--ig-surface);
  border: 1px solid var(--ig-line);
  border-radius: 10px;
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}

.ig-card:hover { border-color: var(--ig-accent); transform: translateY(-1px); }
.ig-card:focus-visible { outline: 2px solid var(--ig-accent); outline-offset: 3px; }

.ig-card .ig-meta {
  font-family: var(--ig-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ig-fg-3);
}

.ig-card h2 {
  margin: 9px 0 8px;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.ig-card p { margin: 0; color: var(--ig-fg-2); font-size: 15px; }

.ig-card .ig-go {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--ig-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ig-accent);
}

.ig-note {
  margin-top: 34px;
  color: var(--ig-fg-3);
  font-family: var(--ig-mono);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .ig-shell { padding-left: 16px; padding-right: 16px; }
  .ig-bar { padding-left: 16px; padding-right: 16px; }
  .ig-head { padding-top: 42px; }
}