/* shared/orbit-ui.css
   Capa compartida de accesibilidad + microinteracciones para toda la
   aplicación (Tienda + los 5 paneles internos + páginas standalone).
   No cambia ningún dato ni lógica — solo pule cosas que faltaban en
   TODOS lados a la vez: foco de teclado visible, transiciones suaves y
   consistentes en botones/links/inputs, "prefers-reduced-motion" real,
   y clases reutilizables para estados de carga/vacíos.

   Se carga ANTES del <style> propio de cada página (ver el <link> en el
   <head> de cada .html), así que cualquier regla puntual de esa página
   sigue ganando si define la MISMA propiedad para el MISMO selector —
   esto solo agrega lo que faltaba, nunca fue pensado para pisar nada
   a propósito. Reusa los mismos tokens de color que ya tiene cada
   panel (--accent, --ink, etc.) en vez de inventar una paleta paralela.
*/

:root{
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entradas — fuerte y decidido */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* algo que se mueve en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* cajones/drawers, estilo iOS */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
}

/* ---------- Movimiento respetuoso: más corto y suave, nunca "todo apagado" ---------- */
@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;
  }
  /* Un spinner de carga no es "movimiento molesto", es el único aviso de
     que algo sigue procesando — se lo deja girar a velocidad normal. */
  .oi-spinner{ animation-duration: 0.8s !important; animation-iteration-count: infinite !important; }
}

/* ---------- Foco de teclado visible (accesibilidad real, priority 1) ----------
   Antes casi ningún elemento tenía foco visible al navegar con Tab —
   esto lo resuelve en TODOS los paneles de una sola vez. El click con
   mouse/dedo no muestra el anillo (:focus:not(:focus-visible)); solo
   aparece cuando de verdad hace falta, para quien navega con teclado. */
:focus-visible{
  outline: 2px solid var(--accent, #2F5AFF);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible){ outline: none; }

/* ---------- Feedback sutil en cualquier elemento interactivo real ---------- */
a, input, select, textarea{
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
button{
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
              transform var(--dur-fast) ease;
}
button:not(:disabled):active{ transform: scale(0.97); }

/* Lift sutil opt-in para tarjetas/filas — se agrega a mano donde sirva,
   nunca se aplica solo, para no mover contenido que el usuario está
   leyendo/comparando (tablas de datos, por ejemplo). */
@media (hover:hover) and (pointer:fine){
  .oi-card-hover{ transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .oi-card-hover:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20,21,26,0.10); }
}

/* ---------- Entradas / cambios de vista ---------- */
@keyframes oiFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes oiFadeInUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes oiScaleIn{ from{ opacity:0; transform:scale(0.96); } to{ opacity:1; transform:scale(1); } }
@keyframes oiViewIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes oiSkeletonShimmer{ 0%{ background-position:-200px 0; } 100%{ background-position:calc(200px + 100%) 0; } }
@keyframes oiSpin{ to{ transform:rotate(360deg); } }

.oi-fade-in{ animation: oiFadeIn var(--dur-base) var(--ease-out) both; }
.oi-fade-in-up{ animation: oiFadeInUp var(--dur-base) var(--ease-out) both; }
.oi-scale-in{ animation: oiScaleIn var(--dur-base) var(--ease-out) both; }
.oi-view-in{ animation: oiViewIn var(--dur-base) var(--ease-out) both; }

/* Cambios de sección/pestaña que ya existían en varios paneles (Cadetería,
   Admin → Marketing) — se les suma una entrada sutil sin tocar la lógica
   de mostrar/ocultar que ya tenían. */
.view.active, .dash-view.active, .mkt-fields.active{ animation: oiViewIn var(--dur-base) var(--ease-out) both; }

/* ---------- Estado vacío — mismo criterio que ya usan Admin/Plataforma ---------- */
.empty-state{ animation: oiFadeIn 260ms ease-out both; }

/* ---------- Carga: esqueleto + spinner reutilizables ---------- */
.oi-skeleton{
  background: linear-gradient(90deg, rgba(20,21,26,0.06) 25%, rgba(20,21,26,0.11) 37%, rgba(20,21,26,0.06) 63%);
  background-size: 400% 100%;
  animation: oiSkeletonShimmer 1.4s ease infinite;
  border-radius: 8px;
  color: transparent !important;
}
.oi-spinner{
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(20,21,26,0.15); border-top-color: var(--accent, #2F5AFF);
  animation: oiSpin 0.7s linear infinite;
  display: inline-block; flex-shrink: 0;
}

/* ---------- Scroll más prolijo (Firefox) — cosmético, sin efecto en Chrome/Edge ---------- */
*{ scrollbar-width: thin; }
