/* PAFLO — Tema Urban Teal (azul noche + turquesa) — producción */
:root {
    --paflo-accent: #2dd4bf;
    --paflo-accent-2: #14b8a6;
    --paflo-teal: #2dd4bf;
    --paflo-bg: #f8fafc;
    --paflo-surface: #f1f5f9;
    --paflo-text: #0f172a;
    --paflo-nav: rgba(248, 250, 252, 0.97);
    --paflo-footer: linear-gradient(135deg, #0f172a 0%, #134e4a 100%);
    --paflo-btn: #0f172a;
    --paflo-btn-text: #ffffff;
    --paflo-hero-dot: #2dd4bf;
}

html:not(.dark) body {
    background: var(--paflo-bg) !important;
    color: var(--paflo-text) !important;
}

html:not(.dark) nav,
html:not(.dark) header.fixed {
    background: var(--paflo-nav) !important;
    border-color: #e2e8f0 !important;
}

/* Acentos (sustituyen rojo original) */
.text-red-600,
.text-red-500,
.text-red-400,
.hover\:text-red-600:hover,
.nav-cat-btn.text-red-600,
.dark .text-red-600,
.dark .text-red-400,
.dark .text-red-500 {
    color: var(--paflo-accent) !important;
}

.border-red-500,
.border-red-200,
.border-red-900\/40,
.hover\:border-red-500:hover,
.dark .border-red-900 {
    border-color: color-mix(in srgb, var(--paflo-accent) 55%, transparent) !important;
}

.hover\:border-red-500:hover {
    border-color: var(--paflo-accent) !important;
}

.bg-red-500,
.bg-red-600,
.hover\:bg-red-500:hover,
.hover\:bg-red-600:hover,
#cart-badge {
    background: var(--paflo-accent) !important;
}

.hover\:bg-red-500:hover,
.hover\:bg-red-600:hover {
    background: var(--paflo-accent-2) !important;
}

.bg-gradient-to-r.from-red-500,
.bg-gradient-to-r.from-red-500.to-pink-500 {
    background-image: linear-gradient(to right, #14b8a6, #2dd4bf) !important;
}

.from-purple-500 {
    --tw-gradient-from: #0ea5e9 !important;
}

.to-pink-500 {
    --tw-gradient-to: #2dd4bf !important;
}

.from-red-600\/25 {
    --tw-gradient-from: rgb(45 212 191 / 0.25) !important;
}

.text-pafloTeal,
.group-hover\:text-pafloTeal:hover {
    color: var(--paflo-teal) !important;
}

.border-pafloTeal,
.hover\:border-pafloTeal:hover,
.hover\:border-pafloTeal\/60:hover {
    border-color: var(--paflo-teal) !important;
}

.ring-pafloTeal,
.focus-visible\:ring-pafloTeal:focus-visible {
    --tw-ring-color: var(--paflo-teal) !important;
}

.category-pill.active {
    background: var(--paflo-btn) !important;
    color: var(--paflo-btn-text) !important;
}

.dark .category-pill.active {
    background: var(--paflo-accent) !important;
    color: #0f172a !important;
}

.filter-checkbox:checked + label {
    background: var(--paflo-btn) !important;
    color: #fff !important;
    border-color: var(--paflo-btn) !important;
}

.dark .filter-checkbox:checked + label {
    background: var(--paflo-accent) !important;
    color: #0f172a !important;
    border-color: var(--paflo-accent) !important;
}

/* Hero */
.hero-dot.active {
    background: var(--paflo-hero-dot) !important;
}

.hero-grid-bg {
    background-image:
        linear-gradient(120deg, rgba(15, 23, 42, 0.95), rgba(20, 78, 74, 0.5)),
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(45, 212, 191, 0.3), transparent) !important;
}

.hero-red-panel {
    background: linear-gradient(225deg, #0f172a, #134e4a) !important;
}

.hero-brand-panel {
    background: linear-gradient(160deg, #0f172a 0%, #134e4a 40%, #0f172a 100%) !important;
}

.hero-radial-glow {
    background: radial-gradient(ellipse 80% 60% at 50% 15%, rgba(45, 212, 191, 0.35) 0%, transparent 60%) !important;
}

.step-icon-wrap {
    background: rgba(45, 212, 191, 0.2) !important;
}

.dark .step-icon-wrap {
    background: rgba(45, 212, 191, 0.15) !important;
}

footer.bg-gradient-to-br,
footer.bg-gradient-to-br.from-black {
    background: var(--paflo-footer) !important;
}

section.bg-gradient-to-r.from-black {
    border-color: rgba(45, 212, 191, 0.25) !important;
}

/* Carrito / utilidades */
.remove-btn:hover {
    color: var(--paflo-accent) !important;
}

/* Admin login (antes morado/rosa) */
.bg-gradient-to-r.from-purple-500.to-pink-500 {
    background-image: linear-gradient(to right, #0f766e, #2dd4bf) !important;
}
