/* assets/css/common.css
   Hoja de estilos común para index.html, pagina1.html y pagina2.html
   Versión: 1
*/

:root{
  /* tokens base (tema oscuro tipo pagina1/pagina2) */
  --bg:#0b1220;
  --card:#111a2b;
  --ink:#e8eefc;
  --muted:#9bb0d1;
  --link:#93c5fd;
  --border:#1f2a44;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --pill:#0f1b31;

  --warn:#ffdd8a; --warnbg:#1e1604;
  --danger:#ffb3b3; --dangerbg:#1a0c0c;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* Contenedor común */
.wrap, main.wrap, .container{max-width:1100px;margin:0 auto;padding:20px}
@media (max-width:560px){ .wrap, main.wrap, .container{padding:16px} }

/* Header + nav (común) */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(6px);
  background:linear-gradient(180deg,rgba(11,18,32,.9),rgba(11,18,32,.6));
  border-bottom:1px solid var(--border);
}
nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
nav a{padding:8px 12px;border-radius:999px;border:1px solid transparent}
nav a[aria-current="page"]{border-color:var(--border);background:rgba(255,255,255,.03)}

/* Títulos / textos */
h1,h2,h3{line-height:1.25;margin:0 0 .6em}
.small{font-size:14px;color:var(--muted)}
.meta{color:var(--muted)}

/* Componentes comunes (cards / pills) */
.cards{display:grid;gap:18px;margin:24px 0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--pill);
  font-size:14px;
}
.pill.warn{border-color:#614e16;background:var(--warnbg);color:var(--warn)}
.pill.danger{border-color:#5a1a1a;background:var(--dangerbg);color:var(--danger)}

/* Tabla (si se usa) */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;background:var(--card)}
thead th{
  position:sticky;top:0;background:#0e1729;color:var(--muted);
  text-align:left;font-weight:600;padding:12px;border-bottom:1px solid var(--border)
}
tbody td{padding:14px;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:hover{background:#0f1b31}

/* ===== Utilidades mínimas (pagina2) ===== */
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
}
.mt-0{margin-top:0}
.mt-1{margin-top:12px}
.mb-1{margin-bottom:12px}
.mb-3{margin-bottom:24px}

/* KPI (pagina2) */
.kpi{display:flex;align-items:center;gap:10px}
.kpi .value{font-size:22px;font-weight:700}

/* Iframes */
iframe{width:100%;height:560px;border:0}
@media (max-width:720px){ iframe{height:420px} }

/* ===== Herramientas (pagina1) ===== */
.tools{margin-top:36px}
.tools h2{font-size:22px;margin:0 0 12px}
.tool-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tool{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px
}
.tool a.block{
  display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);
  background:#0f1b31;transition:transform .08s ease
}
.tool a.block:hover{transform:translateY(-2px)}
.tool img{display:block;width:100%;height:auto}
.tool .t-title{margin:10px 0 6px;font-weight:600}
.tool .t-desc{margin:0;color:var(--muted);font-size:14px}

/* ===== Footer común ===== */
.site-footer{margin:40px auto 12px;max-width:1100px;padding:0 20px;color:var(--muted)}
.footer-line{margin:0}
.footer-line--secondary{margin:0 auto 60px;max-width:1100px;padding:0 20px;color:var(--muted)}
.sep{opacity:.75}

/* ===== Tema HOME (index) ===== */
body.home{
  --bg:#111;
  --card:#1a1a1a;
  --ink:#f5f5f5;
  --muted:#9aa7bd;
  --link:#93c5fd;
  --border:rgba(255,255,255,.12);
  --shadow:0 2px 10px rgba(0,0,0,.55);
  --radius:14px;
  --pill:#0f1b31;
}
body.home{ text-align:center; }
body.home header{ position:static; backdrop-filter:none; background:transparent; border-bottom:none; padding:20px 0 10px; }
body.home header img{ max-width:260px; height:auto; margin:0 auto; }

/* Botonera 3x2 en escritorio */
body.home main.grid{
  max-width:1000px;
  margin:10px auto 40px;
  padding:10px 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
body.home .btn{
  display:block;
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
  outline:none;
}
body.home .btn:hover,
body.home .btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}
body.home .btn img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:3/4;
  object-fit:contain;
  margin:0 auto;
}
@media (max-width:900px){ body.home main.grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ body.home main.grid{ grid-template-columns:1fr; } }
/* =========================
   PAGE 3 – ¿Por qué?
========================= */
body.page3 {
  background:#0b1220;
  color:#e6eef9;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.page3 .lead {
  font-size:1.1rem;
  background:#234;
  padding:1rem;
  border-radius:12px;
}

.page3 .kpis {
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* =========================
   PAGE 4 – ¿Qué debe hacer el mundo?
========================= */
body.page4 {
  --bg:#0f172a;
  --panel:#111827;
  --text:#e5e7eb;
  background:var(--bg);
  color:var(--text);
}

.page4 section {
  background:var(--panel);
  border-radius:14px;
  padding:18px;
}

/* =========================
   PAGE 5 – ¿Qué puedo hacer yo?
========================= */
body.page5 {
  background:radial-gradient(1200px 800px at 10% -10%,#1a2249 0%,#0b1020 55%);
  color:#f5f7ff;
}

.page5 .card {
  background:linear-gradient(180deg,#0f1736,#0c132b);
  border-radius:16px;
}

/* =========================
   PAGE 6 – ¿Cómo nos engañan?
========================= */
body.page6 {
  background:#0b1220;
  color:#eaf1ff;
}

.page6 .card {
  background:#111a2b;
  border-radius:14px;
}
/* =========================
   PAGE 4 – ¿Qué debe hacer el mundo?
========================= */

    :root{
      --bg:#0f172a; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af;
      --link:#38bdf8; --border:#1f2937; --ok:#86efac; --mid:#fbbf24;
    }
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;}
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}
    header{padding:28px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0b1220 0%, rgba(11,18,32,0) 100%)}
    .wrap{max-width:1100px;margin:0 auto;padding:16px}
    h1{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 6px 0}
    h2{margin:0 0 12px 0;font-size:1.25rem}
    h3{margin:18px 0 8px 0;font-size:1.05rem;color:#d1d5db}
    .subtitle{color:var(--muted);margin-top:4px}
    section{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px;margin:18px 0}
    table{width:100%;border-collapse:collapse;font-size:0.95rem}
    th,td{border-bottom:1px solid var(--border);padding:10px 8px;vertical-align:top;text-align:left}
    th{color:#cbd5e1}
    .status{display:inline-block;padding:4px 8px;border-radius:8px;font-size:0.85rem;border:1px solid var(--border)}
    .ok{background:rgba(34,197,94,.15);color:var(--ok)}
    .mid{background:rgba(245,158,11,.15);color:var(--mid)}
    .btn{
      display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--border);
      color:var(--text);text-decoration:none;background:#0c1424;transition:transform .02s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .note{color:var(--muted);font-size:0.95rem}
    footer{color:var(--muted);padding:30px 18px;border-top:1px solid var(--border)}
    :root{
      --bg:#0b1020;           /* fondo oscuro, cómodo para noche */
      --card:#121939;         /* tarjetas */
      --muted:#9db3ff;        /* textos secundarios */
      --text:#f5f7ff;         /* texto principal */
      --accent:#4ade80;       /* verde acción */
      --accent-2:#22d3ee;     /* cian suave */
      --warning:#f59e0b;      /* calor/incendios */
      --danger:#ef4444;       /* peligro */
      --ok:#10b981;           /* ok */
      --link:#93c5fd;         /* enlaces */
      --shadow:0 8px 30px rgba(0,0,0,.35)
    }
    *{box-sizing:border-box}
    body{margin:0;background:radial-gradient(1200px 800px at 10% -10%,#1a2249 0%,#0b1020 55%), var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial}
    a{color:var(--link)}
    .wrap{max-width:1100px;margin:0 auto;padding:24px}
    header{position:sticky;top:0;background:rgba(11,16,32,.7);backdrop-filter:blur(6px);border-bottom:1px solid #23306d;z-index:50}
    nav{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
    nav .brand{display:flex;gap:10px;align-items:center}
    .brand .logo{width:36px;height:36px;border-radius:50%;background:conic-gradient(from 220deg,#4ade80,#22d3ee,#93c5fd,#4ade80);box-shadow:0 0 0 3px #0b1020,0 0 20px rgba(147,197,253,.3)}
    nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
    nav a:hover{background:#1a244f}
    .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;padding:30px 0}
    .hero-card{background:linear-gradient(180deg,#121939,rgba(18,25,57,.6));border:1px solid #24306d;border-radius:16px;padding:26px;box-shadow:var(--shadow)}
    .kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}
    h1{font-weight:800;line-height:1.15;margin:.2rem 0 1rem;font-size:clamp(28px,3.2vw,42px)}
    .lead{font-size:1.1rem;color:#e9ecff}
    .motivos{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .chip{display:inline-flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid #2a387a;background:#0f1736;border-radius:999px;cursor:pointer;user-select:none}
    .chip[aria-pressed="true"]{outline:2px solid var(--accent);background:#0d1a2e}
    .metric{font-variant-numeric:tabular-nums}

    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
    .card{background:linear-gradient(180deg,#0f1736,#0c132b);border:1px solid #24306d;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
    .card h3{margin:6px 0 8px}
    .tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;border:1px solid #3350b7;color:#cfe0ff;background:#0b1538}
    .tag.high{border-color:#1f8a4c;color:#b8f5d3}
    .tag.med{border-color:#b3861f;color:#ffe2b3}
    .tag.low{border-color:#5b5b5b;color:#d6d6d6}
    .btn{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid #2a387a;background:#0f1736;color:var(--text);cursor:pointer;text-decoration:none}
    .btn:hover{background:#162155}
    .btn.primary{background:linear-gradient(180deg,#1b6f44,#165938);border-color:#1f8a4c}
    .btn.warn{background:linear-gradient(180deg,#8a5a1f,#744b1a);border-color:#b3861f}

    details{border:1px dashed #2a387a;border-radius:12px;padding:10px;margin-top:10px}
    details[open]{background:#0f1736}

    section{scroll-margin-top:68px;padding:28px 0}
    .section-title{display:flex;align-items:baseline;gap:12px;margin:0 0 12px 0}
    .section-title h2{margin:0;font-size:clamp(22px,2.2vw,30px)}
    .muted{color:var(--muted)}

    .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
    .checklist li{margin:8px 0}
    .ok{color:var(--ok)}
    .warn{color:var(--warning)}
    .danger{color:var(--danger)}

    .plan{position:sticky;top:78px}
    .plan-box{background:linear-gradient(180deg,#0c142b,#0a1126);border:1px solid #24306d;border-radius:16px;padding:16px}
    .plan-box h3{margin:8px 0}
    .pill{display:inline-flex;align-items:center;gap:8px;background:#0f1736;border:1px solid #2a387a;border-radius:999px;padding:8px 12px;margin:6px 6px 0 0}

    .stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
    .story{background:linear-gradient(180deg,#10183a,#0b132d);border:1px solid #24306d;border-radius:16px;padding:16px}
    blockquote{margin:8px 0;padding:0 12px;border-left:3px solid #3350b7;color:#e6ebff}

    footer{margin-top:24px;border-top:1px solid #1d2753;padding:18px 0;color:#b7c6ff}

    @media (max-width:860px){.hero{grid-template-columns:1fr}}

    /* Estilos mínimos (dejamos la homogeneización para el cierre de la V1) */
    :root {
      --bg: #0b1220;
      --card: #111a2b;
      --muted: #a8b3c7;
      --text: #eaf1ff;
      --accent: #63e;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5
    }

    a {
      color: #9bd;
    }

    header {
      padding: 24px 16px;
      border-bottom: 1px solid #23324f;
      background: linear-gradient(180deg, #0d172a, #0b1220)
    }

    header h1 {
      margin: 0 0 6px 0;
      font-size: clamp(22px, 4vw, 34px)
    }

    header p {
      margin: 0;
      color: var(--muted)
    }

    main {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px 16px
    }

    .grid {
      display: grid;
      gap: 16px
    }

    .cols-2 {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
    }

    .card {
      background: var(--card);
      border: 1px solid #23324f;
      border-radius: 14px;
      padding: 16px
    }

    h2 {
      margin-top: 28px
    }

    h3 {
      margin-top: 20px
    }

    .tag {
      display: inline-block;
      padding: 2px 8px;
      border: 1px solid #2c3a5a;
      border-radius: 999px;
      color: #cdd5e6;
      font-size: 12px
    }

    details {
      background: #101a2b;
      border: 1px solid #24324f;
      border-radius: 12px;
      padding: 10px 14px
    }

    details+details {
      margin-top: 10px
    }

    summary {
      cursor: pointer;
      font-weight: 600
    }

    .iframe-card iframe {
      width: 100%;
      height: 460px;
      border: 0;
      border-radius: 10px;
      background: #0a1020
    }

    .foot {
      margin-top: 28px;
      font-size: 14px;
      color: #9fb0c8
    }

    .pill {
      display: inline-block;
      padding: 6px 10px;
      border: 1px solid #2c3a5a;
      border-radius: 10px;
      margin-right: 8px;
      margin-top: 6px
    }

    .muted {
      color: var(--muted)
    }

    .list-check li {
      margin: 6px 0
    }

    .warn {
      background: #22111b;
      border: 1px solid #7a1d40
    }