/* ============================================================================
   █  2. BASE — estructura de la página, menú lateral y componentes shadcn/ui
   ============================================================================
   Aquí están: el reparto de la pantalla, el MENÚ LATERAL y los componentes
   reutilizables (botones, campos de texto), copiados de shadcn/ui.

   ÍNDICE (usa Cmd+F para saltar):
     [1] Reset
     [2] Accesibilidad
     [3] Estructura de la pantalla   ← reparto menú / timeline / panel
     [4] MENÚ LATERAL                ← logo, navegación, buscador, filtros
     [5] Botones y campos (shadcn)
     [6] Barra superior en móvil
     [7] Responsive (tablet y móvil)
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════
   [1] RESET — pone todos los navegadores de acuerdo. No tocar.
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: hsl(var(--foreground));
  background: hsl(var(--page-background));   /* ⭐ fondo gris detrás de los paneles flotantes */
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02","cv03","cv04","cv11";  /* formas de letra más limpias */
}
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
[hidden] { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════
   [2] ACCESIBILIDAD
   El "anillo de foco" de shadcn: un halo suave de 3px (no una línea dura).
   Es lo que ve quien navega con el teclado (tecla Tab).
   ══════════════════════════════════════════════════════════════════════ */
.sr-only {   /* Texto solo para lectores de pantalla: invisible pero audible */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);   /* ← el halo de foco shadcn */
  border-radius: var(--radius-md);
}

/* Enlace "saltar al contenido": aparece al pulsar Tab al inicio */
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500;
  transform: translateY(-200%); transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Los iconos SVG dibujados con líneas heredan el color del texto */
.icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ══════════════════════════════════════════════════════════════════════
   [3] ESTRUCTURA DE LA PANTALLA
   ⭐ Aquí se reparte el ancho: MENÚ | TIMELINE | PANEL DE DETALLE
   Para cambiar el ancho del menú edita --sidebar-w en tokens.css
   ══════════════════════════════════════════════════════════════════════ */
.app {
  display: grid;
  grid-template-columns: clamp(var(--sidebar-min), var(--sidebar-w), var(--sidebar-max)) 1fr;
  gap: var(--gap-outer);              /* ⭐ separación entre paneles flotantes */
  height: 100vh;
  height: 100dvh;
  padding: var(--gap-outer);
  overflow: hidden;
}
/* Cuando se selecciona una estética se añade una tercera columna: el panel */
.app.has-panel {
  grid-template-columns: clamp(var(--sidebar-min), var(--sidebar-w), var(--sidebar-max)) 1fr var(--panel-w);
}


/* ══════════════════════════════════════════════════════════════════════
   [4] MENÚ LATERAL  (componente "Sidebar" de shadcn/ui)
   ══════════════════════════════════════════════════════════════════════ */
/* ⭐ TARJETA FLOTANTE: esquinas redondeadas + sombra, SIN línea de borde.
   Es lo que separa visualmente el menú del resto sin usar líneas duras. */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-5);
  background: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}

/* ── LOGO ───────────────────────────────────────────────────────────
   ⭐ Para hacerlo MÁS GRANDE: sube --logo-max en tokens.css
      (y si hace falta, sube también --sidebar-max)                    */
.sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) 0; }
.brand { display: block; flex: 1; min-width: 0; }
.brand__logo {
  width: 100%;
  max-width: var(--logo-max);
  height: auto;
  color: hsl(var(--foreground));
}

/* ── NAVEGACIÓN (sin iconos, texto grande, SIN recuadro de fondo) ────
   ⭐ Tamaño del texto: --fs-nav en tokens.css
   Estilo minimalista tipo "lista de enlaces": solo cambia de peso/color
   al pasar el ratón o en el enlace activo. Sin fondo, sin borde. */
.nav--grow { flex: 1; }
.nav__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.nav__link {
  display: flex; align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-nav);
  font-weight: 400;
  color: hsl(var(--sidebar-foreground));
  transition: color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.nav__link:hover { color: hsl(var(--foreground)); }
.nav__link.is-current { color: hsl(var(--foreground)); font-weight: 500; }

/* ── BOTÓN DONATE: píldora negra con brillo de color alrededor ──────
   ⭐ Color del brillo: cambia el hue en --donate-glow                */
.btn--donate {
  --donate-glow: 340 82% 52%;   /* rosa/magenta del halo. Prueba 262 (violeta) o 24 (naranja) */
  justify-content: center;
  height: 2.75rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  font-size: var(--fs-sm); font-weight: 500;
  box-shadow: 0 0 0 1px hsl(var(--donate-glow) / 0.5), 0 4px 16px -2px hsl(var(--donate-glow) / 0.45);
}
.btn--donate:hover { background: hsl(var(--primary) / 0.92); }

/* ── BLOQUES DEL MENÚ (Buscador, Filtros, Leyenda) ─────────────────── */
.sidebar__block { display: flex; flex-direction: column; gap: var(--sp-2); }
.sidebar__block--grow { margin-top: auto; }     /* empuja la leyenda hacia abajo */

/* Títulos pequeños en MAYÚSCULAS ("SEARCH", "FILTERS"…) */
.sidebar__h {
  display: flex; align-items: center;
  height: 2rem; padding: 0 var(--sp-3);
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: hsl(var(--sidebar-foreground) / 0.7);
}

/* Filtros con casilla de verificación */
.toggle-row { display: flex; flex-direction: column; gap: 2px; }
.toggle {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: 0 var(--sp-3);
  border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--fs-sm);
  transition: background-color var(--dur-1) var(--ease);
}
.toggle:hover { background: hsl(var(--sidebar-accent)); }
.toggle input { width: 1rem; height: 1rem; accent-color: hsl(var(--primary)); flex: none; cursor: pointer; }

/* Leyenda de tipos de relación */
.legend { display: flex; flex-direction: column; gap: 2px; }
.legend__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 1.75rem; padding: 0 var(--sp-3);
  font-size: var(--fs-sm); color: hsl(var(--muted-foreground));
}
.legend__swatch { width: 32px; height: 10px; flex: none; color: hsl(var(--foreground)); }

/* Pie del menú */
.sidebar__foot { padding: var(--sp-3) var(--sp-3) 0; border-top: 1px solid hsl(var(--sidebar-border)); }
.sidebar__meta { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }


/* ══════════════════════════════════════════════════════════════════════
   [5] BOTONES Y CAMPOS — recetas oficiales de shadcn/ui
   ══════════════════════════════════════════════════════════════════════ */

/* --- BOTÓN (variante "outline" por defecto: borde fino + sombra mínima) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 2.25rem;                 /* 36px = h-9 de shadcn */
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* Variante sólida (fondo negro) — para acciones principales */
.btn--primary {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border-color: transparent; box-shadow: none;
}
.btn--primary:hover { background: hsl(var(--primary) / 0.9); color: hsl(var(--primary-foreground)); }

/* Variante "ghost": sin borde ni fondo hasta pasar el ratón */
.btn--ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn--ghost:hover { background: hsl(var(--accent)); }

/* Botón cuadrado que solo contiene un icono */
.btn--icon { width: 2.25rem; padding: 0; }

/* Botón de icono sin borde (cerrar, menú…) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: var(--radius-md);
  color: hsl(var(--foreground));
  transition: background-color var(--dur-1) var(--ease);
}
.icon-btn:hover { background: hsl(var(--accent)); }
.icon-btn .icon { width: 1.25rem; height: 1.25rem; }

/* --- CAMPO DE TEXTO (Input de shadcn) --- */
.field__input {
  width: 100%; height: 2.25rem;
  padding: 0 var(--sp-3);
  font: inherit; font-size: var(--fs-sm);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field__input::placeholder { color: hsl(var(--muted-foreground)); }


/* ══════════════════════════════════════════════════════════════════════
   [6] BARRA SUPERIOR — solo visible en móvil
   ══════════════════════════════════════════════════════════════════════ */
.topbar { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   [7] RESPONSIVE
   Las "@media" son reglas que solo se aplican según el ancho de pantalla.
   ══════════════════════════════════════════════════════════════════════ */

/* ── TABLET (hasta 1024px): el panel de detalle se superpone ── */
@media (max-width: 1024px) {
  .app.has-panel {
    grid-template-columns: clamp(var(--sidebar-min), var(--sidebar-w), var(--sidebar-max)) 1fr;
  }
  .panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
    box-shadow: var(--shadow-lg);
  }
}

/* ── MÓVIL (hasta 768px): el menú se convierte en un cajón deslizante ── */
@media (max-width: 768px) {
  .app, .app.has-panel { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(86vw, 340px);
    transform: translateX(-100%);
    transition: transform var(--dur-2) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .sidebar__close { display: inline-flex !important; }

  .topbar {
    display: flex; align-items: center; gap: var(--sp-2);
    height: 3.5rem; padding: 0 var(--sp-2);
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--background));
  }
  .topbar__title { font-size: var(--fs-sm); font-weight: 500; }

  .panel { width: 100%; max-width: 100%; }

  /* Fondo oscuro tras el menú abierto */
  .app.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 45;
    background: hsl(var(--foreground) / 0.4);
  }
}