/*
 * Estilos compartidos de la tienda: home (index.html), fichas de repuestos (repuestos/…)
 * y páginas de service por modelo (service/…). El resto de los estilos es Tailwind.
 */

/* Íconos del sprite img/iconos.svg */
.tp-i { width: 1em; height: 1em; display: inline-block; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; }

/* Resaltado amarillo con texto negro (el amarillo como texto sobre blanco no se lee) */
.tp-marker { background: #FFD100; color: #141413; padding: 0 .2em; border-radius: .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tp-link:hover { text-decoration: underline; text-decoration-color: #FFD100; text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* Avisos breves (por ejemplo, "Agregado al pedido") */
.tp-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
@media (min-width: 768px) { .tp-toasts { bottom: 32px; } }
.tp-toast { pointer-events: auto; background: #141413; color: #fff; border-left: 4px solid #FFD100; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.tp-toast.is-in { opacity: 1; transform: none; }
.tp-toast button { margin-left: auto; color: #FFD100; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; min-height: 32px; }

/* En el celular, ningún campo con letra menor a 16 px: el iPhone hace zoom al tocarlo y la página
   queda agrandada y corrida hacia un costado */
@media (max-width: 767px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Barra fija inferior del celular: respeta la zona del gesto de inicio */
.tp-bottom-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
.tp-has-bottom-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .tp-has-bottom-bar { padding-bottom: 0; } }

/* Aparición al hacer scroll: solo para lo que arranca fuera de la pantalla (lo visible no se oculta nunca) */
.reveal-pending { opacity: 0; transform: translateY(24px); }
.reveal-pending.active { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* Sugerencias del buscador */
.tp-suggest [aria-selected="true"] { background: #FFF6CC; }
.tp-suggest mark { background: #FFE566; color: inherit; border-radius: 2px; }

/* Textos largos de ficha: respetan los saltos de línea de la descripción */
.tp-prose { white-space: pre-line; }

/* Parte de abajo del panel del pedido: deja lugar a la barra de gestos del celular */
.tp-safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); }

/* Filas que se deslizan de costado (destacados y rubros en el celular): sin barra de desplazamiento */
.tp-carrusel { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tp-carrusel::-webkit-scrollbar { display: none; }

/* Atajos de rubro del catálogo: el elegido queda en negro */
.tp-chip { display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 .9rem; border-radius: 9999px; border: 2px solid #dcd8ce; background: #fff; color: #141413; font-weight: 700; font-size: 14px; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.tp-chip:hover { border-color: #141413; }
.tp-chip-n { font-size: 12px; line-height: 1.5; font-weight: 700; padding: 0 .45rem; border-radius: 9999px; background: #efece5; color: #44433f; }
.tp-chip-n:empty { display: none; }
.tp-chip[aria-current="true"] { background: #141413; border-color: #141413; color: #fff; }
.tp-chip[aria-current="true"] .tp-i { color: #FFD100; }
.tp-chip[aria-current="true"] .tp-chip-n { background: #FFD100; color: #141413; }

/* Recorte de títulos a 2 líneas en las tarjetas */
.tp-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .reveal-pending { opacity: 1; transform: none; }
    .animate-marquee, .animate-hop, .progress-bar-anim { animation: none !important; }
    .tp-toast { transition: none; }
}