/* shared/orbit-ui.css
   Capa compartida de sistema de diseño para las 6 pantallas de ORBIT
   (tienda + los 5 paneles internos) — pensada para EXTENDER los tokens
   de color que cada pantalla ya define en su propio :root (--paper,
   --surface, --ink, --accent, etc.), nunca para pisarlos. Acá viven las
   piezas que faltaban en las 6 por igual: radios/tiempos de animación
   consistentes, foco de teclado visible de verdad, estados de carga
   (antes no existía NINGUNO en toda la aplicación), estados vacíos, y
   feedback táctil de botones — parte de la revisión integral de UX
   pedida explícitamente por el usuario (2026-09-04).

   Se importa DESPUÉS del <link> de fuentes y ANTES del <style> propio de
   cada pantalla, así el :root de cada una puede seguir pisando estos
   valores si alguna vez hace falta un caso especial. */

:root{
  /* Radio consistente — antes solo index.html lo tenía declarado, los
     otros 5 usaban números sueltos repetidos por todos lados. */
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;

  /* Escala de tiempos/curvas real (ver skill "animate") — nunca
     inventar un cubic-bezier suelto, siempre usar uno de estos. */
  --dur-instant:120ms;
  --dur-fast:180ms;
  --dur-base:220ms;
  --dur-slow:400ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- FOCO DE TECLADO — accesibilidad real, no cosmética ----------
   21 lugares del código ya sacaban el anillo nativo (outline:none) sin
   poner nada en su lugar — cualquiera navegando con teclado (Tab) perdía
   por completo la noción de dónde está parado. Esto se aplica con
   !important a propósito: tiene que ganarle a esos outline:none puntuales
   sin tener que rastrearlos uno por uno en 6 archivos de miles de líneas.
   Con el mouse/dedo no se ve nunca (:focus-visible), solo con teclado. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible{
  outline: 2px solid var(--accent, #2F5AFF) !important;
  outline-offset: 2px !important;
}

/* ---------- FEEDBACK DE BOTONES — antes solo el hover daba alguna señal,
   ningún click daba feedback táctil real. 120ms, transform+opacity nada
   más (nunca width/height), gateado a punteros finos para no disparar
   con el dedo en celular. */
@media (hover:hover) and (pointer:fine){
  button:not(:disabled), .btn:not(.disabled), [role="button"]:not(.disabled){
    transition: transform var(--dur-instant) var(--ease-out), opacity var(--dur-instant) var(--ease-out);
  }
  button:not(:disabled):active, .btn:not(.disabled):active, [role="button"]:not(.disabled):active{
    transform: scale(0.97);
  }
}

/* ---------- ESTADOS DE CARGA (skeleton) — no existía ninguno en toda la
   aplicación, la pantalla quedaba en blanco/saltaba mientras algo
   cargaba. Barrido lineal (movimiento constante, no ease) sobre
   background-position — nunca anima layout. */
.skel{
  display:inline-block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--line, #E4E4E1) 25%, color-mix(in srgb, var(--line, #E4E4E1) 50%, var(--surface, #fff)) 50%, var(--line, #E4E4E1) 75%);
  background-size: 200% 100%;
  animation: orbit-skel-sweep 1.4s linear infinite;
}
.skel-text{ height:14px; width:100%; }
.skel-text.short{ width:60%; }
.skel-title{ height:20px; width:40%; }
.skel-avatar{ width:36px; height:36px; border-radius:50%; }
.skel-card{ height:120px; width:100%; border-radius: var(--radius); }
.skel-row{ height:44px; width:100%; }
@keyframes orbit-skel-sweep{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ---------- SPINNER — carga inline con texto (ej. "Cargando pedidos...").
   Antes en admin-panel.html eran 25 lugares con solo texto plano, sin
   ninguna señal visual de que algo está pasando. Movimiento constante →
   linear, nunca ease. */
.spinner{
  display:inline-block; width:22px; height:22px; border-radius:50%;
  border:2.5px solid var(--line, #E4E4E1); border-top-color: var(--accent, #2F5AFF);
  animation: orbit-spin 0.7s linear infinite; flex-shrink:0;
}
@keyframes orbit-spin{ to{ transform:rotate(360deg); } }
.loading-inline{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:60px 0; color:var(--ink-faint,#9799A1); font-size:13px;
}
@media (prefers-reduced-motion: reduce){
  .spinner{ animation-duration: 1.6s; }
}

/* ---------- ESTADOS VACÍOS — patrón único reusable, antes cada pantalla
   (cuando tenía algo) lo resolvía distinto o directamente dejaba un
   espacio en blanco. */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 56px 24px; color: var(--ink-soft, #5B5D66);
}
.empty-state .empty-icon{
  font-size:34px; width:64px; height:64px; border-radius:50%;
  background: var(--accent-soft, #EAEEFF); color: var(--accent, #2F5AFF);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.empty-state h3{
  font-family:'Space Grotesk', sans-serif; font-size:16px; color: var(--ink, #14151A);
  margin-bottom:6px; font-weight:600;
}
.empty-state p{ font-size:13px; line-height:1.5; max-width:320px; }
.empty-state .empty-cta{ margin-top:18px; }

/* ---------- TARJETAS interactivas — leve elevación al pasar el mouse,
   gateado a puntero fino (el dedo en celular no dispara hover falso). */
@media (hover:hover) and (pointer:fine){
  .card-hoverable{ transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
  .card-hoverable:hover{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(20,21,26,0.08), 0 12px 28px rgba(20,21,26,0.08); }
}

/* ---------- Entrada estándar de modales/paneles — fade+scale sutil,
   nunca desde 0, siempre transform+opacity. */
@keyframes orbit-modal-in{
  from{ opacity:0; transform: scale(0.96) translateY(4px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
.modal-anim{ animation: orbit-modal-in var(--dur-base) var(--ease-out); }

/* ---------- Movimiento reducido — se cumple en las 6 pantallas por
   igual desde acá, aunque cada una siga agregando sus propias
   animaciones puntuales (esas deberían respetar esto también). */
@media (prefers-reduced-motion: reduce){
  .skel{ animation-duration: 2.4s; }
  .modal-anim{ animation: none; opacity:1; transform:none; }
  .card-hoverable:hover{ transform:none; }
  *{ scroll-behavior:auto !important; }
}