/* Overrides propios sobre el CSS de klipea (dashboard.css).
   Se mantiene dashboard.css intacto; acá van sólo nuestros ajustes. */

/* La grilla de mini-charts de Evolución usaba minmax(380px, 1fr), que fuerza
   una columna mínima de 380px y desborda horizontalmente en celulares angostos
   (<380px de viewport). min(340px, 100%) hace que la columna nunca supere el
   ancho disponible: en desktop sigue armando 3 columnas, en mobile colapsa a 1. */
.cg-chart-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* URLs largas en la lista de Fuentes (ej. la del serie_ron CSV) son strings sin
   puntos de corte y desbordaban horizontalmente en mobile. Que rompan en
   cualquier punto. */
.cg-sources li { overflow-wrap: anywhere; }

/* ── Navegación: estado activo del tab ──────────────────────────── */
.cg-nav-links a.active { color: var(--teal); font-weight: 800; }

/* ── Overview: grilla de 5 cards (una por cinturón) ──────────────── */
/* 3 columnas en desktop (las cards quedan 3+2): las filas de indicador
   (nombre + sparkline 60px + valor mono) necesitan ~300px de ancho —
   con 5 columnas se superponen. NO subir a 4+ columnas. */
.cg-grid--4 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .cg-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cg-grid--4 { grid-template-columns: 1fr; } }

/* Card y elementos del 5º cinturón (slug "espiritu", color institucional humor) */
.cg-cint--espiritu { border-top-color: var(--c-humor); }

/* Título de card clickeable hacia la página de detalle */
.cg-cint-link { color: var(--dark); text-decoration: none; }
.cg-cint-link:hover { color: var(--teal); text-decoration: none; }

/* Foot de la card: score a la izquierda, "ver detalle" a la derecha */
.cg-cint-foot { justify-content: space-between; }
.cg-cint-ver { margin-left: auto; color: var(--teal); font-weight: 700; white-space: nowrap; }
.cg-cint-ver:hover { text-decoration: underline; }

/* ── Página de detalle por cinturón ─────────────────────────────── */
.cg-detalle-hero { position: relative; padding: 44px 24px 30px; border-bottom: 1px solid var(--bd-soft); }
.cg-detalle-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--muted); }
.cg-detalle-hero--macro::before    { background: var(--c-macro); }
.cg-detalle-hero--politica::before { background: var(--c-politica); }
.cg-detalle-hero--vida::before     { background: var(--c-vida); }
.cg-detalle-hero--gestion::before  { background: var(--c-gestion); }
.cg-detalle-hero--espiritu::before { background: var(--c-humor); }
.cg-detalle-inner { max-width: 1280px; margin: 0 auto; text-align: left; }
.cg-detalle-hero .cg-eyebrow a { color: var(--muted); }
.cg-detalle-hero .cg-eyebrow a:hover { color: var(--teal); text-decoration: none; }
.cg-detalle-title { font-size: clamp(32px, 5vw, 52px); margin: 4px 0 8px; }
.cg-detalle-lead { margin: 0 0 18px; max-width: 720px; }
.cg-detalle-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cg-detalle-chip {
    font-size: 13px; color: var(--muted);
    background: var(--paper); border: 1px solid var(--bd);
    border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow-card);
}
.cg-detalle-chip strong { color: var(--dark); font-weight: 700; }
.cg-detalle-card { max-width: 760px; }

/* ── Tiles de indicador (páginas de detalle) ────────────────────── */
.cg-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 14px;
}
.cg-tile {
    display: flex; flex-direction: column; gap: 7px;
    background: var(--paper); border: 1px solid var(--bd);
    border-top: 3px solid var(--muted);
    border-radius: var(--radius-card); padding: 16px 18px;
    box-shadow: var(--shadow-card);
    cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cg-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.cg-tile--macro    { border-top-color: var(--c-macro); }
.cg-tile--politica { border-top-color: var(--c-politica); }
.cg-tile--vida     { border-top-color: var(--c-vida); }
.cg-tile--gestion  { border-top-color: var(--c-gestion); }
.cg-tile--espiritu { border-top-color: var(--c-humor); }
.cg-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cg-tile-name { font-size: 13.5px; font-weight: 800; color: var(--dark); line-height: 1.25; }
.cg-tile-badge {
    flex-shrink: 0; font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--bd);
    white-space: nowrap;
}
.cg-tile-badge.auto   { background: var(--verde-soft);    color: #14532D; border-color: #BBF7D0; }
.cg-tile-badge.manual { background: var(--amarillo-soft); color: #713F12; border-color: #FDE68A; }
.cg-tile-badge.estim  { background: var(--bg-page);       color: var(--muted); }
.cg-tile-desc { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.cg-tile-value { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.cg-tile-num { font-family: 'JetBrains Mono', monospace; font-size: 23px; font-weight: 700; color: var(--dark); line-height: 1; }
.cg-tile-unit { font-size: 12px; color: var(--muted); font-weight: 500; }
.cg-tile-micro { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-soft); margin-left: auto; }
.cg-tile-vis { margin-top: auto; padding-top: 6px; }
.cg-tile-vis svg { display: block; }
.cg-bar { height: 8px; background: var(--bd-soft); border-radius: 999px; overflow: hidden; }
.cg-bar-fill { height: 100%; border-radius: 999px; background: var(--muted); min-width: 2px; }
.cg-tile-vis--macro    .cg-bar-fill { background: var(--c-macro); }
.cg-tile-vis--politica .cg-bar-fill { background: var(--c-politica); }
.cg-tile-vis--vida     .cg-bar-fill { background: var(--c-vida); }
.cg-tile-vis--gestion  .cg-bar-fill { background: var(--c-gestion); }
.cg-tile-vis--espiritu .cg-bar-fill { background: var(--c-humor); }

/* ── Página macro: dimensiones del ITCM ─────────────────────────── */
.cg-itcm-dims {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 14px;
}
.cg-itcm-dim {
    background: var(--paper); border: 1px solid var(--bd);
    border-top: 3px solid var(--c-macro);
    border-radius: var(--radius-card); padding: 14px 16px;
    box-shadow: var(--shadow-card);
}
.cg-itcm-dim-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
}
.cg-itcm-dim-name { font-size: 13px; font-weight: 800; color: var(--dark); line-height: 1.3; }
.cg-itcm-dim-val { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cg-itcm-dim-val strong {
    font-family: 'JetBrains Mono', monospace; font-size: 18px;
    color: var(--dark); font-weight: 700;
}
.cg-itcm-dim .cg-bar-fill { background: var(--c-macro); }

/* ── Nota metodológica al pie de la página de cinturón ──────────── */
.cg-nota-met p {
    margin: 0; max-width: 860px;
    font-size: 12.5px; line-height: 1.6; color: var(--muted);
    border-top: 1px dashed var(--bd); padding-top: 14px;
}
.cg-nota-met strong { color: var(--dark); }

/* ── Modal de indicador: qué es + qué aporta + ficha + serie ────── */
.cg-modal-desc { font-size: 15px; line-height: 1.6; color: var(--dark); margin: 8px 0 14px; }
.cg-modal-aporta {
    background: var(--teal-soft); border-left: 3px solid var(--teal);
    border-radius: 6px; padding: 12px 16px;
    font-size: 13.5px; line-height: 1.55; color: var(--dark); margin: 0 0 18px;
}
.cg-modal-ficha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin: 0 0 20px;
}
@media (max-width: 560px) { .cg-modal-ficha { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px) { .cg-modal-ficha { grid-template-columns: 1fr; } }
.cg-modal-ficha > div {
    background: var(--bg-page); border: 1px solid var(--bd);
    border-radius: 10px; padding: 10px 14px;
}
.cg-modal-ficha dt {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); margin: 0 0 3px;
}
.cg-modal-ficha dd { margin: 0; font-size: 13px; color: var(--dark); font-weight: 700; overflow-wrap: anywhere; }
.cg-modal-h4 {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted); margin: 4px 0 6px;
}

/* ── Modal: cómo incide en el score (transparencia del scoring) ──── */
.cg-modal-score {
    background: var(--bg-page); border: 1px solid var(--bd);
    border-radius: 10px; padding: 14px 16px; margin: 0 0 20px;
}
.cg-modal-score .cg-modal-h4 { margin-top: 0; }
.cg-score-row { display: flex; align-items: center; gap: 14px; }
.cg-score-val {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 28px; color: var(--dark); line-height: 1; flex-shrink: 0;
}
.cg-score-val span { font-size: 14px; color: var(--muted); font-weight: 500; }
.cg-score-track {
    position: relative; flex: 1; height: 10px;
    background: var(--bd-soft); border-radius: 999px; overflow: hidden;
}
.cg-score-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #16A34A 0%, #EAB308 50%, #DC2626 100%);
    min-width: 3px;
}
.cg-score-c0, .cg-score-c10 {
    position: absolute; top: 13px; font-size: 9px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted-soft); white-space: nowrap;
}
.cg-score-c0 { left: 0; } .cg-score-c10 { right: 0; }
.cg-score-map { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dark); }
.cg-score-map strong { color: var(--muted); }
.cg-score-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.cg-score-note strong { color: var(--dark); }

/* ════════════════════════════════════════════════════════════════
   MODO EMBEBIDO — informe dentro de un iframe (ej. cigob.org / Wix)
   El header + footer de CiGob los provee el sitio contenedor, así que
   ocultamos la cromática propia redundante (logo, footer institucional)
   y dejamos el informe como contenido limpio: sub-nav + cuerpo +
   atribución mínima. La clase `embedded` la setea el script inline de
   Layout.astro cuando window.self !== window.top.
   ════════════════════════════════════════════════════════════════ */

/* Nav: fuera el logo CiGob (ya está en el header de Wix). Queda el
   título como rótulo de sección + la sub-navegación (Macro/Política/…). */
.embedded .cg-nav-logo { display: none; }
.embedded .cg-nav-sub  { display: none; }

/* Footer: fuera el bloque institucional (duplica el footer de CiGob);
   conservamos sólo la línea legal/fecha como atribución mínima. */
.embedded .cg-foot       { margin-top: 40px; padding: 18px 24px; }
.embedded .cg-foot-inner { display: none; }
.embedded .cg-foot-legal { margin-top: 0; }