<script>
  import { onMount } from 'svelte';
  import { fade, scale } from 'svelte/transition';
  import { cubicOut } from 'svelte/easing';

  let hovered = null;
  let activeModal = null;
  let mounted = false;

  onMount(() => { setTimeout(() => { mounted = true; }, 80); });

  const MODALS = {
    quien: {
      title: '¿Quién gasta o recibe?', tech: 'CLASIFICADOR INSTITUCIONAL',
      everyday: 'Es como preguntar "¿quién en la familia maneja plata?". Papá tiene su sueldo, mamá maneja el negocio, el abuelo cobra su renta. Cada uno es una "entidad" distinta con su propio presupuesto.',
      budget: 'El clasificador institucional cataloga a todas las entidades del sector público: ministerios, gobernaciones, municipios, empresas públicas, universidades. Cada una tiene un código único y un presupuesto asignado.',
      example: 'Ejemplo: El Ministerio de Educación (código 040) y el Gobierno Autónomo de La Paz (código 126) son entidades distintas, cada una con sus propios ingresos y gastos.',
      color: 'var(--theme-titulo)',
    },
    rubros: {
      title: '¿Qué tipo de ingreso es?', tech: 'CLASIFICADOR DE RECURSOS POR RUBROS',
      everyday: 'María gana un sueldo de su trabajo, cobra alquiler de un cuartito, y un amigo le prestó plata. Son tres tipos distintos de ingreso: laboral, patrimonial, y crédito.',
      budget: 'En el presupuesto, el Estado recibe ingresos tributarios (impuestos = el "sueldo"), regalías por explotación de recursos (= el "alquiler"), y créditos internacionales (= el "préstamo"). El rubro te dice qué naturaleza tiene cada ingreso.',
      example: 'Ejemplo: Los Bs 2.400M que Bolivia recibe por IDH son un rubro distinto a los Bs 800M de crédito del BID, aunque ambos financien al mismo ministerio.',
      color: 'var(--theme-accent)',
    },
    fuentes: {
      title: '¿Quién pone la plata?', tech: 'CLASIFICADOR DE FUENTES DE FINANCIAMIENTO',
      everyday: 'María sabe que su sueldo se lo paga la empresa TechCorp, el alquiler se lo paga su inquilino Juan, y el préstamo se lo hizo el Banco Nacional. Son las fuentes: quién firma el cheque.',
      budget: 'Las fuentes son los bolsillos específicos: el TGN (Tesoro General de la Nación), recursos propios de cada entidad, crédito externo del BID o Banco Mundial, o donaciones de cooperación.',
      example: 'Ejemplo: Un crédito del BID y uno del Banco Mundial son el mismo rubro (crédito externo) pero distinta fuente. La fuente dice quién exactamente pone la plata.',
      color: 'var(--theme-accent)',
    },
    objeto: {
      title: '¿En qué se gasta concretamente?', tech: 'CLASIFICADOR POR OBJETO DEL GASTO',
      everyday: 'Cuando María gasta, compra cosas concretas: arroz, paga la luz, le paga al albañil. Cada compra es un "objeto" distinto — algo tangible que se puede listar.',
      budget: 'El Objeto del Gasto es exactamente eso: sueldos, consultorías, materiales de escritorio, combustible, medicamentos. Es la lista del supermercado del Estado.',
      example: 'Ejemplo: El grupo 10000 "Servicios Personales" incluye sueldos y aguinaldos. El 20000 "Servicios No Personales" incluye consultorías y alquileres.',
      color: '#4A8B6E',
    },
    sector: {
      title: '¿A qué sector de la economía va?', tech: 'CLASIFICADOR POR SECTORES ECONÓMICOS',
      everyday: 'Si María contrata un albañil, esa plata va al sector construcción. Si compra medicina, va al sector salud. No importa qué compró — importa qué parte de la economía mueve.',
      budget: 'Este clasificador mide el impacto económico: cuánto va a infraestructura, cuánto a servicios, cuánto a industria. Permite evaluar cómo las decisiones fiscales afectan a cada sector.',
      example: 'Ejemplo: Un hospital nuevo es "construcción" en Objeto del Gasto pero "salud" en Sector Económico. Misma plata, dos lentes distintos.',
      color: '#4A8B6E',
    },
    finalidad: {
      title: '¿Para qué se gasta?', tech: 'CLASIFICADOR POR FINALIDAD Y FUNCIÓN',
      everyday: 'María compró arroz (objeto), pero ¿para qué? Para alimentar a su familia. Compró cemento: para tener casa. El "para qué" es el objetivo final, no el insumo.',
      budget: 'Este clasificador agrupa por propósito: educación, defensa, salud, protección social. No importa si se gastó en sueldos o en cemento — lo que importa es el fin.',
      example: 'Ejemplo: El sueldo de un profesor y la construcción de una escuela son objetos de gasto distintos, pero ambos tienen la misma finalidad: Educación.',
      color: '#4A8B6E',
    },
    donde: {
      title: '¿Dónde se gasta?', tech: 'CLASIFICADOR GEOGRÁFICO',
      everyday: 'María manda plata a su mamá en Cochabamba y paga el alquiler en La Paz. No es lo mismo gastar en la ciudad que en el área rural, en Santa Cruz que en Potosí.',
      budget: 'La dimensión geográfica permite ver cómo se distribuyen los recursos en el territorio: por departamento, municipio o región. Revela las prioridades territoriales del Estado.',
      example: 'Ejemplo: Del presupuesto de Educación, ¿cuánto va a La Paz vs. Beni? Este clasificador responde esa pregunta.',
      color: '#4A8B6E',
    },
  };

  const WIDGETS_INGRESOS = [
    { id: 'rubros', q: '¿Qué tipo de ingreso?', d: 'Impuestos, regalías, ventas, créditos — la naturaleza de cada ingreso', t: 'Recursos por rubros', href: '/clasificadores/rubros' },
    { id: 'fuentes', q: '¿Quién pone la plata?', d: 'TGN, crédito externo, donaciones — de qué bolsillo sale', t: 'Fuentes de financiamiento', href: '/clasificadores/fuente' },
  ];

  const WIDGETS_EN_QUE = [
    { id: 'objeto', q: 'Objeto del gasto', d: 'Sueldos, consultorías, materiales — la lista concreta', t: 'Objeto del gasto', href: '/clasificadores/objeto-gasto' },
    { id: 'sector', q: 'Sector económico', d: 'Industria, construcción, servicios — a qué sector va', t: 'Sectores económicos', href: '/clasificadores/sectores' },
  ];

  const WIDGETS_BOTTOM = [
    { id: 'finalidad', q: '¿Para qué se gasta?', d: 'Educación, salud, defensa — el objetivo final', t: 'Finalidad y función', href: '/clasificadores/funcional' },
    { id: 'donde', q: '¿Dónde se gasta?', d: 'Departamentos, municipios — distribución territorial', t: 'Geográfico', href: '/clasificadores/geografico' },
  ];

  $: modal = activeModal ? MODALS[activeModal] : null;

  function openModal(e, id) {
    e.preventDefault();
    e.stopPropagation();
    activeModal = id;
  }
  function closeModal() { activeModal = null; }
</script>

<svelte:head>
  <title>Clasificadores — Presupuesto Bolivia</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
</svelte:head>

<div class="page" class:mounted>
  <!-- Header -->
  <header class="page-header">
    <nav class="breadcrumb">
      <a href="/" class="breadcrumb-link sm-hidden">← Inicio</a>
      <div class="breadcrumb-full">
        <a href="/">Inicio</a>
        <span class="breadcrumb-sep">/</span>
        <span class="breadcrumb-current">Clasificadores</span>
      </div>
    </nav>

    <div class="header-content anim" style="--d:0ms">
      <h1>Elige cómo explorar el presupuesto</h1>
      <p class="subtitulo">
        Cada clasificador es una forma distinta de ver la misma información.
        Haz clic en <span class="help-inline">?</span> para entender qué es cada uno.
      </p>
    </div>
  </header>

  <main>
    <!-- ═══ ¿QUIÉN? ═══ -->
    <div class="anim" style="--d:100ms">
      <div class="group">
        <div class="group-accent" style="--c: var(--theme-titulo)"></div>
        <div class="group-header">
          <div class="group-icon" style="--c: var(--theme-titulo)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          </div>
          <div>
            <div class="group-label">¿QUIÉN?</div>
            <div class="group-sub">La entidad que gasta o recibe</div>
          </div>
        </div>

        <a
          href="/clasificadores/institucional"
          class="widget-card widget-h"
          class:wh={hovered === 'quien'}
          on:mouseenter={() => hovered = 'quien'}
          on:mouseleave={() => hovered = null}
        >
          <div class="widget-h-left">
            <div class="widget-q">Instituciones públicas</div>
            <div class="widget-desc">Ministerios, gobernaciones, municipios, empresas públicas, universidades</div>
          </div>
          <div class="widget-h-right">
            <span class="widget-tech">INSTITUCIONAL</span>
            <button class="help-btn help-sm" on:click={(e) => openModal(e, 'quien')}>?</button>
            <span class="widget-arrow" class:arrow-show={hovered === 'quien'}>→</span>
          </div>
        </a>
      </div>
    </div>

    <!-- ═══ INGRESOS + GASTOS ═══ -->
    <div class="main-grid">

      <!-- INGRESOS -->
      <div class="anim col-stretch" style="--d:200ms">
        <div class="group group-stretch">
          <div class="group-accent" style="--c: var(--theme-accent)"></div>
          <div class="group-header">
            <div class="group-icon" style="--c: var(--theme-accent)">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
            </div>
            <div>
              <div class="group-label" style="color: var(--theme-accent)">INGRESOS</div>
              <div class="group-sub">¿De dónde viene la plata?</div>
            </div>
          </div>

          <div class="widgets-stretch">
            {#each WIDGETS_INGRESOS as w}
              <a
                href={w.href}
                class="widget-card widget-grow"
                class:wh={hovered === w.id}
                on:mouseenter={() => hovered = w.id}
                on:mouseleave={() => hovered = null}
              >
                <div class="widget-top">
                  <h4 class="widget-q">{w.q}</h4>
                  <button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
                </div>
                <p class="widget-desc widget-desc-grow">{w.d}</p>
                <div class="widget-footer">
                  <span class="widget-tech">{w.t}</span>
                  <span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
                </div>
                <div class="widget-glow widget-glow-accent"></div>
              </a>
            {/each}
          </div>
        </div>
      </div>

      <!-- GASTOS -->
      <div class="anim col-stretch" style="--d:320ms">
        <div class="group">
          <div class="group-accent" style="--c: #4A8B6E"></div>
          <div class="group-header">
            <div class="group-icon" style="--c: #4A8B6E">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
            </div>
            <div>
              <div class="group-label" style="color: #4A8B6E">GASTOS</div>
              <div class="group-sub">¿Cómo se gasta la plata?</div>
            </div>
          </div>

          <div class="group-widgets">
            <!-- ¿En qué? sub-group -->
            <div class="sub-group">
              <div class="sub-group-accent" style="--c: #4A8B6E"></div>
              <div class="sub-group-header">
                <div class="sub-group-left">
                  <div class="sub-group-icon" style="--c: #4A8B6E">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                  </div>
                  <div>
                    <div class="sub-group-label">¿En qué se gasta?</div>
                    <div class="sub-group-tag">DOS CLASIFICADORES</div>
                  </div>
                </div>
              </div>

              <div class="sub-grid">
                {#each WIDGETS_EN_QUE as w}
                  <a
                    href={w.href}
                    class="widget-card sub-card"
                    class:wh={hovered === w.id}
                    on:mouseenter={() => hovered = w.id}
                    on:mouseleave={() => hovered = null}
                  >
                    <div class="widget-top">
                      <h4 class="widget-q sub-q">{w.q}</h4>
                      <button class="help-btn help-xs" on:click={(e) => openModal(e, w.id)}>?</button>
                    </div>
                    <p class="widget-desc sub-desc">{w.d}</p>
                    <div class="widget-footer sub-footer">
                      <span class="widget-tech sub-tech">{w.t}</span>
                      <span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
                    </div>
                    <div class="widget-glow widget-glow-green"></div>
                  </a>
                {/each}
              </div>
            </div>

            <!-- Bottom row -->
            <div class="bottom-grid">
              {#each WIDGETS_BOTTOM as w}
                <a
                  href={w.href}
                  class="widget-card"
                  class:wh={hovered === w.id}
                  on:mouseenter={() => hovered = w.id}
                  on:mouseleave={() => hovered = null}
                >
                  <div class="widget-top">
                    <h4 class="widget-q">{w.q}</h4>
                    <button class="help-btn" on:click={(e) => openModal(e, w.id)}>?</button>
                  </div>
                  <p class="widget-desc">{w.d}</p>
                  <div class="widget-footer">
                    <span class="widget-tech">{w.t}</span>
                    <span class="widget-arrow" class:arrow-show={hovered === w.id}>→</span>
                  </div>
                  <div class="widget-glow widget-glow-green"></div>
                </a>
              {/each}
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<!-- ═══ MODAL ═══ -->
{#if modal}
  <div
    class="modal-overlay"
    on:click={closeModal}
    on:keydown={(e) => e.key === 'Escape' && closeModal()}
    role="dialog"
    aria-modal="true"
    transition:fade={{ duration: 150 }}
  >
    <div
      class="modal-box"
      on:click|stopPropagation
      role="document"
      transition:scale={{ duration: 200, start: 0.95, easing: cubicOut }}
    >
      <button class="modal-close" on:click={closeModal}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>

      <div class="modal-badge">{modal.tech}</div>
      <h2 class="modal-title">{modal.title}</h2>

      <div class="modal-section">
        <div class="modal-icon">👤</div>
        <div>
          <div class="modal-label">EN LA VIDA COTIDIANA</div>
          <p class="modal-text">{modal.everyday}</p>
        </div>
      </div>

      <div class="modal-divider"></div>

      <div class="modal-section">
        <div class="modal-icon">🏛️</div>
        <div>
          <div class="modal-label">EN EL PRESUPUESTO</div>
          <p class="modal-text">{modal.budget}</p>
        </div>
      </div>

      <div class="modal-example">
        <p>{modal.example}</p>
      </div>
    </div>
  </div>
{/if}


<style>
  /* ── Base ── */
  .page {
    background: var(--theme-body);
    color: var(--theme-titulo);
    min-height: 100vh;
    font-family: 'Instrument Sans', sans-serif;
    transition: background-color 0.2s, color 0.2s;
  }

  /* ── Entrance animations ── */
  .anim {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.7s cubic-bezier(0.16,1,0.3,1);
    transition-delay: var(--d, 0ms);
  }
  .mounted .anim {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── Header ── */
  .page-header {
    border-bottom: 1px solid var(--theme-borde);
    padding: 1.5rem 2rem 2rem;
    max-width: 1120px;
    margin: 0 auto;
  }

  .breadcrumb {
    margin-bottom: 1rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
  }

  .breadcrumb-link {
    color: var(--theme-texto);
    text-decoration: none;
    transition: color 0.2s;
  }
  .breadcrumb-link:hover {
    color: var(--theme-titulo);
  }

  .sm-hidden { display: block; }
  .breadcrumb-full { display: none; }

  @media (min-width: 640px) {
    .sm-hidden { display: none; }
    .breadcrumb-full {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--theme-texto);
    }
    .breadcrumb-full a {
      color: var(--theme-texto);
      text-decoration: none;
      transition: color 0.2s;
    }
    .breadcrumb-full a:hover {
      color: var(--theme-titulo);
    }
    .breadcrumb-sep {
      opacity: 0.5;
    }
    .breadcrumb-current {
      color: var(--theme-titulo);
    }
  }

  .header-content h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.75rem, 4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
  }

  .subtitulo {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--theme-texto);
    max-width: 600px;
  }

  .help-inline {
    font-family: 'DM Serif Display', serif;
    font-weight: 700;
    color: var(--theme-texto);
    border: 1px solid var(--theme-borde);
    border-radius: 50%;
    padding: 0 5px;
    font-size: 0.7rem;
  }

  main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
  }

  /* ── Group (level 1) ── */
  .group {
    background: var(--theme-surface);
    border: 1px solid var(--theme-borde);
    border-radius: 1.5rem;
    padding: 1.25rem 1.125rem 1.125rem;
    position: relative;
    overflow: hidden;
  }
  .group-stretch {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .group-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 30%, transparent), transparent);
    border-radius: 1.5rem 1.5rem 0 0;
  }
  .group-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    padding: 0 0.25rem;
  }
  .group-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--c);
  }
  .group-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    line-height: 1;
    color: var(--theme-titulo);
  }
  .group-sub {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.688rem;
    color: var(--theme-texto);
    margin-top: 0.25rem;
    opacity: 0.8;
  }

  .group-widgets {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .widgets-stretch {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
  }

  /* ── Widget card (level 2) ── */
  .widget-card {
    display: block;
    background: var(--theme-fill);
    border: 1px solid var(--theme-borde);
    border-radius: 1rem;
    padding: 1.375rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: var(--theme-titulo);
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .wh {
    background: color-mix(in srgb, var(--theme-fill) 80%, var(--theme-titulo) 5%);
    border-color: color-mix(in srgb, var(--theme-borde) 50%, var(--theme-texto) 20%);
    transform: translateY(-1px);
  }
  .widget-grow {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Horizontal variant */
  .widget-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .widget-h-left { flex: 1; }
  .widget-h-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
  }

  .widget-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
  }
  .widget-q {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-family: 'Instrument Sans', sans-serif;
    color: var(--theme-titulo);
  }
  .widget-desc {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--theme-texto);
    line-height: 1.5;
    position: relative;
    z-index: 1;
  }
  .widget-desc-grow { flex: 1; }
  .widget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
  }
  .widget-tech {
    font-family: 'DM Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    color: var(--theme-texto);
    text-transform: uppercase;
  }
  .widget-arrow {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.813rem;
    color: transparent;
    transform: translateX(-6px);
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  }
  .arrow-show {
    color: var(--theme-titulo);
    transform: translateX(0);
  }
  .widget-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
  }
  .widget-glow-accent {
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-accent) 6%, transparent), transparent 70%);
  }
  .widget-glow-green {
    background: radial-gradient(circle at 50% 50%, rgba(74,139,110,0.06), transparent 70%);
  }
  .wh > .widget-glow,
  .wh .widget-glow { opacity: 1; }

  /* ── Sub-group (¿En qué?) ── */
  .sub-group {
    background: color-mix(in srgb, var(--theme-surface) 60%, var(--theme-body) 40%);
    border: 1px solid var(--theme-borde);
    border-radius: 1.125rem;
    padding: 1rem 0.875rem 0.875rem;
    position: relative;
    overflow: hidden;
  }
  .sub-group-accent {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 25%, transparent), transparent);
  }
  .sub-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
  }
  .sub-group-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sub-group-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--c);
  }
  .sub-group-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-texto);
    line-height: 1.1;
  }
  .sub-group-tag {
    font-family: 'DM Mono', monospace;
    font-size: 0.438rem;
    letter-spacing: 0.1em;
    margin-top: 0.125rem;
    color: #4A8B6E;
    opacity: 0.7;
  }

  .sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  /* ── Sub-widget (level 3) ── */
  .sub-card {
    background: var(--theme-fill);
    border-color: var(--theme-borde);
    padding: 1rem;
    border-radius: 0.75rem;
  }
  .sub-card.wh {
    background: color-mix(in srgb, var(--theme-fill) 80%, var(--theme-titulo) 5%);
    border-color: color-mix(in srgb, var(--theme-borde) 50%, var(--theme-texto) 20%);
  }
  .sub-q {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--theme-titulo);
  }
  .sub-desc {
    font-size: 0.688rem;
    opacity: 0.9;
  }
  .sub-footer { margin-top: 0.75rem; }
  .sub-tech { font-size: 0.375rem; }

  .bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }

  /* ── Main grid ── */
  .main-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin-top: 1rem;
    align-items: stretch;
  }
  .col-stretch {
    display: flex;
    flex-direction: column;
  }

  /* ── Help button ── */
  .help-btn {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    border: 1px solid var(--theme-borde);
    background: transparent;
    color: var(--theme-texto);
    font-family: 'DM Serif Display', serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .help-btn:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 8%, transparent);
  }
  .help-sm { width: 1.375rem; height: 1.375rem; font-size: 0.625rem; }
  .help-xs { width: 1.25rem; height: 1.25rem; font-size: 0.563rem; }

  /* ── Modal ── */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2.5rem;
  }
  .modal-box {
    background: var(--theme-surface);
    border: 1px solid var(--theme-borde);
    border-radius: 1.5rem;
    max-width: 520px;
    width: 100%;
    padding: 2rem 2.25rem;
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
  }
  .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: 1px solid var(--theme-borde);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-texto);
    cursor: pointer;
    transition: all 0.2s;
  }
  .modal-close:hover {
    border-color: var(--theme-texto);
    color: var(--theme-titulo);
  }
  .modal-badge {
    font-family: 'DM Mono', monospace;
    font-size: 0.563rem;
    letter-spacing: 0.15em;
    border-radius: 0.375rem;
    padding: 0.25rem 0.563rem;
    display: inline-block;
    margin-bottom: 0.875rem;
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    color: var(--theme-accent);
  }
  .modal-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--theme-titulo);
  }
  .modal-section {
    display: flex;
    gap: 0.875rem;
  }
  .modal-icon {
    font-size: 1.125rem;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--theme-fill);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--theme-borde);
  }
  .modal-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.563rem;
    letter-spacing: 0.15em;
    color: var(--theme-texto);
    margin-bottom: 0.313rem;
  }
  .modal-text {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.813rem;
    line-height: 1.65;
    color: var(--theme-texto);
  }
  .modal-divider {
    height: 1px;
    background: var(--theme-borde);
    margin: 1.125rem 0;
    margin-left: 3.125rem;
  }
  .modal-example {
    margin-top: 1.25rem;
    margin-left: 3.125rem;
    padding: 0.875rem 1.125rem;
    border-left: 3px solid var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 5%, transparent);
    border-radius: 0 0.625rem 0.625rem 0;
  }
  .modal-example p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--theme-texto);
    font-style: italic;
  }

  /* ── Responsive ── */
  @media (max-width: 900px) {
    .main-grid {
      grid-template-columns: 1fr;
    }
    .page-header,
    main {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (max-width: 640px) {
    .page-header,
    main {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .sub-grid,
    .bottom-grid {
      grid-template-columns: 1fr;
    }
    .widget-h {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .widget-h-right {
      width: 100%;
      justify-content: space-between;
    }
    .modal-overlay {
      padding: 1rem;
    }
    .modal-box {
      padding: 1.5rem;
    }
    .modal-example,
    .modal-divider {
      margin-left: 0;
    }
  }
</style>