/* ============================================================
   BarStock Pro — Capa de movimiento (Fase 1)
   ------------------------------------------------------------
   Se carga AL FINAL, despues de todos los demas estilos, para
   que gane sin tener que usar !important en todo.

   Antes el movimiento estaba disperso: app.css definia
   --motion-* y modalRise, y mas abajo volvia a definir lo mismo
   como --dur-* y v30ModalIn, pisandose entre si. Aqui se unifica
   en un solo juego de valores.

   Reglas del sistema:
   - Una sola curva para todo (--bs-ease). La consistencia es lo
     que hace que se sienta producto y no efectos sueltos.
   - Tres duraciones, nunca mas de 340ms.
   - Nada rebota, nada gira, nada llama la atencion sobre si mismo.
   ============================================================ */

:root{
  --bs-ease: cubic-bezier(.22, 1, .36, 1);
  --bs-dur-fast: .16s;
  --bs-dur-med: .24s;
  --bs-dur-slow: .34s;
}

/* ---------- Entradas ---------- */

@keyframes bsRise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

@keyframes bsSlideIn{
  from{ opacity:0; transform:translateX(18px); }
  to  { opacity:1; transform:none; }
}

@keyframes bsPop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to  { opacity:1; transform:none; }
}

/* Cambio de seccion — lo que mas se siente, se ve todo el dia */
.card.section-card.bs-active-section{
  animation: bsRise var(--bs-dur-slow) var(--bs-ease);
}

/* Panel lateral de vendor: sus hijos se recrean en cada render,
   asi que la animacion corre sola cada vez que cambia el contenido */
.vsp-panel-body > *{
  animation: bsSlideIn var(--bs-dur-med) var(--bs-ease);
}

/* Modales — regla unica que reemplaza las dos versiones duplicadas */
.modalbg:not(.hidden) .modal{
  animation: bsPop var(--bs-dur-med) var(--bs-ease);
}

/* El fondo oscuro tambien entra, si no el modal aparece sobre un salto */
.modalbg:not(.hidden){
  animation: bsFadeOnly var(--bs-dur-fast) var(--bs-ease);
}
@keyframes bsFadeOnly{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* ---------- Respuesta al mouse ---------- */

/* Filas de tabla: solo color, sin transform. Mover filas rompe
   los bordes de la tabla y se siente inestable con listas largas. */
tbody tr{
  transition: background-color var(--bs-dur-fast) var(--bs-ease);
}

/* Botones: hundido casi imperceptible al presionar. Es el detalle
   que hace que un boton se sienta fisico. */
button{
  transition: transform var(--bs-dur-fast) var(--bs-ease),
              background-color var(--bs-dur-fast) var(--bs-ease),
              border-color var(--bs-dur-fast) var(--bs-ease),
              opacity var(--bs-dur-fast) var(--bs-ease);
}
button:active:not(:disabled){
  transform: scale(.975);
}

/* ---------- Tabs de navegacion ---------- */

/* Antes el hover y el tab activo se veian identicos (mismo fondo, mismo
   color), asi que no podias distinguir donde estabas parado de donde ibas
   a entrar. Ahora el glow significa una sola cosa: "vas a seleccionar
   este". El activo se queda solido, sin glow. */

.bs-nav-tab{
  position: relative;
  transition: background-color var(--bs-dur-fast) var(--bs-ease),
              color var(--bs-dur-fast) var(--bs-ease),
              box-shadow var(--bs-dur-fast) var(--bs-ease);
}

.bs-nav-tab:hover:not(.active){
  background: rgba(56, 189, 248, .10);
  color: #7dd3fc;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .38),
              0 0 16px rgba(56, 189, 248, .26);
}

/* El activo no brilla: ya llegaste, no hay nada que anticipar */
.bs-nav-tab.active{
  box-shadow: none;
}

/* Al presionar, el glow se contrae. Da la sensacion de que el click
   "aterrizo" en vez de que la pagina cambio sola. */
.bs-nav-tab:active:not(.active){
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .45),
              0 0 6px rgba(56, 189, 248, .30);
}

/* Modo claro: el mismo glow sobre fondo blanco se ve lavado y sucio.
   Se usa un azul mas profundo y menos difuminado. */
body.light .bs-nav-tab:hover:not(.active){
  background: rgba(14, 165, 233, .09);
  color: #0369a1;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, .40),
              0 0 12px rgba(14, 165, 233, .20);
}
body.light .bs-nav-tab:active:not(.active){
  box-shadow: 0 0 0 1px rgba(14, 165, 233, .50),
              0 0 5px rgba(14, 165, 233, .26);
}

/* ---------- Tarjetas del menu principal ---------- */

/* Ya tenian hover (la orilla azul y una subida de 2px), pero sobre la foto
   de fondo era casi invisible. El glow las despega del fondo sea cual sea
   la imagen que tengas puesta. */

.bs-focus-card{
  transition: border-color var(--bs-dur-fast) var(--bs-ease),
              transform var(--bs-dur-fast) var(--bs-ease),
              box-shadow var(--bs-dur-fast) var(--bs-ease),
              background-color var(--bs-dur-fast) var(--bs-ease);
}

.bs-focus-card:hover{
  border-color: rgba(56, 189, 248, .55);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .30),
              0 0 26px rgba(56, 189, 248, .28),
              0 10px 30px rgba(0, 0, 0, .32);
}

/* El icono se enciende junto con la tarjeta */
.bs-focus-card .bs-focus-icon{
  transition: color var(--bs-dur-fast) var(--bs-ease),
              transform var(--bs-dur-fast) var(--bs-ease);
}
.bs-focus-card:hover .bs-focus-icon{
  color: #7dd3fc;
  transform: scale(1.06);
}

/* Al presionar baja de vuelta: se siente como un boton fisico */
.bs-focus-card:active{
  transform: translateY(-1px) scale(.995);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .40),
              0 0 14px rgba(56, 189, 248, .30),
              0 4px 14px rgba(0, 0, 0, .28);
}

/* Modo claro: menos halo, azul mas profundo */
body.light .bs-focus-card:hover{
  border-color: rgba(14, 165, 233, .50);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, .26),
              0 0 20px rgba(14, 165, 233, .18),
              0 10px 26px rgba(15, 23, 42, .14);
}
body.light .bs-focus-card:hover .bs-focus-icon{
  color: #0284c7;
}

.bs-focus-card:focus-visible{
  outline: none;
  border-color: rgba(56, 189, 248, .65);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .50),
              0 0 22px rgba(56, 189, 248, .26);
}

/* Teclado: quien navega con Tab merece la misma pista visual */
.bs-nav-tab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .55),
              0 0 16px rgba(56, 189, 248, .28);
}
body.light .bs-nav-tab:focus-visible{
  box-shadow: 0 0 0 2px rgba(14, 165, 233, .55),
              0 0 12px rgba(14, 165, 233, .22);
}

/* Chips de vendor y pills clickeables */
.vendor-chip,
.oh-filter-chip,
.oh-card-btn{
  transition: background-color var(--bs-dur-fast) var(--bs-ease),
              border-color var(--bs-dur-fast) var(--bs-ease),
              color var(--bs-dur-fast) var(--bs-ease),
              transform var(--bs-dur-fast) var(--bs-ease);
}
.oh-card-btn:active:not(:disabled){
  transform: scale(.94);
}

/* Inputs: el foco aparece en vez de saltar */
input, select, textarea{
  transition: border-color var(--bs-dur-fast) var(--bs-ease),
              background-color var(--bs-dur-fast) var(--bs-ease);
}

/* ---------- Accesibilidad ---------- */

/* Si el sistema pide menos movimiento, se apaga todo.
   No es opcional: hay gente a la que el movimiento le provoca
   mareo, y macOS/iOS tienen ese ajuste. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}