/* ShopList — global shell styles for hybrid iOS/Android web app */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
  background: #FFE6BF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  font-family: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

body.sl-dark { background: #241509; }

#root {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

* { box-sizing: border-box; }

button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
input, textarea { font-family: inherit; -webkit-appearance: none; appearance: none; }

/* Hide scrollbars where we use sl-scroll (móvil) */
.sl-scroll::-webkit-scrollbar { display: none; }
.sl-scroll { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }

/* En desktop con ratón, mostramos un scrollbar fino. Los colores leen
   variables CSS sincronizadas con el tema desde core.jsx. */
@media (hover: hover) and (pointer: fine) {
  .sl-scroll { scrollbar-width: thin; -ms-overflow-style: auto; scrollbar-color: var(--sl-scroll-thumb, rgba(127,127,127,0.45)) transparent; }
  .sl-scroll::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
  .sl-scroll::-webkit-scrollbar-thumb {
    background: var(--sl-scroll-thumb, rgba(127,127,127,0.45));
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .sl-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--sl-scroll-thumb-hover, rgba(127,127,127,0.7));
    background-clip: padding-box;
  }
  .sl-scroll::-webkit-scrollbar-track { background: transparent; }

  /* Scrollbar global del documento (cuando algo se sale del viewport, p.ej.
     desktop con ventana pequeña). */
  html { scrollbar-color: var(--sl-scroll-thumb, rgba(127,127,127,0.45)) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: var(--sl-scroll-thumb, rgba(127,127,127,0.45));
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--sl-scroll-thumb-hover, rgba(127,127,127,0.7));
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* Animations */
@keyframes sl-pop { 0%{transform:scale(.9);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes sl-slide-up { 0%{transform:translateY(8px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes sl-fade { 0%{opacity:0} 100%{opacity:1} }
@keyframes sl-pulse-ring { 0%{box-shadow:0 0 0 0 rgba(244,114,182,0.5)} 100%{box-shadow:0 0 0 18px rgba(244,114,182,0)} }
@keyframes sl-listening { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }
@keyframes sl-confetti { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(var(--tx),var(--ty)) rotate(var(--tr))} }
@keyframes sl-bounce-in { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
@keyframes sl-sweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes sl-stamp {
  0%   { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  55%  { transform: scale(1.35) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(-6deg); opacity: 1; }
}
@keyframes sl-ripple {
  0%   { transform: scale(0);   opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0;    }
}
@keyframes sl-tap-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

.sl-anim-pop { animation: sl-pop .26s cubic-bezier(.2,1.3,.4,1); }
.sl-anim-slide { animation: sl-slide-up .22s ease-out; }
.sl-anim-fade { animation: sl-fade .18s ease-out; }
.sl-anim-bounce { animation: sl-bounce-in .32s cubic-bezier(.2,1.3,.4,1); }
.sl-anim-stamp { animation: sl-stamp .35s cubic-bezier(.2,1.5,.4,1); }
.sl-anim-ripple { animation: sl-ripple .5s cubic-bezier(.2,.9,.3,1) forwards; }
.sl-anim-tap-bounce { animation: sl-tap-bounce .35s cubic-bezier(.2,1.4,.4,1); }
.sl-no-anim, .sl-no-anim * { animation: none !important; transition: none !important; }

/* Material Symbols (Outlined) — la URL solo registra la fuente; necesitamos
   declarar la clase manualmente con su font-family + ligature settings. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', 'Material Icons', system-ui, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Feedback de pulsación destructiva (rosa/danger). Para botones de borrar.
   Usamos !important porque los componentes ponen background/color inline en
   React; sin !important el hover/active no se vería al competir con esos
   inline styles. */
.sl-press:active:not(:disabled) {
  transform: scale(0.88) !important;
  background: rgba(244,114,182,0.18) !important;
  color: #F472B6 !important;
  border-color: rgba(244,114,182,0.45) !important;
}
@media (hover: hover) and (pointer: fine) {
  .sl-press:hover:not(:disabled) {
    background: rgba(244,114,182,0.12) !important;
    color: #F472B6 !important;
    border-color: rgba(244,114,182,0.4) !important;
  }
}

/* Feedback de pulsación neutra. Para acciones no destructivas. */
.sl-press-soft {
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.sl-press-soft:active:not(:disabled) {
  transform: scale(0.88) !important;
  background: rgba(94,234,212,0.18) !important;
  color: #06B6D4 !important;
  border-color: rgba(94,234,212,0.45) !important;
}
@media (hover: hover) and (pointer: fine) {
  .sl-press-soft:hover:not(:disabled) {
    background: rgba(94,234,212,0.12) !important;
    color: #06B6D4 !important;
    border-color: rgba(94,234,212,0.4) !important;
  }
}