#opcdis-root { color-scheme: light; font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
        background:#fff; color:#2b2b2b; }
#opcdis-root, #opcdis-root * { box-sizing: border-box; }
#opcdis-root .cabecera-fecha { margin-left:auto; text-align:right; font-size:12px; color:#8a8a8a;
                    white-space:nowrap; background:#fff; padding:6px 12px; border-radius:6px; }
/* 2026-07-31 (pedido del usuario): sin max-width ni auto-centrado — el
   contenido ocupa todo el ancho disponible de su contenedor (antes
   quedaba centrado con un margen en blanco a los costados en pantallas
   anchas, ej. abriendo el .html suelto en el navegador). */
#opcdis-root .wrap { margin:0; }
#opcdis-root .filters { display:flex; gap:16px; padding:18px 0; align-items:flex-end; flex-wrap:wrap; }
#opcdis-root .filters label { display:block; font-size:12px; color:#4c4b49; font-weight:600; margin-bottom:4px; }
#opcdis-root .filters select { font-size:14px; padding:6px 10px; border-radius:6px; border:1px solid #cfd6e0;
                  min-width:160px; background:#fff; font-family:inherit; }
#opcdis-root .section-sub { padding: 0; font-size:12px; color:#8a8a8a; margin-bottom:10px; }
#opcdis-root .kpi-row { display:flex; gap:16px; padding:0; flex-wrap:wrap; }
#opcdis-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 #e6e9ef; }
#opcdis-root .kpi-title { font-size:13px; color:#4c4b49; margin-bottom:6px; }
#opcdis-root .kpi-value { font-size:20px; font-weight:700; }
#opcdis-root .kpi-sub { font-size:12px; color:#8a8a8a; margin-top:4px; }
#opcdis-root .row { display:flex; gap:16px; padding:18px 0; flex-wrap:wrap; }
#opcdis-root .card { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.08);
        border:1px solid #e6e9ef; margin:0 0 18px 0; }
#opcdis-root .row .card { margin:0; }
#opcdis-root .flex-1 { flex:1; min-width:340px; }
#opcdis-root .card-title { font-weight:600; margin-bottom:6px; color:#2f5c9e; }
#opcdis-root .card-sub { font-size:12px; color:#8a8a8a; margin-bottom:10px; }
#opcdis-root .card-footnote { font-size:11.5px; color:#8a8a8a; margin-top:10px; padding-top:10px;
                  border-top:1px solid #eef1f5; }
/* !important acá porque este HTML se inserta dentro de una página de
   WordPress que no controlamos — varios temas/plugins traen resets de
   tabla (ej. "table { width:100% }" a nivel de tema) que pisaban esto en
   producción y dejaban la tabla ancha (Organismo/Programa/Actividad/
   Metas/montos/% Ejec./Var.%) cortada en vez de con scroll horizontal
   propio (2026-07-29, reportado por el usuario en el WordPress
   productivo). `-webkit-overflow-scrolling:touch` para que el scroll
   horizontal ande bien en Safari/iOS. */
#opcdis-root .table-wrap { overflow-x:auto !important; width:100%; max-width:100%;
                -webkit-overflow-scrolling:touch; }
#opcdis-root table { border-collapse:collapse; width:100%; min-width:100px; font-size:12px; }
#opcdis-root th { background:#2f5c9e; color:#fff; font-weight:600; padding:6px; text-align:left; }
#opcdis-root td { padding:6px; text-align:left; border-bottom:1px solid #eef1f5; }
#opcdis-root tr.odd { background:#f7f9fc; }
#opcdis-root .footer { padding:0 0 30px 0; font-size:12px; color:#9aa0a6; }
#opcdis-root .footer a { color:#2f5c9e; text-decoration:none; }
#opcdis-root .footer a:hover { text-decoration:underline; }
#opcdis-root .pager { display:flex; align-items:center; gap:12px; justify-content:flex-end;
         padding:8px 0 0 0; }
#opcdis-root .pager button { font-size:12px; padding:5px 10px; border-radius:6px; border:1px solid #cfd6e0;
                background:#fff; cursor:pointer; color:#2f5c9e; font-family:inherit; }
#opcdis-root .pager button:hover { background:#f4f6f9; }
#opcdis-root .pager-label { font-size:12px; color:#4c4b49; }
#opcdis-root .metas-btn { border:1px solid #cfd6e0; background:#fff; color:#2f5c9e; border-radius:6px;
             font:600 11px inherit; padding:5px 10px; cursor:pointer; white-space:nowrap; }
#opcdis-root .metas-btn:hover { background:#2f5c9e; border-color:#2f5c9e; color:#fff; }
#opcdis-root .metas-none { font-size:11px; color:#9aa0a6; }
#opcdis-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; }
#opcdis-root .modal-bg.open { display:flex; }
#opcdis-root .modal { background:#fff; border-radius:10px; max-width:900px; width:100%; max-height:86vh;
         display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
#opcdis-root .modal-head { background:#2f5c9e; color:#fff; padding:14px 20px; display:flex;
              justify-content:space-between; gap:14px; align-items:flex-start; }
#opcdis-root .modal-head h3 { font-size:15px; font-weight:700; margin:0; color: #fff;}
#opcdis-root .modal-head .sub { font-size:12px; color:rgba(255,255,255,.75); margin-top:3px; }
#opcdis-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; }
#opcdis-root .modal-close:hover { background:rgba(255,255,255,.3); }
#opcdis-root .modal-body { overflow:auto; padding:0; }

/* ---------- "Gasto en discapacidad por dimensión" / "... según forma de
   implementación" — estilo tomado de monitor_ninez_nnya_estilo_opc.html.
   Colores hardcodeados (deben coincidir con AZUL/AZUL_CLARO/GRIS/VERDE/
   NARANJA/ROJO/TEXTO de theme.py) porque este bloque CSS es un string
   estático, igual que el resto de #opcdis-root más arriba. */
#opcdis-root .opcdim-bloque { margin:24px 0 0 0; }
#opcdis-root .opcdim-head { display:flex; align-items:center; gap:10px; margin-bottom:14px;
                padding-bottom:10px; border-bottom:2px solid #2f5c9e; }
#opcdis-root .opcdim-head h2 { font-size:16px; font-weight:700; color:#2f5c9e; line-height:1.3; }
#opcdis-root .dim-list { display:flex; flex-direction:column; gap:12px; }
/* min-width:0 es la causa real de la tabla "cortada" en el WordPress
   productivo (2026-07-29): por default, un hijo flex NO se achica más
   allá del ancho de su contenido (min-width:auto) — sin esto, la tabla
   ancha de adentro (min-width:900px) empujaba a TODA la fila (y a la
   página, dentro del layout más angosto de WordPress) en vez de generar
   su propio scroll horizontal contenido en .table-wrap. */
#opcdis-root .dim-row { background:#fff; border:1px solid #e6e9ef; border-radius:10px; overflow:hidden;
           box-shadow:0 1px 3px rgba(0,0,0,.08); min-width:0; }
#opcdis-root .dim-main { display:grid; grid-template-columns:44px 240px 1fr 150px 150px 96px; gap:14px;
             align-items:center; padding:14px 20px; }
#opcdis-root .dim-btn { width:32px; height:32px; border-radius:6px; border:1px solid #cfd6e0; background:#f4f6f9;
            color:#2f5c9e; font:700 17px 'Montserrat',sans-serif; cursor:pointer;
            display:grid; place-items:center; transition:.15s; }
#opcdis-root .dim-btn:hover { background:#2f5c9e; border-color:#2f5c9e; color:#fff; }
#opcdis-root .dim-btn[aria-expanded="true"] { background:#e08a3c; border-color:#e08a3c; color:#fff; }
#opcdis-root .dim-name { font-size:13.5px; font-weight:600; color:#2b2b2b; line-height:1.3; }
#opcdis-root .dim-bars { display:flex; flex-direction:column; gap:4px; min-width:60px; }
#opcdis-root .dim-bars .bar { height:7px; border-radius:3px; background:#88aad5; min-width:2px; }
#opcdis-root .dim-bars .bar.dev { background:#e08a3c; }
#opcdis-root .dim-fig { font-size:13px; font-weight:500; text-align:right; color:#2b2b2b; }
#opcdis-root .dim-fig small { display:block; font-size:10px; color:#8a8a8a; text-transform:uppercase;
                  letter-spacing:.5px; font-weight:600; margin-top:2px; }
#opcdis-root .dim-pct { font-size:14px; font-weight:700; text-align:right; color:#2e8b6f; }
#opcdis-root .dim-pct small { display:block; font-size:10px; color:#8a8a8a; text-transform:uppercase;
                 letter-spacing:.5px; font-weight:600; margin-top:2px; }
#opcdis-root .detalle { display:none; border-top:1px solid #e6e9ef; }
#opcdis-root .detalle.open { display:block; }
#opcdis-root .detalle-head { background:#f7f9fc; color:#2f5c9e; padding:10px 18px; font-size:13px;
                 font-weight:700; border-bottom:1px solid #e6e9ef; }
#opcdis-root .detalle-head-top { display:flex; justify-content:space-between; align-items:center;
                     gap:10px; flex-wrap:wrap; }
#opcdis-root .detalle-head .tag { font-size:11px; font-weight:600; color:#4c4b49; background:#fff;
                      border:1px solid #cfd6e0; padding:3px 10px; border-radius:20px; }
#opcdis-root .detalle-head-desc { font-size:11.5px; font-weight:400; color:#6b6f76; margin-top:4px;
                      line-height:1.4; max-width:900px; }
#opcdis-root .detalle table { width:100%; border-collapse:collapse; font-size:12.5px; table-layout:fixed; }
#opcdis-root .detalle thead th { background:#2f5c9e; color:#fff; font-weight:600; font-size:11px;
                     text-transform:uppercase; letter-spacing:.4px; padding:8px 12px; text-align:left; }
#opcdis-root .detalle thead th:nth-child(-n+4) { text-align:left; }
/* 2026-08-10 (pedido del usuario, "como en Niñez"): 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 (antes: min-width:900px !important). */
#opcdis-root .detalle thead th:nth-child(1) { width:14%; }
#opcdis-root .detalle thead th:nth-child(2) { width:16%; }
#opcdis-root .detalle thead th:nth-child(3) { width:16%; }
#opcdis-root .detalle thead th:nth-child(4) { width:8%; }
#opcdis-root .detalle thead th:nth-child(5),
#opcdis-root .detalle thead th:nth-child(6),
#opcdis-root .detalle thead th:nth-child(7) { width:10%; }
#opcdis-root .detalle thead th:nth-child(8),
#opcdis-root .detalle thead th:nth-child(9) { width:8%; }
#opcdis-root .detalle tbody td { padding:8px 12px; border-bottom:1px solid #eef1f5; vertical-align:top;
                     overflow-wrap:break-word; }
#opcdis-root .detalle tbody td.num { text-align:right; }
#opcdis-root .detalle tbody tr:hover { background:#f7f9fc; }
#opcdis-root .detalle td.org { font-weight:600; color:#2f5c9e; }
#opcdis-root .detalle tfoot td { padding:9px 12px; font-weight:700; background:#f7f9fc; border-top:2px solid #e6e9ef; }
#opcdis-root .detalle tfoot td.num { text-align:right; white-space:nowrap; }
/* 2026-07-31 (pedido del usuario): se sacaron los semáforos de color de
   "% Ejec." y "Var. % C. vigente vs inicial" — un solo estilo neutro para
   ambos, sin importar el valor. */
#opcdis-root .var-cell { font-weight:600; color:#2b2b2b; }
#opcdis-root .forma-legend { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
#opcdis-root .forma-legend-item { display:flex; align-items:center; gap:8px; font-size:12px; }
#opcdis-root .forma-legend-dot { width:11px; height:11px; min-width:11px; border-radius:50%; }
#opcdis-root .forma-legend-nombre { color:#2b2b2b; flex:1; }
#opcdis-root .forma-legend-datos { color:#8a8a8a; white-space:nowrap; font-variant-numeric:tabular-nums; }
#opcdis-root .forma-legend-head { padding-bottom:6px; border-bottom:1px solid #eef1f5; margin-bottom:-2px; }
#opcdis-root .forma-legend-head .forma-legend-datos { color:#4c4b49; font-weight:600; font-size:11px;
                    text-transform:uppercase; letter-spacing:.03em; }
@media (max-width:980px) {
  #opcdis-root .dim-main { grid-template-columns:44px 1fr 96px; }
  #opcdis-root .dim-bars, #opcdis-root .dim-fig { display:none; }
}