#opcppg-root { color-scheme: light; font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        background:#fff; color:#2b2b2b; }
#opcppg-root, #opcppg-root * { box-sizing: border-box; }
#opcppg-root { --azul:#2f5c9e; --azul-medio:#24487d; --azul-claro:#88aad5; --naranja:#e08a3c;
        --verde:#2e8b6f; --rojo:#c94f5b; --gris-fondo:#f4f6f9; --gris-borde:#e6e9ef;
        --gris-borde-control:#cfd6e0; --gris-texto:#4c4b49; --gris-suave:#8a8a8a; --gris-claro:#9aa0a6;
        --blanco:#ffffff; --fila-hover:#f7f9fc; --celeste:var(--azul-claro); --sol:var(--naranja);
        --sol-soft:#fbe9d8; --card:var(--blanco); --ink:#2b2b2b; --ok:var(--verde); --warn:var(--rojo);
        --radius:10px; }
#opcppg-root .kpi-fig,#opcppg-root .dim-fig,#opcppg-root .dim-pct,#opcppg-root .ffig,#opcppg-root .fpct,
#opcppg-root td.num,#opcppg-root tfoot td,#opcppg-root .var-cell,#opcppg-root .tag,
#opcppg-root .kpi-value,#opcppg-root .pie-title { font-variant-numeric: tabular-nums; }
#opcppg-root { font-size:14px; line-height:1.5; }
#opcppg-root .cabecera-fecha { margin-left:auto; text-align:right; font-size:12px; color:var(--gris-suave);
                    white-space:nowrap; background:#fff; padding:6px 12px; border-radius:6px; }
/* Sin max-width ni auto-centrado — el contenido ocupa todo el ancho
   disponible de su contenedor (igual que monitor_discapacidad.html), para
   convivir bien dentro del layout de WordPress. */
#opcppg-root .wrap { margin:0; }
#opcppg-root .filters { display:flex; gap:16px; padding:18px 0; align-items:flex-end; flex-wrap:wrap; }
#opcppg-root .filters label { display:block; font-size:12px; color:var(--gris-texto); font-weight:600; margin-bottom:4px; }
#opcppg-root .filters select { font-size:14px; padding:6px 10px; border-radius:6px; border:1px solid var(--gris-borde-control);
                  min-width:160px; background:#fff; font-family:inherit; color:var(--ink); }

/* ---------- Secciones ---------- */
#opcppg-root .bloque { margin:24px 0 0 0; }
#opcppg-root .bloque-head { display:flex; align-items:center; gap:10px; margin-bottom:14px;
                padding-bottom:10px; border-bottom:2px solid var(--azul); }
#opcppg-root .bloque-head h2 { font-size:16px; font-weight:700; color:var(--azul); line-height:1.3; }
#opcppg-root .card { background:#fff; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.08);
        border:1px solid var(--gris-borde); }

/* ---------- Bloque 1: KPIs NNA / GT / vs. Presupuesto / forma / organismo ---------- */
#opcppg-root .opctop-bloque { margin-bottom:24px; }
#opcppg-root .kpi-row { display:flex; gap:16px; flex-wrap:wrap; }
#opcppg-root .kpi-card { flex:1; min-width:170px; background:#fff; border-radius:10px; padding:16px;
            box-shadow:0 1px 3px rgba(0,0,0,.08); border:1px solid var(--gris-borde); }
#opcppg-root .kpi-title { font-size:13px; color:var(--gris-texto); margin-bottom:6px; }
#opcppg-root .kpi-value { font-size:20px; font-weight:700; color:var(--ink); }
#opcppg-root .kpi-sub { font-size:12px; color:var(--gris-suave); margin-top:4px; }
#opcppg-root .card-title { font-weight:600; margin-bottom:6px; color:var(--gris-texto); }
#opcppg-root .card-footnote { font-size:11.5px; color:var(--gris-suave); margin-top:10px; padding-top:10px;
                  border-top:1px solid #eef1f5; }
#opcppg-root .gt-note { font-size:12px; color:var(--gris-suave); margin-bottom:10px; }
#opcppg-root .row-pies { display:flex; gap:16px; flex-wrap:wrap; }
#opcppg-root .pie-card { flex:1; min-width:180px; }
#opcppg-root .pie-title { text-align:center; font-weight:600; margin-bottom:6px; color:var(--gris-texto); }
#opcppg-root .row { display:flex; gap:16px; padding:18px 0; flex-wrap:wrap; }
#opcppg-root .flex-1 { flex:1; min-width:340px; padding:16px; }
#opcppg-root table.tbl-organismos thead th { text-align:right; }
#opcppg-root table.tbl-organismos thead th:first-child { text-align:left; }
#opcppg-root table.tbl-organismos td.org { max-width:none; }
#opcppg-root table.tbl-organismos td.num { text-align:right; white-space:nowrap; }

/* Leyenda HTML propia de la torta "% Participación por Forma" (no la
   nativa de Plotly, que trunca nombres largos) — mismo criterio que
   Discapacidad. */
#opcppg-root .forma-legend { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
#opcppg-root .forma-legend-item { display:flex; align-items:center; gap:8px; font-size:12px; }
#opcppg-root .forma-legend-dot { width:11px; height:11px; min-width:11px; border-radius:50%; }
#opcppg-root .forma-legend-nombre { color:var(--ink); flex:1; }
#opcppg-root .forma-legend-datos { color:var(--gris-suave); white-space:nowrap; font-variant-numeric:tabular-nums; }
#opcppg-root .forma-legend-head { padding-bottom:6px; border-bottom:1px solid #eef1f5; margin-bottom:-2px; }
#opcppg-root .forma-legend-head .forma-legend-datos { color:var(--gris-texto); font-weight:600; font-size:11px;
                    text-transform:uppercase; letter-spacing:.03em; }

/* Ver nota de #opcdis-root .table-wrap en monitor_discapacidad: WordPress
   trae resets de tabla en algunos temas/plugins que pisan el scroll
   horizontal propio si no se fuerza con !important. */
#opcppg-root .tbl-scroll { overflow-x:auto !important; width:100%; max-width:100%;
                -webkit-overflow-scrolling:touch; }
#opcppg-root table { border-collapse:collapse; width:100%; min-width:100px; font-size:12px; }
/* Estilo simple de tabla genérico (tablas fuera de .detalle, ej. la de
   "por organismo" y la del modal de metas) — mismo criterio que Discapacidad. */
#opcppg-root th { background:var(--azul); color:#fff; font-weight:600; padding:6px; text-align:left; }
#opcppg-root td { padding:6px; text-align:left; border-bottom:1px solid #eef1f5; }
#opcppg-root tr.odd { background:var(--fila-hover); }

/* ---------- Bloque 2: "por dimensión" (tarjetas expandibles) ---------- */
#opcppg-root .dim-list { display:flex; flex-direction:column; gap:12px; }
/* min-width:0: por default un hijo flex no se achica más allá del ancho de
   su contenido — sin esto, la tabla ancha de adentro empuja a toda la fila
   en vez de generar su propio scroll horizontal (mismo fix que Discapacidad
   tuvo que aplicar en el WordPress productivo). */
#opcppg-root .dim-row { background:#fff; border:1px solid var(--gris-borde); border-radius:10px;
           overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); min-width:0; }
#opcppg-root .dim-main { display:grid; grid-template-columns:44px 240px 1fr 150px 150px 96px; gap:14px;
             align-items:center; padding:14px 20px; }
#opcppg-root .dim-btn { width:32px; height:32px; border-radius:6px; border:1px solid var(--gris-borde-control);
            background:var(--gris-fondo); color:var(--azul); font:700 17px 'Montserrat',sans-serif;
            cursor:pointer; display:grid; place-items:center; transition:.15s; }
#opcppg-root .dim-btn:hover { background:var(--azul); border-color:var(--azul); color:#fff; }
#opcppg-root .dim-btn[aria-expanded="true"] { background:var(--naranja); border-color:var(--naranja); color:#fff; }
#opcppg-root .dim-btn:focus-visible { outline:2px solid var(--azul-claro); outline-offset:2px; }
#opcppg-root .dim-name { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
#opcppg-root .dim-bars { display:flex; flex-direction:column; gap:4px; min-width:60px; }
#opcppg-root .dim-bars .bar { height:7px; border-radius:3px; background:var(--celeste); min-width:2px; transition:width .5s; }
#opcppg-root .dim-bars .bar.dev { background:var(--sol); }
#opcppg-root .dim-fig { font-size:13px; font-weight:500; text-align:right; color:var(--ink); }
#opcppg-root .dim-fig small { display:block; font-size:10px; color:var(--gris-texto); text-transform:uppercase;
                  letter-spacing:.5px; font-weight:600; margin-top:2px; }
#opcppg-root .dim-pct { font-size:14px; font-weight:700; text-align:right; color:var(--ok); }
#opcppg-root .dim-pct small { display:block; font-size:10px; color:var(--gris-texto); text-transform:uppercase;
                 letter-spacing:.5px; font-weight:600; margin-top:2px; }

/* ---------- Bloque 3: detalle expandible ---------- */
#opcppg-root .detalle { display:none; border-top:1px solid var(--gris-borde); }
#opcppg-root .detalle.open { display:block; }
#opcppg-root .detalle-head { background:var(--fila-hover); color:var(--azul); padding:10px 18px; font-size:13px;
                 font-weight:700; display:flex; justify-content:space-between; align-items:center;
                 gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--gris-borde); }
#opcppg-root .detalle-head .tag { font-size:11px; font-weight:600; color:var(--gris-texto); background:#fff;
                      border:1px solid var(--gris-borde-control); padding:3px 10px; border-radius:20px; }
#opcppg-root .detalle table { width:100%; border-collapse:collapse; font-size:12.5px; table-layout:fixed; }
#opcppg-root .detalle thead th { background:var(--azul); color:#fff; font-weight:600; font-size:11px;
                     text-transform:uppercase; letter-spacing:.4px; padding:8px 12px; text-align:right; }
#opcppg-root .detalle thead th:nth-child(-n+4) { text-align:left; }
/* Anchos fijos por columna (con table-layout:fixed) para que las 9
   columnas entren siempre en el ancho de la tarjeta, sin scroll
   horizontal — el texto largo (organismo/programa/actividad) envuelve en
   varias líneas en vez de forzar el ancho de la tabla. */
#opcppg-root .detalle thead th:nth-child(1) { width:14%; }
#opcppg-root .detalle thead th:nth-child(2) { width:16%; }
#opcppg-root .detalle thead th:nth-child(3) { width:16%; }
#opcppg-root .detalle thead th:nth-child(4) { width:8%; }
#opcppg-root .detalle thead th:nth-child(5),
#opcppg-root .detalle thead th:nth-child(6),
#opcppg-root .detalle thead th:nth-child(7) { width:10%; }
#opcppg-root .detalle thead th:nth-child(8),
#opcppg-root .detalle thead th:nth-child(9) { width:8%; }
#opcppg-root .detalle tbody td { padding:8px 12px; border-bottom:1px solid var(--gris-borde);
                     vertical-align:top; overflow-wrap:break-word; }
#opcppg-root .detalle tbody td.num { text-align:right; }
#opcppg-root .detalle tbody tr:hover { background:var(--fila-hover); }
#opcppg-root .detalle td.org { font-weight:600; color:var(--azul); }
#opcppg-root .detalle tfoot td { padding:9px 12px; font-weight:700; background:var(--fila-hover); border-top:2px solid var(--gris-borde); }
#opcppg-root .detalle tfoot td.num { text-align:right; white-space:nowrap; }
/* "% de Ejecución" y "Var. %" comparten el mismo estilo simple de texto
   plano (sin recuadro resaltado, sin semáforo de color, sea cual sea el
   valor) — mismo criterio que Niñez/Discapacidad. */
#opcppg-root .var-cell { font-weight:600; color:var(--ink); }
#opcppg-root .metas-btn { border:1px solid var(--gris-borde-control); background:#fff; color:var(--azul);
             border-radius:6px; font:600 11px 'Montserrat',sans-serif; padding:5px 10px; cursor:pointer;
             white-space:nowrap; transition:.15s; }
#opcppg-root .metas-btn:hover { background:var(--azul); border-color:var(--azul); color:#fff; }
#opcppg-root .metas-none { font-size:11px; color:var(--gris-claro); }

/* ---------- Modal de metas ---------- */
#opcppg-root .modal-bg { position:fixed; inset:0; background:rgba(20,30,45,.55); display:none;
            align-items:center; justify-content:center; padding:20px; z-index:1000; }
#opcppg-root .modal-bg.open { display:flex; }
#opcppg-root .modal { background:#fff; border-radius:10px; max-width:min(1400px, 95vw); width:100%; max-height:86vh;
         display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
#opcppg-root .modal-head { background:var(--azul); color:#fff; padding:14px 20px; display:flex;
              justify-content:space-between; gap:14px; align-items:flex-start; }
#opcppg-root .modal-head h3 { font-size:15px; font-weight:700; margin:0; color:#fff; line-height:1.3; }
#opcppg-root .modal-head .sub { font-size:12px; color:rgba(255,255,255,.75); margin-top:3px; }
#opcppg-root .modal-close { border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.15); color:#fff;
               width:28px; height:28px; border-radius:6px; font-size:13px; cursor:pointer; flex:none; }
#opcppg-root .modal-close:hover { background:rgba(255,255,255,.3); }
#opcppg-root .modal-body { overflow:auto; padding:0; }
#opcppg-root .modal-body table { width:100%; font-size:12.5px; table-layout:auto; }
#opcppg-root .modal-body td, #opcppg-root .modal-body th { white-space:nowrap; }
#opcppg-root .modal-footnote { font-size:11.5px; color:var(--gris-suave); padding:10px 14px;
                   border-top:1px solid var(--gris-borde); }

/* ---------- Nota metodológica ---------- */
#opcppg-root .footer { padding:0 0 30px 0; font-size:12px; color:var(--gris-claro); line-height:1.6; }
#opcppg-root .footer a { color:var(--azul); text-decoration:none; }
#opcppg-root .footer a:hover { text-decoration:underline; }

@media (max-width:980px) {
  #opcppg-root .kpi-row { flex-direction:column; }
  #opcppg-root .dim-main { grid-template-columns:44px 1fr 96px; grid-auto-rows:auto; }
  #opcppg-root .dim-bars, #opcppg-root .dim-fig { display:none; }
}
@media (prefers-reduced-motion:reduce) { #opcppg-root * { transition:none !important; } }