:root {
      /* PALETA MANUAL DE MARCA OFICIAL */
      --col-rojo: #d20a11;
      --col-rojo-dark: #8a1002;
      --col-oscuro: #1d1d1b;
      --col-azul: #008bd2;
      --col-verde: #009640;
      --col-mostaza: #fbba00;
      --col-ocre: #d18a12;
      --col-fuente: #2d3748;
      --col-grisoscuro: #4a5568;
      --col-grismedio: #718096;
      --col-grisclaro: #e2e8f0;
      --col-gristenue: #f8fafc;
      --col-blanco: #ffffff;
      --col-rosa-genero: #c2185b;

      /* ESCALA COROPLÉTICA DEL MAPA */
      --map-c1: #fee2e2;
      --map-c2: #fca5a5;
      --map-c3: #f87171;
      --map-c4: #dc2626;
      --map-c5: #991b1b;

      /* TIPOGRAFÍAS */
      --font-san-serif: 'Roboto', -apple-system, sans-serif;
      --font-serif: 'Roboto Serif', Georgia, serif;

      /* SOMBRAS Y BORDES */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);
      --radius: 10px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--font-san-serif);
      color: var(--col-fuente);
      background-color: var(--col-gristenue);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .container {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 16px;
      width: 100%;
    }

    /* BARRA SUPERIOR INSTITUCIONAL */
    .top-bar {
      background-color: #1d1d1b;
      padding: 14px 0;
      border-bottom: 3px solid #d20a11;
    }
    .top-bar-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 14px;
    }
    @media (min-width: 768px) {
      .top-bar-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 12px;
      }
    }
    .tag-badge {
      background: #d20a11;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 4px;
      display: inline-block;
      letter-spacing: 0.8px;
    }
    .tag-badge.dark { background: var(--col-oscuro); }

    /* HERO */
    .hero-section {
      padding: 38px 0 30px;
      text-align: center;
    }
    .hero-subtitle {
      color: var(--col-rojo);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 10px;
    }
    .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(23px, 3.8vw, 36px);
      color: var(--col-oscuro);
      font-weight: 700;
      line-height: 1.22;
      max-width: 960px;
      margin: 0 auto 12px;
    }
    .hero-meta {
      font-size: 14px;
      color: var(--col-grismedio);
      max-width: 820px;
      margin: 0 auto;
      line-height: 1.55;
    }
    .hero-credits {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px 16px;
      margin-top: 16px;
      font-size: 12px;
      color: var(--col-grisoscuro);
    }
    .hero-credits strong { color: var(--col-oscuro); }

    /* TARJETA SUPERIOR DE AFILIACIÓN */
    .affiliations-card {
      margin: 26px 0 20px;
    }
    .affiliations-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }
    .affil-item {text-align: center;/* display: flex; *//* gap: 14px; */flex-direction: column;}
    .affil-icon {
      /* width: 44px; */
      /* height: 44px; */
      /* border-radius: 50%; */
      /* background: #e0f2fe; */
      /* color: var(--col-azul); */
      /* display: flex; */
      /* align-items: center; */
      /* justify-content: center; */
      /* font-size: 20px; */
      /* flex-shrink: 0; */
    }
    .affil-icon.purple { background: #ede9fe; color: #7c3aed; }
    .affil-icon.yellow { background: #fef3c7; color: var(--col-ocre); }
    .affil-icon.red { background: #fee2e2; color: var(--col-rojo); }
    .affil-title {/* font-size: 14.5px; *//* font-weight: 700; *//* color: var(--col-oscuro); *//* line-height: 1.2; */}
    .affil-desc {/* font-size: 12px; *//* color: var(--col-grismedio); *//* margin-top: 2px; */}


    /* TARJETAS KPI */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 16px;
      margin-bottom: 26px;
    }
    .kpi-card {
      background: #ffffff;
      border: 1px solid var(--col-grisclaro);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: 20px 16px;
      text-align: center;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .kpi-card.card-red { border-top: 4px solid var(--col-rojo); }
    .kpi-card.card-blue { border-top: 4px solid var(--col-azul); }
    .kpi-card.card-yellow { border-top: 4px solid var(--col-mostaza); }
    .kpi-card.card-darkred { border-top: 4px solid var(--col-rojo-dark); }
    .kpi-number { font-size: 34px; font-weight: 900; line-height: 1.1; margin-bottom: 6px; }
    .card-red .kpi-number { color: var(--col-rojo); }
    .card-blue .kpi-number { color: var(--col-azul); }
    .card-yellow .kpi-number { color: #b7791f; }
    .card-darkred .kpi-number { color: var(--col-rojo-dark); }
    .kpi-title { font-size: 13.5px; font-weight: 700; color: var(--col-oscuro); line-height: 1.3; }
    .kpi-sub { font-size: 11.5px; color: var(--col-grismedio); margin-top: 4px; }

    /* NAVEGACIÓN DE PESTAÑAS ADAPTABLE (sin scroll horizontal) */
    .tab-navigation-bar {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 24px;
    }
    .tab-navigation-bar .main-tab-btn:last-child:nth-child(odd) { grid-column: span 2; }
    @media (min-width: 768px) {
      .tab-navigation-bar { display: flex; flex-wrap: wrap; }
    }
    .main-tab-btn {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 6px;
      padding: 12px 10px;
      font-size: 12.5px;
      font-weight: 700;
      font-family: inherit;
      color: var(--col-grisoscuro);
      background: #ffffff;
      border: 1px solid var(--col-grisclaro);
      border-radius: var(--radius);
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;
      user-select: none;
      width: 100%;
    }
    @media (min-width: 768px) {
      .main-tab-btn {
        padding: 10px 18px;
        font-size: 13.5px;
        flex: 1;
        min-width: 180px;
        width: auto;
      }
    }
    .main-tab-btn:hover {
      color: var(--col-rojo);
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .main-tab-btn.active {
      background: var(--col-rojo);
      color: #ffffff;
      border-color: var(--col-rojo);
      box-shadow: 0 4px 12px rgba(210, 10, 17, 0.35);
    }

    /* CONTENIDO DE PESTAÑAS */
    .view-content {
      display: none;
      opacity: 0;
      transform: translateY(6px);
      animation: fadeSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .view-content.active { display: block; }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* PANELES Y TARJETAS */
    .white-card {
      background: #ffffff;
      border-radius: var(--radius);
      border: 1px solid var(--col-grisclaro);
      box-shadow: var(--shadow-sm);
      padding: 16px;
      margin-bottom: 22px;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .white-card { padding: 22px; }
    }
    .card-heading {
      font-family: var(--font-serif);
      font-size: 17.5px;
      font-weight: 700;
      color: var(--col-oscuro);
      margin-bottom: 4px;
    }
    .card-intro { font-size: 12.5px; color: var(--col-grismedio); margin-bottom: 18px; }
    .two-cols {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    @media (min-width: 768px) {
      .two-cols { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
    }
    .two-cols > .white-card { margin-bottom: 0; }
    .two-cols + .white-card, .two-cols + .two-cols { margin-top: 22px; }
    .section-text { font-size: 13.5px; color: var(--col-grisoscuro); line-height: 1.6; }

    /* BARRAS HORIZONTALES */
    .hbar-group { display: flex; flex-direction: column; gap: 14px; }
    .hbar-item { display: flex; flex-direction: column; gap: 4px; }
    .hbar-labels {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--col-oscuro);
      gap: 8px;
    }
    .hbar-labels span:last-child { text-align: right; flex-shrink: 0; }
    .hbar-track {
      background: #e2e8f0;
      border-radius: 50px;
      height: 40px;
      overflow: hidden;
      width: 100%;
      position: relative;
    }
    .hbar-fill {
      height: 100%;
      border-radius: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.3px;
      white-space: nowrap;
      overflow: hidden;
      padding: 0 8px;
      transition: width 0.6s ease;
    }
    .bg-blue { background: var(--col-azul); }
    .bg-red { background: var(--col-rojo); }
    .bg-green { background: var(--col-verde); }
    .bg-yellow { background: var(--col-mostaza); color: #1d1d1b; }
    .bg-darkred { background: var(--col-rojo-dark); }
    .bg-pink { background: var(--col-rosa-genero); }

    /* BARRAS VERTICALES COMPARATIVAS */
    .vbar-chart {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      height: 190px;
      padding: 10px 0 4px;
      gap: 28px;
    }
    .vbar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      width: 90px;
    }
    .vbar-val { font-size: 22px; font-weight: 900; color: var(--col-oscuro); margin-bottom: 4px; }
    .vbar-bar { width: 100%; max-width: 70px; border-radius: 6px 6px 0 0; background: var(--col-grismedio); }
    .vbar-bar.highlight { background: var(--col-rojo); }
    .vbar-bar.good { background: var(--col-verde); }
    .vbar-lbl { font-size: 11.5px; font-weight: 700; color: var(--col-grismedio); margin-top: 6px; text-align: center; line-height: 1.25; }

    /* BARRAS DIVIDIDAS */
    .split-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-left: 10px;
      border-left: 4px solid var(--col-rosa-genero);
    }
    .split-title { font-size: 13.5px; font-weight: 700; color: var(--col-oscuro); }
    .split-bars { display: flex; gap: 6px; width: 100%; }
    .split-segment {
      min-height: 40px;
      padding: 4px 8px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .seg-female { background: var(--col-rosa-genero); }
    .seg-male { background: var(--col-azul); }

    /* EMBUDO CEM */
    .funnel { display: flex; flex-direction: column; gap: 10px; }
    .funnel-step {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .funnel-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--col-oscuro); }
    .funnel-head span:last-child { flex-shrink: 0; }
    .funnel-arrow { font-size: 11.5px; color: var(--col-grismedio); padding-left: 12px; border-left: 2px dashed var(--col-grisclaro); margin-left: 8px; }

    /* NÚMERO DESTACADO */
    .big-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
    .big-stat {
      background: var(--col-gristenue);
      border: 1px solid var(--col-grisclaro);
      border-radius: 8px;
      padding: 14px 10px;
      text-align: center;
    }
    .big-stat-val { font-size: 26px; font-weight: 900; color: var(--col-rojo); line-height: 1.1; }
    .big-stat-val.dark { color: var(--col-oscuro); }
    .big-stat-val.blue { color: var(--col-azul); }
    .big-stat-val.green { color: var(--col-verde); }
    .big-stat-lbl { font-size: 11.5px; font-weight: 600; color: var(--col-grismedio); margin-top: 4px; line-height: 1.3; }

    /* PICTOGRAMA DIARIO */
    .picto-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
    .picto {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      color: #ffffff;
      opacity: 0;
      transform: scale(0.6);
      animation: popIn 0.4s ease forwards;
    }
    .picto.a { background: var(--col-rojo-dark); }
    .picto.b { background: var(--col-rojo); }
    @keyframes popIn { to { opacity: 1; transform: scale(1); } }
    .picto-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--col-grisoscuro); }
    .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

    /* NOTAS */
    .note-box {
      margin-top: 16px;
      padding: 12px 14px;
      border-radius: 6px;
      font-size: 12.5px;
      line-height: 1.5;
      background: #f8fafc;
      border: 1px solid var(--col-grisclaro);
      color: var(--col-grisoscuro);
    }
    .note-box.alert-red { border-left: 4px solid var(--col-rojo); background: #fff5f5; color: #991b1b; }
    .note-box.alert-green { border-left: 4px solid var(--col-verde); background: #f0fdf4; color: #166534; }

    /* PILARES */
    .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
    .pillar-card {
      border: 1px solid var(--col-grisclaro);
      border-top: 4px solid var(--col-rojo);
      border-radius: 8px;
      padding: 16px;
      background: #ffffff;
    }
    .pillar-card:nth-child(2) { border-top-color: var(--col-azul); }
    .pillar-card:nth-child(3) { border-top-color: var(--col-mostaza); }
    .pillar-num { font-size: 11px; font-weight: 800; color: var(--col-rojo); text-transform: uppercase; letter-spacing: 0.6px; }
    .pillar-card:nth-child(2) .pillar-num { color: var(--col-azul); }
    .pillar-card:nth-child(3) .pillar-num { color: #b7791f; }
    .pillar-title { font-family: var(--font-serif); font-size: 15.5px; font-weight: 700; color: var(--col-oscuro); margin: 4px 0 6px; }
    .pillar-desc { font-size: 12.5px; color: var(--col-grisoscuro); line-height: 1.5; }

    /* LÍNEA DE TIEMPO DEL PROGRAMA */
    .years-track { display: flex; gap: 4px; margin: 10px 0 8px; }
    .year-seg { flex: 1; min-width: 0; text-align: center; }
    .year-bar { height: 14px; border-radius: 4px; background: var(--col-grisclaro); }
    .year-seg.done .year-bar { background: var(--col-rojo); }
    .year-seg.now .year-bar { background: repeating-linear-gradient(45deg, var(--col-rojo), var(--col-rojo) 6px, #f87171 6px, #f87171 12px); }
    .year-lbl { font-size: 11px; font-weight: 700; color: var(--col-grismedio); margin-top: 4px; }
    .year-seg.now .year-lbl { color: var(--col-rojo); }

    /* RESULTADOS POR COLEGIO */
    .school-card {
      border: 1px solid var(--col-grisclaro);
      border-radius: 8px;
      padding: 16px;
      background: #ffffff;
    }
    .school-tag { font-size: 11px; font-weight: 800; color: var(--col-azul); text-transform: uppercase; letter-spacing: 0.5px; }
    .school-name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--col-oscuro); margin: 2px 0 10px; }

    /* RECUADROS (ACORDEÓN) */
    .acc { border: 1px solid var(--col-grisclaro); border-radius: 8px; background: #ffffff; margin-bottom: 10px; overflow: hidden; }
    .acc summary {
      list-style: none;
      cursor: pointer;
      padding: 14px 16px;
      font-size: 14px;
      font-weight: 700;
      color: var(--col-oscuro);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .acc summary::-webkit-details-marker { display: none; }
    .acc summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--col-rojo); flex-shrink: 0; line-height: 1; }
    .acc[open] summary::after { content: '−'; }
    .acc[open] summary { border-bottom: 1px solid var(--col-grisclaro); background: #fff5f5; }
    .acc-body { padding: 14px 16px; font-size: 13px; color: var(--col-grisoscuro); line-height: 1.6; }
    .acc-body p + p, .acc-body ul + p, .acc-body p + ul { margin-top: 8px; }
    .acc-body ul { padding-left: 18px; }
    .acc-body li { margin-bottom: 4px; }
    .art-num { color: var(--col-rojo); font-weight: 800; margin-right: 4px; }

    /* VOCES */
    .filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
    .filter-btn {
      padding: 8px 16px;
      font-size: 12.5px;
      font-weight: 700;
      font-family: inherit;
      border-radius: 50px;
      background: #f1f5f9;
      color: var(--col-grisoscuro);
      border: 1px solid var(--col-grisclaro);
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .filter-btn:hover { border-color: var(--col-rojo); color: var(--col-rojo); }
    .filter-btn.active { background: var(--col-rojo); color: #ffffff; border-color: var(--col-rojo); }
    .quotes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
    @media (max-width: 480px) { .quotes-grid { grid-template-columns: 1fr; } }
    .quote-card {
      background: #ffffff;
      border: 1px solid var(--col-grisclaro);
      border-left: 4px solid var(--col-rojo);
      border-radius: 8px;
      padding: 16px 18px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 10px;
      animation: fadeSlideIn 0.35s ease forwards;
    }
    .quote-card.estudiantes { border-left-color: var(--col-azul); }
    .quote-card.unfpa { border-left-color: var(--col-mostaza); }
    .quote-text { font-family: var(--font-serif); font-size: 14.5px; font-style: italic; color: var(--col-oscuro); line-height: 1.5; }
    .quote-text::before { content: '“'; color: var(--col-rojo); font-weight: 700; }
    .quote-text::after { content: '”'; color: var(--col-rojo); font-weight: 700; }
    .quote-author { font-size: 13px; font-weight: 700; color: var(--col-oscuro); }
    .quote-role { font-size: 11.5px; color: var(--col-grismedio); }

    /* FICHA DE LA ORDENANZA */
    .ficha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 6px; }
    .ficha-item { background: var(--col-gristenue); border: 1px solid var(--col-grisclaro); border-radius: 8px; padding: 10px 12px; }
    .ficha-lbl { font-size: 10.5px; font-weight: 800; color: var(--col-grismedio); text-transform: uppercase; letter-spacing: 0.4px; }
    .ficha-val { font-size: 13.5px; font-weight: 700; color: var(--col-oscuro); margin-top: 2px; word-break: break-word; }

    /* CARTEL OBLIGATORIO */
    .cartel {
      border: 3px solid var(--col-oscuro);
      border-radius: 6px;
      padding: 20px 18px;
      text-align: center;
      background: #ffffff;
      max-width: 560px;
      margin: 0 auto;
      aspect-ratio: 3 / 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }
    @media (max-width: 480px) { .cartel { aspect-ratio: auto; } }
    .cartel-main { font-size: clamp(15px, 3vw, 20px); font-weight: 900; color: var(--col-rojo); text-transform: uppercase; line-height: 1.2; }
    .cartel-sub { font-size: 12.5px; color: var(--col-oscuro); }
    .cartel-ord { font-size: 13px; font-weight: 800; color: var(--col-oscuro); }
    .cartel-multa { font-size: 11.5px; color: var(--col-grisoscuro); }
    .cartel-size { text-align: center; font-size: 11.5px; color: var(--col-grismedio); margin-top: 8px; }

    /* TABLA ADAPTABLE A TARJETAS EN CELULARES */
    .data-table-wrap { margin-top: 10px; }
    .styled-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
    @media (min-width: 768px) {
      .data-table-wrap { border: 1px solid var(--col-grisclaro); border-radius: var(--radius); overflow: hidden; }
      .styled-table th { background: #f1f5f9; color: var(--col-oscuro); font-weight: 700; padding: 10px 14px; border-bottom: 2px solid var(--col-grisclaro); }
      .styled-table td { padding: 11px 14px; border-bottom: 1px solid var(--col-grisclaro); vertical-align: top; }
    }
    @media (max-width: 767px) {
      .styled-table thead { display: none; }
      .styled-table, .styled-table tbody, .styled-table tr, .styled-table td { display: block; width: 100%; }
      .styled-table tr { border: 1px solid var(--col-grisclaro); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
      .styled-table td { padding: 5px 0; }
      .styled-table td::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--col-grismedio); margin-bottom: 1px; }
      .styled-table td:first-child { font-size: 16px; font-weight: 800; color: var(--col-rojo); background: #fdf2f2; border: 1px solid #fca5a5; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; text-align: center; }
      .styled-table td:first-child::before { display: none; }
    }
    .code-badge { background: var(--col-rojo); color: #ffffff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 50px; display: inline-block; }

    /* QUIZ MITO O REALIDAD */
    .quiz-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
    .quiz-score { font-size: 13px; font-weight: 800; color: var(--col-oscuro); background: #fef3c7; border-radius: 50px; padding: 6px 14px; }
    .quiz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
    @media (max-width: 480px) { .quiz-grid { grid-template-columns: 1fr; } }
    .quiz-card { border: 1px solid var(--col-grisclaro); border-radius: 8px; padding: 16px; background: #ffffff; display: flex; flex-direction: column; gap: 12px; }
    .quiz-q { font-size: 14px; font-weight: 700; color: var(--col-oscuro); line-height: 1.4; }
    .quiz-actions { display: flex; gap: 8px; }
    .quiz-btn {
      flex: 1;
      padding: 9px 10px;
      font-size: 13px;
      font-weight: 800;
      font-family: inherit;
      border-radius: 6px;
      border: 1px solid var(--col-grisclaro);
      background: #f1f5f9;
      color: var(--col-grisoscuro);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .quiz-btn:hover:not(:disabled) { border-color: var(--col-rojo); color: var(--col-rojo); }
    .quiz-btn:disabled { cursor: default; }
    .quiz-btn.correct { background: var(--col-verde); border-color: var(--col-verde); color: #ffffff; }
    .quiz-btn.wrong { background: var(--col-rojo); border-color: var(--col-rojo); color: #ffffff; }
    .quiz-feedback { display: none; font-size: 12.5px; line-height: 1.5; color: var(--col-grisoscuro); background: var(--col-gristenue); border-radius: 6px; padding: 10px 12px; }
    .quiz-feedback.show { display: block; animation: fadeSlideIn 0.3s ease forwards; }
    .quiz-feedback strong { color: var(--col-oscuro); }

    /* MAPAS D3 */
    .map-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
    .map-switch .filter-btn { width: 100%; }
    .map-explorer-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
    @media (min-width: 900px) {
      .map-explorer-layout { grid-template-columns: 1.05fr 0.95fr; }
    }
    .map-container-box {
      background: #ffffff;
      border: 1px solid var(--col-grisclaro);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: 12px;
      position: relative;
      min-width: 0;
    }
    @media (min-width: 768px) { .map-container-box { padding: 18px; } }
    .svg-map-wrapper {
      position: relative;
      width: 100%;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid var(--col-grisclaro);
      padding: 8px 4px;
      min-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    @media (min-width: 768px) { .svg-map-wrapper { min-height: 520px; } }
    #map-svg { width: 100%; height: auto; max-height: 640px; display: block; }
    .d3-path {
      stroke: #ffffff;
      stroke-width: 1.2px;
      stroke-linejoin: round;
      cursor: pointer;
      transition: fill 0.25s ease, filter 0.2s ease;
    }
    .d3-path:hover { filter: brightness(0.88); stroke: #1d1d1b; stroke-width: 2px; }
    .d3-path.selected { stroke: #1d1d1b !important; stroke-width: 2.8px !important; filter: drop-shadow(0 0 6px rgba(210,10,17,0.7)); }
    .d3-label {
      font-family: var(--font-san-serif);
      font-weight: 700;
      fill: #1d1d1b;
      pointer-events: none;
      text-anchor: middle;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 2.5px;
      stroke-linejoin: round;
      user-select: none;
    }
    .d3-marker { fill: var(--col-oscuro); stroke: #ffffff; stroke-width: 2px; pointer-events: none; }
    .map-quick-select {
      width: 100%;
      padding: 8px 12px;
      border-radius: 6px;
      border: 1px solid var(--col-grisclaro);
      background: #ffffff;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      color: var(--col-fuente);
      margin-bottom: 12px;
      cursor: pointer;
    }
    .map-quick-select:focus { border-color: var(--col-rojo); outline: none; }
    #map-tooltip {
      position: absolute;
      background: rgba(29, 29, 27, 0.94);
      color: #ffffff;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 12px;
      pointer-events: none;
      display: none;
      z-index: 100;
      box-shadow: var(--shadow-md);
      transform: translate(-50%, -125%);
      white-space: nowrap;
      border-left: 3px solid var(--col-rojo);
    }
    .map-header-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
    .map-header-title { font-size: 14px; font-weight: 700; color: var(--col-oscuro); }
    .map-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; color: var(--col-grismedio); }
    .legend-item { display: inline-flex; align-items: center; gap: 4px; }
    .legend-box { width: 16px; height: 10px; border-radius: 2px; display: inline-block; border: 1px solid rgba(0,0,0,0.06); }
    .map-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--col-grismedio); font-size: 13px; font-weight: 600; text-align: center; padding: 0 16px; }
    .map-spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: var(--col-rojo); border-radius: 50%; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .region-detail-panel {
      background: #ffffff;
      border: 1px solid var(--col-grisclaro);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: 16px;
      min-width: 0;
    }
    @media (min-width: 900px) {
      .region-detail-panel { padding: 22px; position: sticky; top: 20px; }
    }
    .detail-badge-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .region-rank-badge { font-size: 11.5px; font-weight: 800; background: #fee2e2; color: var(--col-rojo); padding: 4px 10px; border-radius: 50px; }
    .detail-region-name { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--col-oscuro); line-height: 1.15; margin-bottom: 6px; }
    @media (min-width: 768px) { .detail-region-name { font-size: 24px; } }
    .detail-region-macro { font-size: 13px; color: var(--col-grismedio); margin-bottom: 16px; }
    .detail-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
    .detail-stat-box { background: var(--col-gristenue); border: 1px solid var(--col-grisclaro); border-radius: 8px; padding: 10px 8px; text-align: center; }
    .detail-stat-val { font-size: 19px; font-weight: 800; color: var(--col-oscuro); }
    .detail-stat-val.highlight { color: var(--col-rojo); }
    .detail-stat-lbl { font-size: 11px; font-weight: 600; color: var(--col-grismedio); margin-top: 2px; }
    .list-block { border-top: 1px solid var(--col-grisclaro); padding-top: 14px; }
    .list-title { font-size: 13px; font-weight: 700; color: var(--col-oscuro); margin-bottom: 8px; }
    .list-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--col-grisclaro); font-size: 12.5px; }
    .list-item:last-child { border-bottom: none; }
    .list-name { color: var(--col-oscuro); font-weight: 500; }
    .list-val { font-weight: 700; color: var(--col-rojo-dark); text-align: right; flex-shrink: 0; }
    .empty-msg { font-size: 12.5px; color: var(--col-grismedio); font-style: italic; }

    /* AYUDA */
    .help-box {
      background: var(--col-oscuro);
      color: #ffffff;
      border-radius: var(--radius);
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 8px;
      border-left: 5px solid var(--col-rojo);
    }
    .help-num { font-size: 34px; font-weight: 900; color: #ffffff; line-height: 1; }
    .help-num span { color: var(--col-rojo); }
    .help-text { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.5; color: #e2e8f0; }
    .help-text strong { color: #ffffff; }

    /* FOOTER */
    .app-footer {
      background: #ffffff;
      border-top: 1px solid var(--col-grisclaro);
      padding: 22px 0;
      margin-top: 36px;
      font-size: 12px;
      color: var(--col-grismedio);
      text-align: center;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .kpi-grid { grid-template-columns: 1fr 1fr; }
      .kpi-number { font-size: 28px; }
      .hbar-labels { font-size: 12px; }
    }
    @media (max-width: 480px) {
      .affiliations-card { padding: 16px; }
      .kpi-grid { grid-template-columns: 1fr; }
      .hbar-labels { flex-direction: column; align-items: flex-start; gap: 2px; }
      .hbar-labels span:last-child { text-align: left; }
      .vbar-chart { gap: 18px; height: 170px; }
      .vbar-val { font-size: 19px; }
      .picto { width: 28px; height: 28px; font-size: 14px; }
    }