/*
 * app.css — Droguería Central BQ · web3
 * CSS plano para lo que Tailwind no resuelve con utilidades (componentes de formulario,
 * esqueletos, tooltips, diálogos). Funciona igual con Tailwind CDN o compilado.
 * Colores: brand #0056CE · accent #06B6D4 · ink #0F1B2D · slate-50 #F8FAFC
 */

html { scroll-behavior: smooth; scroll-padding-top: 9rem; -webkit-text-size-adjust: 100%; }
site-header { display: contents; } /* el header interno puede ser sticky respecto a <body> */
site-footer { display: block; }
[hidden] { display: none !important; }

/* ---------- Foco visible (WCAG 2.4.7) ---------- */
:focus-visible { outline: 3px solid #0056CE; outline-offset: 3px; border-radius: 8px; }
.on-dark :focus-visible, .bg-brand-500 :focus-visible, .bg-brand-900 :focus-visible, .bg-brand-950 :focus-visible { outline-color: #67E8F9; }
#contenido:focus { outline: none; }

/* ---------- Navegación ---------- */
.nav-link[aria-current] { color: #0056CE; }
.nav-link[aria-current]::after { transform: scaleX(1); }
.menu-bar { position: absolute; left: 0; height: 2px; width: 100%; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease; }
[aria-expanded="true"] .menu-bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
[aria-expanded="true"] .menu-bar:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .menu-bar:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
html.lock-scroll { overflow: hidden; }

/* ---------- Campos de formulario ---------- */
.field {
  display: block; width: 100%; margin-top: .4rem; padding: .8rem 1rem;
  border: 0; border-radius: 1rem; background: #fff; color: #0F1B2D; font: inherit;
  box-shadow: inset 0 0 0 1px #E2E8F0; transition: box-shadow .2s ease, background-color .2s ease;
}
.field::placeholder { color: #94A3B8; }
.field:hover { box-shadow: inset 0 0 0 1px #B9D5FF; }
.field:focus { outline: none; box-shadow: inset 0 0 0 2px #0056CE, 0 0 0 4px rgb(6 182 212 / .18); }
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #DC2626; background: #FEF2F2; }
.field[aria-invalid="false"].touched { box-shadow: inset 0 0 0 1.5px #10B981; }
.field-label { display: block; font-weight: 600; color: #0F1B2D; font-size: .92rem; }
.field-error { margin-top: .4rem; font-size: .85rem; font-weight: 500; color: #B91C1C; }
.field-error::before { content: "\f06a"; font: var(--fa-font-solid); margin-right: .375rem; }

/* ---------- Tarjetas de opción (radio) ---------- */
.option-card {
  position: relative; display: flex; align-items: center; gap: .9rem; cursor: pointer; padding: 1rem 1.1rem;
  border-radius: 1.25rem; background: #fff; box-shadow: inset 0 0 0 1px #E2E8F0; transition: all .2s ease;
}
.option-card:hover { box-shadow: inset 0 0 0 1px #86B6FA; }
.option-card:has(:checked) { box-shadow: inset 0 0 0 2px #0056CE, 0 8px 24px -16px rgb(0 86 206 / .5); background: #F5F9FF; }
.option-card:has(:checked)::after {
  content: "\f00c"; font: var(--fa-font-solid); font-size: .65rem; position: absolute; top: .8rem; right: .8rem;
  display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 999px; background: #0056CE; color: #fff;
}
.option-card:has(:focus-visible) { outline: 3px solid #0056CE; outline-offset: 2px; }
.option-card[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

.filter-option {
  display: flex; align-items: center; gap: .75rem; cursor: pointer; padding: .65rem .8rem;
  border-radius: .9rem; box-shadow: inset 0 0 0 1px #E2E8F0; transition: all .15s ease; background: #fff;
}
.filter-option:hover { box-shadow: inset 0 0 0 1px #86B6FA; }
.filter-option:has(input[type="radio"]:checked) { background: #EEF5FF; box-shadow: inset 0 0 0 2px #0056CE; }

.pay-chip { border-radius: .5rem; background: #EEF5FF; padding: .15rem .55rem; font-size: .72rem; font-weight: 700; color: #003E96; }
.pay-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: .6rem; padding: .3rem .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .01em; }

/* Control segmentado */
.segmented label { cursor: pointer; }
.segmented span { display: block; border-radius: 999px; padding: .55rem .75rem; text-align: center; color: #475569; transition: all .2s ease; }
.segmented input:checked + span { background: #fff; color: #0056CE; box-shadow: 0 1px 3px rgb(15 27 45 / .12); }
.segmented input:focus-visible + span { outline: 3px solid #0056CE; outline-offset: 1px; }

/* Interruptor */
.toggle { appearance: none; width: 2.75rem; height: 1.5rem; flex-shrink: 0; border-radius: 999px; background: #CBD5E1; position: relative; cursor: pointer; transition: background-color .2s ease; }
.toggle::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .2s ease; }
.toggle:checked { background: #0056CE; }
.toggle:checked::after { transform: translateX(1.25rem); }

/* Deslizador de precio */
.range { appearance: none; height: 1.5rem; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: .35rem; border-radius: 999px; background: #E2E8F0; }
.range::-moz-range-track { height: .35rem; border-radius: 999px; background: #E2E8F0; }
.range::-webkit-slider-thumb { appearance: none; width: 1.3rem; height: 1.3rem; margin-top: -.475rem; border-radius: 999px; background: #0056CE; border: 3px solid #fff; box-shadow: 0 1px 6px rgb(0 86 206 / .45); }
.range::-moz-range-thumb { width: 1.3rem; height: 1.3rem; border-radius: 999px; background: #0056CE; border: 3px solid #fff; box-shadow: 0 1px 6px rgb(0 86 206 / .45); }

/* ---------- Esqueletos ---------- */
.skeleton-card, .skeleton-line { position: relative; overflow: hidden; background: #EEF2F7; border-radius: 1.5rem; }
.skeleton-card { aspect-ratio: 3 / 4.7; }
.skeleton-line { height: .9rem; border-radius: .5rem; display: block; }
.skeleton-card::after, .skeleton-line::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .75), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- Tooltip ---------- */
.tip:not(.absolute) { position: relative; }
.tip [role="tooltip"] {
  position: absolute; z-index: 20; bottom: calc(100% + .5rem); left: 50%; width: max-content; max-width: 14rem;
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
  border-radius: .6rem; background: #0B2A5C; color: #fff; padding: .45rem .65rem; font-size: .75rem; line-height: 1.35; font-weight: 500; text-align: left;
  transition: opacity .15s ease, transform .15s ease; box-shadow: 0 10px 24px -8px rgb(11 42 92 / .5);
}
.tip [role="tooltip"]::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #0B2A5C; }
.tip:hover [role="tooltip"], .tip:focus-within [role="tooltip"] { opacity: 1; transform: translate(-50%, 0); }
.tip-down [role="tooltip"] { top: calc(100% + .5rem); bottom: auto; left: auto; right: 0; transform: translateY(-4px); }
.tip-down [role="tooltip"]::after { top: auto; bottom: 100%; left: auto; right: .9rem; border-top-color: transparent; border-bottom-color: #0B2A5C; }
.tip-down:hover [role="tooltip"], .tip-down:focus-within [role="tooltip"] { transform: translateY(0); }

/* ---------- Tarjeta de producto ---------- */
.product-card .product-media > * { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-media > .zoom { transform: scale(1.07); }
.add-btn[data-state="added"] { background: #059669 !important; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
input[type="number"].qty::-webkit-inner-spin-button { appearance: none; }
input[type="number"].qty { appearance: textfield; -moz-appearance: textfield; }

/* ---------- Panel de filtros en móvil ---------- */
@media (max-width: 1023px) {
  .filters-panel:not(.is-open) { display: none; }
  .filters-panel.is-open .filters-sheet { animation: sheetIn .3s cubic-bezier(.22,1,.36,1); }
}
@keyframes sheetIn { from { transform: translateX(-100%); } to { transform: none; } }

/* ---------- Diálogos ---------- */
dialog.drawer[open] { animation: drawerIn .38s cubic-bezier(.22,1,.36,1); }
dialog.checkout[open] { animation: popIn .3s cubic-bezier(.22,1,.36,1); }
dialog::backdrop { background: rgb(6 26 61 / .45); backdrop-filter: blur(4px); animation: fadeIn .25s ease-out; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
html:has(dialog[open]) { overflow: hidden; }

[data-step-dot] { color: #94A3B8; }
[data-step-dot][aria-current="step"] { color: #0056CE; font-weight: 700; }
[data-step-dot].done { color: #059669; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Marquee de aliados */
.marquee:hover .animate-marquee, .marquee:focus-within .animate-marquee { animation-play-state: paused; }
[data-count] { font-variant-numeric: tabular-nums; }

/* Acordeón (preguntas frecuentes) */
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-icon { transform: rotate(45deg); }

/* ---------- Movimiento reducido (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .animate-marquee { animation: none !important; transform: none !important; }
  .marquee-dup { display: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; width: 100%; }
  .skeleton-card::after, .skeleton-line::after { animation: none; }
}