/* ==========================================================================
   Codice — hoja de estilos base.
   Estética: manuscrito antiguo (serif, pergamino, dorado) combinado con
   una interfaz limpia y moderna (espaciado generoso, tipografía sans para
   la UI de navegación). Complementa a Tailwind, no lo reemplaza.
   ========================================================================== */

:root {
  --ring-glow: 0 0 0 3px rgba(180, 133, 78, 0.25);
}

html, body {
  height: 100%;
}

/* Textura sutil de "papel" sin depender de imágenes externas */
.parchment-texture {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(180, 133, 78, 0.06), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(47, 93, 98, 0.05), transparent 45%);
}

.serif-heading {
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  letter-spacing: 0.01em;
}

/* ---- Grafo interactivo (SVG/D3) ---------------------------------------- */

#graph-canvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}

#graph-canvas:active {
  cursor: grabbing;
}

.graph-node {
  cursor: pointer;
}

.graph-node-core {
  stroke-width: 2px;
  transition: r 150ms ease;
}

.graph-node-pulse {
  pointer-events: none;
}

.graph-node-image {
  transition: opacity 150ms ease;
}

.graph-node text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: #2c2419;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: #fbf7ee;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.graph-node:hover .graph-node-core {
  r: 13px;
}

.graph-node.is-selected .graph-node-core {
  stroke: #1f1a14;
  stroke-width: 3px;
}

.graph-edge {
  stroke: #c6a06a;
  stroke-width: 1.4px;
  transition: stroke 200ms ease;
}

.graph-edge.is-highlighted {
  stroke: #2f5d62;
  stroke-width: 2px;
}

.graph-edge-flow {
  pointer-events: none;
}

/* Node kind colors, kept in sync with NODE_COLOR in graph.js */
.kind-person  .graph-node-core { fill: #b4854e; stroke: #7a5a30; }
.kind-place   .graph-node-core { fill: #2f5d62; stroke: #1c3a3d; }
.kind-event   .graph-node-core { fill: #7a2e2e; stroke: #521f1f; }
.kind-theme   .graph-node-core { fill: #6a4c93; stroke: #4a3468; }
.kind-book    .graph-node-core { fill: #3d3220; stroke: #241d12; }

/* ---- Panel de detalle (aparición suave al seleccionar un nodo) ---------- */

@keyframes detail-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-detail-in {
  animation: detail-fade-in 260ms ease-out;
}

/* ---- Línea de tiempo ----------------------------------------------------*/

#timeline-track {
  scrollbar-width: thin;
  scrollbar-color: #c6a06a transparent;
}

#timeline-track::-webkit-scrollbar {
  height: 8px;
}
#timeline-track::-webkit-scrollbar-thumb {
  background-color: #c6a06a;
  border-radius: 9999px;
}

.timeline-period {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.timeline-period:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(31, 26, 20, 0.15);
}

/* ---- Focus visibility for accessibility --------------------------------*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring-glow);
}