<script>
  const clasificadores = [
    {
      slug: "institucional",
      ruta: "/clasificadores/institucional",
      numero: "01",
      nombre: "Institucional",
      titulo: "Quién",
      desc: "Las instituciones que gastan y administran recursos públicos",
      ejemplo: "Ministerios, municipios, YPFB…"
    },
    {
      slug: "objeto-gasto",
      ruta: "/clasificadores/objeto-gasto",
      numero: "02",
      nombre: "Objeto del Gasto",
      titulo: "En qué",
      desc: "La naturaleza del gasto: sueldos, obras, compras",
      ejemplo: "Servicios personales, bienes, inversión…"
    },
    {
      slug: "rubros",
      ruta: "/clasificadores/rubros",
      numero: "03",
      nombre: "Recursos por Rubros",
      titulo: "Cuánto ingresa",
      desc: "Los ingresos del Estado por tipo de recaudación",
      ejemplo: "Impuestos, regalías, tasas…"
    },
    {
      slug: "funcional",
      ruta: "/clasificadores/funcional",
      numero: "04",
      nombre: "Finalidad y Función",
      titulo: "Para qué",
      desc: "El propósito del gasto según funciones del Estado",
      ejemplo: "Salud, Educación, Defensa…"
    },
    {
      slug: "fuente",
      ruta: "/clasificadores/fuente",
      numero: "05",
      nombre: "Fuente de Financiamiento",
      titulo: "De dónde",
      desc: "El origen del dinero que financia cada gasto",
      ejemplo: "Tesoro, IDH, créditos externos…"
    },
    {
      slug: "organismo",
      ruta: "/clasificadores/organismo",
      numero: "06",
      nombre: "Organismo Financiador",
      titulo: "Quién financia",
      desc: "Los organismos detrás de los créditos y donaciones",
      ejemplo: "BID, CAF, Banco Mundial…"
    },
    {
      slug: "sectores",
      ruta: "/clasificadores/sectores",
      numero: "07",
      nombre: "Sector Económico",
      titulo: "Qué sector",
      desc: "Los sectores productivos que activa el gasto",
      ejemplo: "Hidrocarburos, agro, transporte…"
    },
  ];

  </script>

<svelte:head>
  <title>Explorar los datos — 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>

<main class="clasificadores-page">
  <!-- Header de la página -->
  <header class="page-header">
    <!-- Breadcrumb -->
    <nav class="breadcrumb">
      <a href="/" class="breadcrumb-link">← Inicio</a>
    </nav>
    <div class="header-content">
      <h1>Formas de leer el presupuesto</h1>
      <p class="subtitulo">
        Cada ingreso y cada gasto del Estado se registra bajo distintas clasificaciones.
        Aquí puedes explorar los datos según cada una de ellas.
      </p>
    </div>
  </header>

  <!-- Grid de clasificadores -->
  <section class="grid-clasificadores">
    {#each clasificadores as c}
      <a href={c.ruta} class="card">
        <span class="card-meta">
          <span class="card-numero">{c.numero}</span>
          <span class="card-nombre">{c.nombre}</span>
        </span>
        <h2 class="card-titulo">{c.titulo}</h2>
        <p class="card-desc">{c.desc}</p>
        <p class="card-ejemplo">{c.ejemplo}</p>
      </a>
    {/each}
  </section>

  <!-- Footer contextual -->
  <footer class="page-footer">
    <p class="footnote">
      Fuente: SIGMA (Sistema Integrado de Gestión y Modernización Administrativa) y
      SIGEP (Sistema de Gestión Pública) — Ministerio de Economía y Finanzas Públicas.
      Datos desde 2005.
    </p>
  </footer>
</main>

<style>
  .clasificadores-page {
    background: var(--theme-body);
    color: var(--theme-titulo);
    font-family: 'Instrument Sans', sans-serif;
    min-height: 100vh;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
  }

  /* ── Header ── */
  .page-header {
    padding: 1.25rem 0 1.5rem;
    margin-bottom: 1.25rem;
  }

  .breadcrumb {
    margin-bottom: 0.75rem;
  }

  .breadcrumb-link {
    display: inline-block;
    color: var(--theme-texto);
    text-decoration: none;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    transition: color 0.2s;
  }
  .breadcrumb-link:hover {
    color: var(--theme-titulo);
  }

  .label-top {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--theme-texto);
    margin-bottom: 0.5rem;
  }

  h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    color: var(--theme-titulo);
  }

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

  /* ── Masonry Grid ── */
  .grid-clasificadores {
    column-count: 3;
    column-gap: 0.875rem;
    margin-bottom: 1.5rem;
  }

  .card {
    display: block;
    break-inside: avoid;
    margin-bottom: 0.875rem;
    padding: 1.25rem 1.35rem;
    background: var(--theme-surface);
    border-radius: 6px;
    text-decoration: none;
    color: var(--theme-titulo);
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid var(--theme-borde);
  }

  .card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: var(--theme-accent);
  }

  .card:nth-child(1),
  .card:nth-child(5) {
    padding: 1.5rem 1.35rem;
  }

  .card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
  }

  .card-numero {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--theme-accent);
    letter-spacing: 0.05em;
  }

  .card-nombre {
    font-family: 'DM Mono', monospace;
    font-size: 0.6rem;
    color: var(--theme-texto);
    letter-spacing: 0.02em;
    padding-left: 0.4rem;
    border-left: 1px solid var(--theme-borde);
  }

  .card-titulo {
    font-family: 'DM Serif Display', serif;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 0.35rem;
    color: var(--theme-titulo);
    transition: color 0.15s;
  }

  .card:hover .card-titulo {
    color: var(--theme-accent);
  }

  .card-desc {
    font-size: 0.78rem;
    color: var(--theme-texto);
    line-height: 1.45;
    margin-bottom: 0.5rem;
  }

  .card-ejemplo {
    font-size: 0.68rem;
    color: var(--theme-texto);
    opacity: 0.7;
    line-height: 1.4;
  }

  /* ── Footer ── */
  .page-footer {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .page-footer p {
    font-size: 0.75rem;
    color: var(--theme-texto);
  }

  .page-footer a {
    color: var(--theme-texto);
    text-decoration: none;
    border-bottom: 1px solid var(--theme-borde);
    transition: border-color 0.2s, color 0.2s;
  }
  .page-footer a:hover {
    border-color: var(--theme-accent);
    color: var(--theme-titulo);
  }

  .footnote {
    font-family: 'DM Mono', monospace;
    font-size: 0.58rem;
    color: var(--theme-texto);
    opacity: 0.7;
    line-height: 1.5;
  }

  @media (max-width: 900px) {
    .grid-clasificadores {
      column-count: 2;
    }
    .clasificadores-page {
      justify-content: flex-start;
      padding-top: 1rem;
    }
  }

  @media (max-width: 540px) {
    .clasificadores-page {
      padding: 1rem 1rem 1.5rem;
      justify-content: flex-start;
    }
    .grid-clasificadores {
      column-count: 1;
    }
    .card {
      padding: 1rem 1.15rem;
    }
    .card:nth-child(1),
    .card:nth-child(5) {
      padding: 1rem 1.15rem;
    }
    .card-pregunta {
      font-size: 1.1rem;
    }
    h1 { font-size: 1.4rem; }
  }
</style>