/* campaign-infographic.css
 * Sistema de diseño reutilizable para campañas Básicas tipo infografía (M2.2).
 * Se renderiza dentro del visor de campañas; el wrapper lleva `.ludus-ig not-prose`
 * para neutralizar Tailwind Typography (.prose) e imponer su propio estilo.
 *
 * Uso en content_html:
 *   <div class="ludus-ig not-prose"> ...secciones... </div>
 *
 * Paleta (semántica por severidad temporal):
 *   --ig-navy   estructura / informativo
 *   --ig-blue   propagación
 *   --ig-orange operativo / advertencia
 *   --ig-red    detonación / decisión crítica
 *   --ig-green  acción recomendada
 */

.ludus-ig {
    --ig-navy: #1d3a66;
    --ig-navy-deep: #14294d;
    --ig-blue: #2f6fb0;
    --ig-orange: #e8772e;
    --ig-red: #c0392b;
    --ig-green: #2e9e5b;
    --ig-bg: #eef1f6;
    --ig-card: #ffffff;
    --ig-ink: #2d3a4a;
    --ig-line: #cdd6e3;

    background: var(--ig-bg);
    color: var(--ig-ink);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--ig-line);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.55;
    max-width: 820px;
    margin: 0 auto;
}

.ludus-ig * { box-sizing: border-box; }

/* ── Header ───────────────────────────────────────────────── */
.ig-header {
    background: var(--ig-navy);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 22px;
}
.ig-header__icon {
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #2a4f86;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.06);
}
.ig-header__icon svg { width: 44px; height: 44px; fill: #fff; }
.ig-title {
    margin: 0;
    font-size: 2.7rem;
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
}
.ig-subtitle {
    margin: 2px 0 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ig-orange);
    text-transform: uppercase;
    line-height: 1;
}
.ig-tagline {
    margin: 10px 0 0;
    font-style: italic;
    font-size: 1rem;
    color: #aebfd6;
}

/* ── Banda de definición ──────────────────────────────────── */
.ig-band {
    background: var(--ig-navy-deep);
    color: #fff;
    font-weight: 700;
    padding: 12px 32px;
    font-size: 1rem;
}

/* ── Cuerpo ───────────────────────────────────────────────── */
.ig-body { padding: 26px 32px 8px; }

.ig-callout {
    background: var(--ig-card);
    border-left: 5px solid var(--ig-navy);
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 26px;
    box-shadow: 0 1px 0 var(--ig-line);
}
.ig-callout strong { color: var(--ig-navy); }
.ig-callout p { margin: 0; }
.ig-callout p + p { margin-top: 6px; }

.ig-h2 {
    color: var(--ig-navy);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 30px 0 18px;
    letter-spacing: 0.3px;
}

/* ── Timeline ─────────────────────────────────────────────── */
.ig-timeline {
    position: relative;
    margin: 0 0 10px;
    padding-left: 34px;
}
.ig-timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--ig-line);
}
.ig-item { position: relative; padding: 10px 14px 16px; border-radius: 6px; margin-bottom: 6px; }
.ig-item--danger { background: #fbeaea; }
.ig-item--warn { background: #fdf1e6; }
.ig-dot {
    position: absolute;
    left: -33px;
    top: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ig-navy);
    box-shadow: 0 0 0 3px var(--ig-bg);
}
.ig-dot--blue { background: var(--ig-blue); }
.ig-dot--orange { background: var(--ig-orange); }
.ig-dot--red { background: var(--ig-red); }

.ig-item__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ig-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    background: var(--ig-navy);
}
.ig-badge--blue { background: var(--ig-blue); }
.ig-badge--orange { background: var(--ig-orange); }
.ig-badge--red { background: var(--ig-red); }
.ig-item__title { font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--ig-navy); }
.ig-item--danger .ig-item__title { color: var(--ig-red); }
.ig-item--warn .ig-item__title { color: var(--ig-orange); }
.ig-item__text { margin: 0; color: var(--ig-ink); }

/* ── Listas tipo card ─────────────────────────────────────── */
.ig-listcard {
    background: var(--ig-card);
    border: 1px solid var(--ig-line);
    border-left: 5px solid var(--ig-red);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 8px;
}
.ig-bullets { list-style: none; margin: 0; padding: 0; }
.ig-bullets li { position: relative; padding-left: 22px; margin: 8px 0; }
.ig-bullets li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ig-red);
}

/* ── Pasos numerados ──────────────────────────────────────── */
.ig-steps {
    background: #e9eef6;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 8px;
}
.ig-step { display: flex; align-items: flex-start; gap: 14px; margin: 12px 0; }
.ig-step__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ig-green);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ig-step p { margin: 0; }

/* ── Footer ───────────────────────────────────────────────── */
.ig-footer {
    background: var(--ig-navy);
    color: #fff;
    text-align: left;
    padding: 16px 32px;
    margin-top: 22px;
    font-size: 1.1rem;
}
.ig-footer strong { color: #fff; }

/* ── Dato clave (stat destacado) ──────────────────────────── */
.ig-fact {
    background: var(--ig-card);
    border-left: 5px solid var(--ig-orange);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 24px;
    font-weight: 600;
}
.ig-fact strong { color: var(--ig-orange); }

/* ── Grid de tarjetas (tipos / señales) ───────────────────── */
.ig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.ig-gcard {
    background: var(--ig-card);
    border: 1px solid var(--ig-line);
    border-top: 4px solid var(--ig-navy);
    border-radius: 8px;
    padding: 14px 16px;
}
.ig-gcard--red { border-top-color: var(--ig-red); }
.ig-gcard--orange { border-top-color: var(--ig-orange); }
.ig-gcard--blue { border-top-color: var(--ig-blue); }
.ig-gcard--green { border-top-color: var(--ig-green); }
.ig-gcard__title { font-weight: 800; color: var(--ig-navy); margin: 0 0 5px; font-size: 1.02rem; }
.ig-gcard p { margin: 0; font-size: 0.92rem; }
.ig-gcard p + p { margin-top: 6px; }
.ig-mono { font-family: monospace; background: #e3e8f0; padding: 1px 6px; border-radius: 4px; font-size: 0.86em; color: var(--ig-navy); }

/* ── Listcard variante acción/ok (verde) ──────────────────── */
.ig-listcard--ok { border-left-color: var(--ig-green); }
.ig-listcard--ok .ig-bullets li::before { background: var(--ig-green); }

/* ── Specificity guard ────────────────────────────────────────
 * El visor inyecta este HTML dentro de un contenedor `.prose`, cuya regla
 * `.prose p { color:#cbd5e1 }` (gris claro para el tema oscuro) le gana en
 * especificidad al color heredado y deja el texto ilegible. Forzamos contraste
 * con selectores de 2 clases (vencen a `.prose p`, que es 1 clase + 1 elemento). */
.ludus-ig .ig-callout p,
.ludus-ig .ig-item__text,
.ludus-ig .ig-bullets li,
.ludus-ig .ig-step p { color: var(--ig-ink); }
.ludus-ig .ig-callout strong { color: var(--ig-navy); }
.ludus-ig .ig-h2 { color: var(--ig-navy); }
.ludus-ig .ig-item__title { color: var(--ig-navy); }
.ludus-ig .ig-item--danger .ig-item__title { color: var(--ig-red); }
.ludus-ig .ig-item--warn .ig-item__title { color: var(--ig-orange); }
.ludus-ig .ig-fact { color: var(--ig-ink); }
.ludus-ig .ig-fact strong { color: var(--ig-orange); }
.ludus-ig .ig-gcard p { color: var(--ig-ink); }
.ludus-ig .ig-gcard__title { color: var(--ig-navy); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 560px) {
    .ig-header { flex-direction: column; text-align: center; gap: 14px; padding: 22px 18px; }
    .ig-title { font-size: 2.1rem; }
    .ig-subtitle { font-size: 1.3rem; }
    .ig-band, .ig-body, .ig-footer { padding-left: 18px; padding-right: 18px; }
    .ig-grid { grid-template-columns: 1fr; }
}