/* RM — sistema de movimiento estilo Apple (compartido por todas las paginas).
   Usa las propiedades individuales `scale` / `translate` para no chocar con los `transform` que ya tiene cada pagina.
   Todo va dentro de prefers-reduced-motion: no-preference — quien tenga "reducir movimiento" no ve nada de esto. */

:root{
  --am-spring: cubic-bezier(.34,1.56,.64,1);
  --am-out: cubic-bezier(.16,1,.3,1);
  --am-press: .94;
  --am-over: 1.06;
}

/* ---------- Enlace activo de la barra superior (lo marca el JS de cada pagina con esta clase) ----------
   Vive fuera de la reduced-motion media query porque es un color, no una animacion — se ve tambien con
   "reducir movimiento" activado. El tono en modo noche se aclara en tema-noche.css.
   !important porque cada <a data-rmnav> trae su color en el atributo style= (inline) — sin !important
   un estilo inline le gana a cualquier regla externa sin importar su especificidad, y el texto se quedaba
   en el color oscuro de siempre (#211E1A) sobre el fondo azul, casi invisible. */
#rm-topbar a[data-rmnav].rm-nav-active{ background:#2A4D7A !important; color:#FFFFFF !important; }

@media (prefers-reduced-motion: no-preference){

  /* ---------- Pop-it: se hunde al presionar y rebota al soltar (lo maneja apple-motion.js) ---------- */
  .am-down{ scale: var(--am-press, .94); transition: scale .1s var(--am-out) !important; }
  .am-pop{ animation: am-pop .3s var(--am-spring) !important; }
  @keyframes am-pop{
    0%{ scale: var(--am-press, .94); }
    45%{ scale: var(--am-over, 1.06); }
    100%{ scale: 1; }
  }
  button:active, .btn:active{ transform: none; }

  /* ---------- Ventanas y hojas: aparecen con resorte sobre un fondo esmerilado ---------- */
  .modal-overlay, .swap-overlay{
    animation: am-fade .2s ease backwards;
    -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  }
  .modal-overlay .modal-box, .swap-overlay .swap-sheet{
    animation: am-sheet .35s var(--am-spring) backwards;
  }
  @keyframes am-fade{ from{ opacity: 0; } to{ opacity: 1; } }
  @keyframes am-sheet{
    0%{ opacity: 0; scale: .86; translate: 0 28px; }
    50%{ opacity: 1; }
    100%{ opacity: 1; scale: 1; translate: 0 0; }
  }

  /* ---------- Cambio de pestaña / vista: entra deslizando suave ---------- */
  .view.active, .tab-view.active, .tab-panel.active{ animation: am-view .3s var(--am-out) backwards; }
  @keyframes am-view{
    from{ opacity: 0; translate: 0 16px; scale: .992; }
    to{ opacity: 1; translate: 0 0; scale: 1; }
  }

  /* ---------- Entrada escalonada de tarjetas (la asigna apple-motion.js al cargar) ---------- */
  .am-rise{ animation: am-rise .4s var(--am-spring) backwards; animation-delay: calc(var(--am-i, 0) * 40ms); }
  @keyframes am-rise{
    from{ opacity: 0; translate: 0 24px; scale: .95; }
    to{ opacity: 1; translate: 0 0; scale: 1; }
  }

  /* ---------- Tarjetas y mosaicos clicables: se elevan al pasar el cursor ---------- */
  .order-card, .eq-card, .app-card, a.stat-tile, .stat-tile[data-pay-tile], .stat-tile.credit-tile, .stat-tile[data-invfilter]{
    transition: translate .25s var(--am-spring), box-shadow .2s ease, transform .18s var(--am-out), border-color .15s ease, background .15s ease;
  }
  .order-card:hover, .eq-card:hover, .app-card:hover, a.stat-tile:hover, .stat-tile[data-pay-tile]:hover, .stat-tile.credit-tile:hover, .stat-tile[data-invfilter]:hover{
    translate: 0 -3px; box-shadow: 0 16px 36px rgba(33,30,26,.14);
  }

  /* ---------- Campos: aro de enfoque suave ---------- */
  input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus{
    box-shadow: 0 0 0 4px rgba(42,77,122,.20);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold, #2A4D7A) 22%, transparent);
  }

  /* ---------- Menu desplegable del header: resorte + opciones en cascada ---------- */
  .rmnav-menu{
    transition: opacity .15s ease, transform .25s var(--am-spring), visibility .15s !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  }
  .rmnav-item:hover .rmnav-menu a, .rmnav-item:focus-within .rmnav-menu a{
    animation: am-item .25s var(--am-spring) backwards; animation-delay: calc(var(--am-k, 0) * 25ms);
  }
  .rmnav-menu a:nth-child(1){ --am-k: 0; } .rmnav-menu a:nth-child(2){ --am-k: 1; }
  .rmnav-menu a:nth-child(3){ --am-k: 2; } .rmnav-menu a:nth-child(4){ --am-k: 3; }
  .rmnav-menu a:nth-child(5){ --am-k: 4; } .rmnav-menu a:nth-child(6){ --am-k: 5; }
  .rmnav-menu a:nth-child(7){ --am-k: 6; } .rmnav-menu a:nth-child(8){ --am-k: 7; }
  @keyframes am-item{ from{ opacity: 0; translate: -8px 0; } to{ opacity: 1; translate: 0 0; } }


  /* ---------- Liquid Glass: botones de cristal translucido con brillo especular (estilo iOS 26) ---------- */
  .btn, .btn-gold, .btn-primary, .btn-ghost, .btn-whatsapp, .btn-refacc, .swap-btn, .swap-primary,
  .push-btn, .order-toggle, .ajuste-btn, .box button{
    --lg-tint: var(--gold, #2A4D7A);
    position: relative; isolation: isolate;
    -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,.55);
    background:
      radial-gradient(110px 46px at var(--lx, 50%) var(--ly, -10%), rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
      linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 52%, rgba(255,255,255,.14) 100%),
      color-mix(in srgb, var(--lg-tint) 84%, transparent);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.85),
      inset 0 -1.5px 1px rgba(0,0,0,.10),
      inset 0 0 14px rgba(255,255,255,.22),
      0 8px 22px color-mix(in srgb, var(--lg-tint) 34%, transparent),
      0 1px 3px rgba(0,0,0,.14);
    text-shadow: 0 1px 0 rgba(0,0,0,.14);
    transition: filter .2s ease, box-shadow .25s ease, background-color .2s ease;
  }
  .btn:hover, .btn-gold:hover, .btn-primary:hover, .btn-whatsapp:hover, .btn-refacc:hover, .swap-btn:hover, .swap-primary:hover, .box button:hover{
    filter: brightness(1.06) saturate(1.12);
  }
  /* variantes de tinte */
  .swap-btn, .swap-primary{ --lg-tint: #FFCC00; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
  .btn-refacc.ok{ --lg-tint: #1E8F4E; }
  .btn-refacc.no{ --lg-tint: #C0402A; }
  .btn-whatsapp{ --lg-tint: #22B455; }
  /* cristal neutro (botones secundarios): blanco esmerilado con borde sutil */
  .btn-ghost, .order-toggle, .push-btn, .ajuste-btn{
    --lg-tint: rgba(255,255,255,.55);
    text-shadow: none;
    background:
      radial-gradient(110px 46px at var(--lx, 50%) var(--ly, -10%), rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
      linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.52) 100%);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.95),
      inset 0 -1px 1px rgba(33,30,26,.06),
      0 0 0 1px rgba(33,30,26,.07),
      0 6px 16px rgba(33,30,26,.10);
  }
  .btn-ghost:hover, .order-toggle:hover, .push-btn:hover, .ajuste-btn:hover{ filter: brightness(1.02); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(33,30,26,.10), 0 10px 22px rgba(33,30,26,.14); }
  .btn:disabled, .swap-primary:disabled, .box button:disabled{ filter: grayscale(.4) opacity(.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

  /* ---------- Avisos (toast): rebotan al entrar ---------- */
  .toast{ translate: 0 26px; scale: .9; transition: opacity .18s ease, transform .22s var(--am-spring), translate .35s var(--am-spring), scale .35s var(--am-spring) !important; }
  .toast.show{ translate: 0 0; scale: 1; }
}

/* ---------- Barras de busqueda: mas visibles (lupa, borde marcado, mas altas) ---------- */
#histBuscarCliente, #histBuscar, #inv-buscar, #h-buscar-cliente, #h-buscar-equipo, #cal-filtro, #cr-buscar-cliente, #tallerSearch, #histSearch{
  height:48px; padding:0 16px 0 46px; font-size:15px; font-weight:500;
  border:2px solid rgba(42,77,122,.55); border-radius:14px;
  background-color:#FFFFFF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A4D7A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center; background-size:21px 21px;
  box-shadow:0 4px 14px rgba(42,77,122,.12);
  transition:border-color .18s ease, box-shadow .2s ease;
}
#histBuscarCliente::placeholder, #histBuscar::placeholder, #inv-buscar::placeholder, #h-buscar-cliente::placeholder, #h-buscar-equipo::placeholder,
#cal-filtro::placeholder, #cr-buscar-cliente::placeholder, #tallerSearch::placeholder, #histSearch::placeholder{ color:#7A7062; font-weight:500; opacity:1; }
#histBuscarCliente:focus, #histBuscar:focus, #inv-buscar:focus, #h-buscar-cliente:focus, #h-buscar-equipo:focus,
#cal-filtro:focus, #cr-buscar-cliente:focus, #tallerSearch:focus, #histSearch:focus{
  border-color:#2A4D7A; background-color:#FFFFFF; box-shadow:0 0 0 4px rgba(42,77,122,.22), 0 6px 18px rgba(42,77,122,.18); outline:none;
}
#inv-buscar, #cal-filtro{ min-width:280px; }
@media (max-width:640px){ #inv-buscar, #cal-filtro{ min-width:0; width:100%; max-width:none !important; } }