/* =============================================================================
   SIT-Web Design System - Design Tokens
   =============================================================================
   Variables globales reutilizables entre portales. Cada portal mantiene su
   propia paleta de COLORES (ej: --ve-primary, --ap-primary, etc.).
   Este archivo define UNICAMENTE lo transversal: espaciado, radios, duraciones
   de animacion, easing y sombras genericas.

   Uso en CSS:
       padding: var(--ds-space-3);
       border-radius: var(--ds-radius-md);
       transition: transform var(--ds-dur) var(--ds-ease);

   Uso en inline HTML:
       <div style="padding: var(--ds-space-3); gap: var(--ds-space-2);">

   Se carga globalmente via templates/includes/a11y_head.html, asi que toda
   pagina del sistema tiene estas variables disponibles sin import adicional.
   ============================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Espaciado - base 4px, escala consistente con Bootstrap
     ----------------------------------------------------------------------- */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem;    /* 4px  */
  --ds-space-2: 0.5rem;     /* 8px  */
  --ds-space-3: 1rem;       /* 16px */
  --ds-space-4: 1.5rem;     /* 24px */
  --ds-space-5: 2rem;       /* 32px */
  --ds-space-6: 3rem;       /* 48px */

  /* -----------------------------------------------------------------------
     Border radius
     ----------------------------------------------------------------------- */
  --ds-radius-sm: 0.375rem; /* 6px  - botones chicos, inputs */
  --ds-radius-md: 0.5rem;   /* 8px  - cards, modals */
  --ds-radius-lg: 1rem;     /* 16px - hero cards, banners */
  --ds-radius-pill: 50rem;  /* pills, badges redondeados */

  /* -----------------------------------------------------------------------
     Sombras (neutras, sin color). Para sombras con tinte usar las del portal.
     ----------------------------------------------------------------------- */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ds-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --ds-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.18);

  /* -----------------------------------------------------------------------
     Duraciones de animacion - coherentes entre portales
     Regla: 150ms rapido (hovers, toggles), 200ms default, 300ms transiciones largas
     ----------------------------------------------------------------------- */
  --ds-dur-fast: 150ms;
  --ds-dur: 200ms;
  --ds-dur-slow: 300ms;

  /* -----------------------------------------------------------------------
     Easing curves
     ----------------------------------------------------------------------- */
  --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);        /* default: ease-out suave */
  --ds-ease-in: cubic-bezier(0.4, 0, 1, 1);          /* entrada acelerando */
  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);         /* salida desacelerando */
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* both ways */

  /* -----------------------------------------------------------------------
     Z-index layering - evita guerras de z-index entre componentes
     ----------------------------------------------------------------------- */
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1020;
  --ds-z-fixed: 1030;
  --ds-z-offcanvas: 1045;
  --ds-z-modal-backdrop: 1050;
  --ds-z-modal: 1055;
  --ds-z-popover: 1070;
  --ds-z-tooltip: 1080;
  --ds-z-toast: 1090;

  /* -----------------------------------------------------------------------
     Breakpoints (solo referencia - Bootstrap ya los maneja).
     Si haces media queries custom, usalos:
       @media (min-width: 768px) { ... }
     ----------------------------------------------------------------------- */
  --ds-bp-sm: 576px;
  --ds-bp-md: 768px;
  --ds-bp-lg: 992px;
  --ds-bp-xl: 1200px;
  --ds-bp-xxl: 1400px;

  /* -----------------------------------------------------------------------
     Focus ring - accesibilidad (WCAG)
     Cada portal puede override --ds-focus-color con su primary.
     ----------------------------------------------------------------------- */
  --ds-focus-color: rgba(13, 110, 253, 0.4);
  --ds-focus-ring: 0 0 0 0.2rem var(--ds-focus-color);
}

/* =============================================================================
   Respeto a prefers-reduced-motion (WCAG 2.3.3)
   Complementa a11y.css - aca sobreescribe las variables de duracion.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dur-fast: 0.01ms;
    --ds-dur: 0.01ms;
    --ds-dur-slow: 0.01ms;
  }
}

[data-reduce-motion="true"] {
  --ds-dur-fast: 0.01ms;
  --ds-dur: 0.01ms;
  --ds-dur-slow: 0.01ms;
}

/* =============================================================================
   Utility classes opcionales (uso directo en HTML sin escribir CSS)
   Prefijo ds- para no colisionar con Bootstrap.
   ============================================================================= */

/* Transiciones comunes */
.ds-transition { transition: all var(--ds-dur) var(--ds-ease); }
.ds-transition-fast { transition: all var(--ds-dur-fast) var(--ds-ease); }
.ds-transition-slow { transition: all var(--ds-dur-slow) var(--ds-ease); }

/* Sombras */
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }
.ds-shadow-xl { box-shadow: var(--ds-shadow-xl); }

/* Radios */
.ds-radius-sm { border-radius: var(--ds-radius-sm); }
.ds-radius-md { border-radius: var(--ds-radius-md); }
.ds-radius-lg { border-radius: var(--ds-radius-lg); }

/* Microinteracciones comunes */
.ds-interactive {
  transition: transform var(--ds-dur-fast) var(--ds-ease),
              box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.ds-interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md);
}
.ds-interactive:active {
  transform: translateY(0);
  box-shadow: var(--ds-shadow-sm);
}

/* Skeleton loader simple */
@keyframes ds-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ds-skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.5s infinite;
  border-radius: var(--ds-radius-sm);
}

[data-bs-theme="dark"] .ds-skeleton,
[data-theme="dark"] .ds-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
}

/* Visually hidden - para labels de accesibilidad */
.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link focus - para navegacion por teclado */
.ds-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: var(--ds-space-2) var(--ds-space-3);
  z-index: var(--ds-z-toast);
  text-decoration: none;
  transition: top var(--ds-dur-fast) var(--ds-ease);
}
.ds-skip-link:focus {
  top: 0;
}

/* =============================================================================
   View Transitions API - polish progresivo en browsers modernos
   =============================================================================
   Habilita transiciones suaves entre navegaciones same-origin (Chrome 126+).
   En browsers sin soporte se ignora silenciosamente — cero JS, cero fallback.
   Respeta prefers-reduced-motion: usuarios con motion reducido no ven la
   animacion.
   ============================================================================= */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: var(--ds-ease);
}

::view-transition-old(root) {
  animation-name: ds-vt-fade-out;
}
::view-transition-new(root) {
  animation-name: ds-vt-fade-in;
}

@keyframes ds-vt-fade-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes ds-vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Elementos con identidad persistente entre pantallas (hero cards, navbars).
   Agregá la clase correspondiente y el browser anima la continuidad. */
.ds-vt-card {
  view-transition-name: card-hero;
}
.ds-vt-navbar {
  view-transition-name: navbar-main;
}
.ds-vt-title {
  view-transition-name: page-title;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}