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

body {
  font-family:
    "Karla",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    sans-serif;
}

h1,
h2,
h3,
.font-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
}

a {
  text-decoration: none;
}

/* Evita desbordes horizontales con Chart.js (canvas 300px por defecto) */
canvas {
  max-width: 100%;
  height: auto;
}

/* ---- Flash (toast) ---- */
.flash-item {
  animation: flash-in 0.35s ease-out;
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Modal de confirmacion ---- */
.modal-overlay {
  animation: fade-in 0.15s ease-out;
}

.modal-panel {
  animation: modal-pop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- Detalles editoriales ---- */
/* Barra de separacion decorativa bajo titulos de seccion (opcional) */
.rule-accent {
  border-top: 3px solid #c2223d;
  width: 2.5rem;
}

/* ---- Accesibilidad (F14) ---- */
:focus-visible {
  outline: 2px solid #c2223d;
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cascada sedes->areas: item marcado cuya sede no esta marcada */
.area-orphan {
  background: #FEF3C7;
  border-radius: 0.5rem;
  padding: 0.15rem 0.4rem;
}

/* ---- Animaciones suaves estilo icevaz (no cambian el diseno) ---- */
@keyframes cevaz-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Entrada suave al cargar (0.5s ease, igual que icevaz).
   backwards: oculto durante el delay; al terminar el transform vuelve
   al estilo normal y el hover controla el levantamiento. */
.reveal {
  animation: cevaz-rise 0.5s ease backwards;
}

.stagger > * {
  animation: cevaz-rise 0.5s ease backwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.06s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.18s; }
.stagger > *:nth-child(4) { animation-delay: 0.24s; }
.stagger > *:nth-child(5) { animation-delay: 0.3s; }
.stagger > *:nth-child(6) { animation-delay: 0.36s; }
.stagger > *:nth-child(7) { animation-delay: 0.42s; }
.stagger > *:nth-child(8) { animation-delay: 0.48s; }

/* Hover de tarjetas: elevacion sutil de icevaz */
.hover-lift {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12, 30, 60, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > * {
    animation-delay: 0ms !important;
  }
}