/*
 * Droguerías Colombia — Custom CSS v2.0
 * Anthor Web · Sistema de diseño profesional
 *
 * Complementa Tailwind CDN (v3) sin reemplazarlo.
 * Prioridad: contraste WCAG AA, jerarquía tipográfica, consistencia visual.
 * Colores: #0067FF (primary) · #4D52BE (secondary) · #2B2B2B (neutral) · #F38830 (cta)
 * Fuentes: Poppins (UI/títulos) · Montserrat (body/texto)
 */

/* =============================================================================
   1. TOKENS — CSS Custom Properties
   ============================================================================= */

:root {
    /* Colores base */
    --dc-primary:           #0067FF;
    --dc-primary-dark:      #0051CC;
    --dc-primary-darker:    #003D99;
    --dc-primary-light:     #E6F0FF;   /* Reemplaza bg-primary/10 — sólido */
    --dc-primary-muted:     #CCE0FF;   /* Reemplaza bg-primary/20 — sólido */

    --dc-secondary:         #4D52BE;
    --dc-secondary-dark:    #3B3F9A;
    --dc-secondary-light:   #EEEEF8;   /* Reemplaza bg-secondary/10 — sólido */

    --dc-neutral:           #2B2B2B;
    --dc-cta:               #F38830;
    --dc-cta-dark:          #D97320;
    --dc-cta-light:         #FFF3E6;   /* Reemplaza bg-cta/10 — sólido */
    --dc-accent:            #D1264E;

    /* Escala de grises */
    --dc-gray-50:           #F9FAFB;
    --dc-gray-100:          #F3F4F6;
    --dc-gray-200:          #E5E7EB;
    --dc-gray-300:          #D1D5DB;
    --dc-gray-400:          #9CA3AF;
    --dc-gray-500:          #6B7280;
    --dc-gray-600:          #4B5563;
    --dc-gray-700:          #374151;

    /* Texto semántico — todos WCAG AA sobre blanco */
    --text-heading:         #2B2B2B;   /* H1-H3 — ratio 16.1:1 */
    --text-body:            #374151;   /* Body  — ratio 10.7:1 */
    --text-secondary:       #6B7280;   /* Info secundaria — ratio 4.48:1 ✓ */
    --text-muted:           #9CA3AF;   /* Solo metadata — ratio 2.85:1, no usar en contenido clave */

    /* Texto sobre fondos oscuros/de color */
    --text-on-dark:         #FFFFFF;
    --text-on-dark-high:    rgba(255, 255, 255, 0.95);
    --text-on-dark-medium:  rgba(255, 255, 255, 0.85);
    --text-on-dark-low:     rgba(255, 255, 255, 0.70);  /* Mínimo aceptable */

    /* Bordes */
    --dc-border-light:      #E5E7EB;
    --dc-border-medium:     #D1D5DB;
    --dc-border-on-dark:    rgba(255, 255, 255, 0.20);

    /* Sombras */
    --dc-shadow-xs:         0 1px 2px rgba(0,0,0,0.05);
    --dc-shadow-sm:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --dc-shadow-md:         0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --dc-shadow-lg:         0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
    --dc-shadow-primary:    0 4px 14px rgba(0, 103, 255, 0.30);
    --dc-shadow-cta:        0 4px 14px rgba(243, 136, 48, 0.40);

    /* Radios */
    --dc-radius-sm:         0.5rem;
    --dc-radius-md:         0.75rem;
    --dc-radius-lg:         1rem;
    --dc-radius-xl:         1.5rem;
    --dc-radius-2xl:        2rem;

    /* Transiciones */
    --dc-transition:        all 0.2s ease;
    --dc-transition-fast:   all 0.15s ease;
    --dc-transition-slow:   all 0.3s ease;
}

/* =============================================================================
   2. FALLBACK — Colores personalizados de Tailwind CDN
   Si tailwind.config no carga, estas clases nunca generan CSS.
   Este bloque garantiza que siempre tengan el valor correcto.
   Todos con !important para ganar incluso si Tailwind inyecta su <style> después.
   ============================================================================= */

/* Fondos sólidos */
.bg-primary   { background-color: #0067FF !important; }
.bg-secondary { background-color: #4D52BE !important; }
.bg-cta       { background-color: #F38830 !important; }
.bg-neutral   { background-color: #2B2B2B !important; }

/* Hover fondos */
.hover\:bg-primary:hover   { background-color: #0051CC !important; }
.hover\:bg-secondary:hover { background-color: #3B3F9A !important; }
.hover\:bg-cta:hover       { background-color: #D97320 !important; }

/* Colores de texto */
.text-primary   { color: #0067FF !important; }
.text-secondary { color: #4D52BE !important; }
.text-cta       { color: #F38830 !important; }
.text-neutral   { color: #2B2B2B !important; }

/* Hover textos */
.hover\:text-primary:hover   { color: #0051CC !important; }
.hover\:text-secondary:hover { color: #3B3F9A !important; }
.hover\:text-white:hover     { color: #ffffff !important; }

/* Bordes */
.border-primary   { border-color: #0067FF !important; }
.border-secondary { border-color: #4D52BE !important; }
.border-cta       { border-color: #F38830 !important; }

/* Hover bordes */
.hover\:border-primary:hover   { border-color: #0067FF !important; }
.hover\:border-secondary:hover { border-color: #4D52BE !important; }

/*
 * EXCEPCIÓN: el footer override de text-primary → #60A5FA se mantiene porque
 * .dc-footer .text-primary tiene especificidad mayor (0,2,0) y !important propio.
 * El .dc-footer .bg-neutral ya está forzado a #1E293B con !important propio.
 */

/* =============================================================================
   3. RESET / BASE
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    background-color: var(--dc-gray-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Jerarquía tipográfica */
h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    color: var(--text-heading);
    margin: 0;
}

h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0;
}

h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.3;
    color: var(--text-heading);
    margin: 0;
}

h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-heading);
    margin: 0;
}

a {
    color: var(--dc-primary);
    text-decoration: none;
    transition: var(--dc-transition-fast);
}

a:hover {
    color: var(--dc-primary-dark);
}

p { margin: 0; }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   3. UTILIDADES DE TIPOGRAFÍA
   ============================================================================= */

.font-poppins    { font-family: 'Poppins',    sans-serif; }
.font-montserrat { font-family: 'Montserrat', sans-serif; }

.dc-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* =============================================================================
   4. HEADER
   ============================================================================= */

.dc-header {
    position: relative;
    z-index: 100;
}

/* Top bar */
.dc-header__topbar {
    background-color: var(--dc-neutral);
    color: #ffffff;
}

.dc-header__topbar a,
.dc-header__topbar span {
    color: rgba(255, 255, 255, 0.88);
    transition: var(--dc-transition-fast);
}

.dc-header__topbar a:hover {
    color: #ffffff;
}

/* Barra de nav principal — fondo primario sólido */
.dc-header__nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--dc-primary);
    box-shadow: 0 2px 8px rgba(0, 103, 255, 0.30);
}

/*
 * CORRECCIÓN: Links y botones del nav — texto blanco puro.
 * Override de text-white/90 y text-white/80 usados en el HTML.
 * Selectores con especificidad (0,1,1) superan las clases Tailwind (0,1,0).
 */
.dc-header__nav a,
.dc-header__nav button {
    color: #ffffff;
}

.dc-header__nav a:hover,
.dc-header__nav button:hover {
    color: rgba(255, 255, 255, 0.88);
}

/* Logo */
.dc-logo {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.dc-logo:hover {
    color: #ffffff;
    opacity: 0.92;
}

/* Dropdown */
.dc-dropdown:hover .dc-dropdown__menu,
.dc-dropdown__menu:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dc-dropdown__menu {
    transform: translateY(-6px);
    transition: opacity var(--dc-transition), visibility var(--dc-transition), transform var(--dc-transition);
    border: 1px solid var(--dc-gray-200);
    box-shadow: var(--dc-shadow-lg);
}

/* Dropdown items — texto oscuro sobre blanco */
.dc-dropdown__menu a {
    color: var(--dc-neutral);
    padding: 0.5rem 1rem;
    display: block;
    font-size: 0.875rem;
    transition: var(--dc-transition-fast);
}

.dc-dropdown__menu a:hover {
    color: var(--dc-primary);
    background-color: var(--dc-primary-light);
}

/* Menú móvil */
#dc-mobile-menu {
    border-top-color: rgba(255, 255, 255, 0.25);
    background-color: var(--dc-primary);
}

#dc-mobile-menu a {
    color: #ffffff;
    padding: 0.625rem 1rem;
    border-radius: var(--dc-radius-sm);
    display: block;
    transition: var(--dc-transition-fast);
}

#dc-mobile-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* =============================================================================
   5. HERO
   ============================================================================= */

.dc-hero {
    position: relative;
    overflow: hidden;
}

/* Texto del hero — máxima legibilidad */
.dc-hero h1 {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/*
 * CORRECCIÓN: Subtítulo hero — override de text-white/80.
 * Selector (0,1,1) supera la clase Tailwind (0,1,0).
 */
.dc-hero p {
    color: rgba(255, 255, 255, 0.92);
}

/*
 * CORRECCIÓN: Formulario de búsqueda en hero — override de bg-primary/5 y border-primary/10.
 * El fondo transparente se veía deslavado; se reemplaza con blanco sólido.
 * !important justificado: el elemento no tiene clase BEM propia y usa bg-primary/5
 * que genera color hardcodeado en Tailwind CDN.
 */
.dc-hero form {
    background-color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20), 0 8px 20px rgba(0, 103, 255, 0.15) !important;
    border-radius: 1rem;
}

/* Inputs y selects dentro del hero */
.dc-hero input[type="text"],
.dc-hero select {
    background-color: var(--dc-gray-50);
    border: 1px solid var(--dc-gray-200);
    color: var(--dc-neutral);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    border-radius: var(--dc-radius-md);
    transition: var(--dc-transition);
}

.dc-hero input[type="text"]:focus,
.dc-hero select:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 3px rgba(0, 103, 255, 0.15);
    outline: none;
    background-color: #ffffff;
}

/* Botón submit del hero */
.dc-hero button[type="submit"] {
    background-color: var(--dc-cta);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: var(--dc-radius-md);
    transition: var(--dc-transition);
    box-shadow: var(--dc-shadow-cta);
}

.dc-hero button[type="submit"]:hover {
    background-color: var(--dc-cta-dark);
    color: #ffffff;
}

/*
 * CORRECCIÓN: Badge pill "Disponible" en hero — override bg-white/15.
 * Se aumenta ligeramente la opacidad y se fuerza texto blanco.
 */
.dc-hero .rounded-full.border {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}

/* Quick links bajo el formulario */
.dc-hero .flex-wrap > a {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.40);
    transition: var(--dc-transition);
}

.dc-hero .flex-wrap > a:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.65);
    color: #ffffff;
}

/* Alias para el helper de sombra de búsqueda */
.dc-hero__search {
    box-shadow: 0 20px 50px rgba(0, 103, 255, 0.20);
}

/* =============================================================================
   6. CARDS DE DROGUERÍA
   ============================================================================= */

.dc-card {
    background-color: #ffffff;
    border: 1px solid var(--dc-gray-200);
    border-radius: var(--dc-radius-xl);
    overflow: hidden;
    box-shadow: var(--dc-shadow-sm);
    transition: transform var(--dc-transition-slow), box-shadow var(--dc-transition-slow), border-color var(--dc-transition-slow);
    will-change: transform;
    display: flex;
    flex-direction: column;
}

.dc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dc-shadow-lg);
    border-color: rgba(0, 103, 255, 0.28);
}

/* Imagen */
.dc-card__img {
    position: relative;
    overflow: hidden;
}

.dc-card__img img {
    transition: transform 0.5s ease;
}

.dc-card:hover .dc-card__img img {
    transform: scale(1.04);
}

/*
 * CORRECCIÓN: Placeholder de imagen — gradiente transparente reemplazado con sólido.
 * from-primary/10 via-secondary/10 to-primary/5 → colores sólidos equivalentes.
 */
.dc-card__img .bg-gradient-to-br {
    background: linear-gradient(135deg, var(--dc-primary-light) 0%, var(--dc-secondary-light) 100%) !important;
}

/* Cuerpo */
.dc-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Título */
.dc-card__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-heading);
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.dc-card__title a {
    color: inherit;
    transition: var(--dc-transition-fast);
}

.dc-card__title a:hover {
    color: var(--dc-primary);
}

/*
 * CORRECCIÓN: Link de ciudad/taxonomía en cards — text-gray-400 (#9CA3AF) falla WCAG AA.
 * Reemplazado por text-gray-500 (#6B7280) que alcanza ratio 4.48:1.
 */
.dc-card__body .text-gray-400 {
    color: var(--dc-gray-500);
}

/* Dirección */
.dc-card__address {
    font-size: 0.875rem;
    color: var(--dc-gray-500);
    margin-bottom: 1rem;
}

/* Separador · entre taxonomías */
.dc-card .text-gray-300 {
    color: var(--dc-gray-400);
}

/* Badges */
.dc-badge {
    font-size: 0.7rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}

/*
 * CORRECCIÓN: Badge "Cadena" — bg-neutral/80 reemplazado con color sólido.
 * La transparencia sobre imagen causaba fondo indeterminado.
 */
.dc-badge.backdrop-blur-sm,
.dc-card .bg-neutral\/80 {
    background-color: rgba(43, 43, 43, 0.92);
    color: #ffffff;
}

/* Acciones */
.dc-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--dc-gray-100);
}

/* Botón teléfono — borde sólido */
.dc-card__actions a[href^="tel"] {
    border-color: rgba(0, 103, 255, 0.35);
    color: var(--dc-primary);
    transition: var(--dc-transition);
}

.dc-card__actions a[href^="tel"]:hover {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
    color: #ffffff;
}

/* Botón WhatsApp — borde sólido */
.dc-card__actions a[href^="https://wa.me"] {
    border-color: rgba(34, 197, 94, 0.40);
    color: #16a34a;
    transition: var(--dc-transition);
}

.dc-card__actions a[href^="https://wa.me"]:hover {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

/* Rating */
.dc-stars span {
    display: inline-block;
    line-height: 1;
}

/* Line clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================================================
   7. BADGES / TAGS — Fondos sólidos (sin transparencias)
   ============================================================================= */

/*
 * CORRECCIÓN GLOBAL: Reemplaza las variantes /10 de Tailwind con colores sólidos equivalentes.
 * Esto afecta badges de ciudad, zona, destacado, domicilio en single, cards y taxonomías.
 */
.bg-primary\/10  { background-color: var(--dc-primary-light)   !important; }
.bg-primary\/5   { background-color: #EEF5FF                   !important; }
.bg-primary\/20  { background-color: var(--dc-primary-muted)   !important; }
.bg-secondary\/10 { background-color: var(--dc-secondary-light) !important; }
.bg-cta\/10      { background-color: var(--dc-cta-light)       !important; }

/*
 * Excepción: hero y taxonomy page headers usan bg-primary/5 como overlay de patrón (opacity-10),
 * no como badge — esos no quedan afectados por este override porque están en ::before o en divs
 * con position:absolute que tienen su propia clase opacity-X.
 */

/* Bordes de badges — versión más visible */
.border-primary\/20  { border-color: rgba(0, 103, 255, 0.30);  }
.border-primary\/30  { border-color: rgba(0, 103, 255, 0.40);  }
.border-secondary\/20 { border-color: rgba(77, 82, 190, 0.35); }
.border-cta\/20      { border-color: rgba(243, 136, 48, 0.35); }

/* =============================================================================
   8. BOTONES
   ============================================================================= */

.dc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--dc-transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

.dc-btn:focus-visible {
    outline: 2px solid var(--dc-primary);
    outline-offset: 2px;
}

/* Primario — azul sólido */
.dc-btn--primary {
    background-color: var(--dc-primary);
    color: #ffffff;
    padding: 0.625rem 1.25rem;
    border-radius: var(--dc-radius-md);
}

.dc-btn--primary:hover {
    background-color: var(--dc-primary-dark);
    color: #ffffff;
    box-shadow: var(--dc-shadow-primary);
}

/* CTA — naranja sólido con sombra */
.dc-btn--cta {
    background-color: var(--dc-cta);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: var(--dc-radius-md);
    box-shadow: var(--dc-shadow-cta);
}

.dc-btn--cta:hover {
    background-color: var(--dc-cta-dark);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(243, 136, 48, 0.50);
}

/* Outline */
.dc-btn--outline {
    background-color: transparent;
    color: var(--dc-primary);
    border: 1.5px solid var(--dc-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--dc-radius-md);
}

.dc-btn--outline:hover {
    background-color: var(--dc-primary);
    color: #ffffff;
}

/* Unificación del hover azul oscuro para botones Tailwind */
.hover\:bg-blue-700:hover { background-color: var(--dc-primary-dark) !important; }
.hover\:bg-orange-600:hover { background-color: var(--dc-cta-dark) !important; }

/* =============================================================================
   9. FILTROS
   ============================================================================= */

.dc-filters {
    margin-bottom: 1.5rem;
}

.dc-filters label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dc-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dc-filters input[type="text"],
.dc-filters select {
    border: 1px solid var(--dc-gray-200);
    border-radius: var(--dc-radius-sm);
    color: var(--dc-neutral);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    background-color: #ffffff;
    transition: var(--dc-transition);
}

.dc-filters input[type="text"]:focus,
.dc-filters select:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 3px rgba(0, 103, 255, 0.12);
    outline: none;
}

.dc-filters select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2rem;
    appearance: none;
    -webkit-appearance: none;
}

.dc-filters input[type="checkbox"] {
    accent-color: var(--dc-primary);
}

/* =============================================================================
   10. FOOTER
   ============================================================================= */

/*
 * FONDO FORZADO: bg-neutral de Tailwind requiere config personalizada que puede no cargar
 * en el CDN. Se usa !important + valor hex directo para garantizar fondo oscuro siempre.
 * NO se usa herencia de color — cada elemento tiene su color declarado explícitamente.
 */
.dc-footer {
    background-color: #1E293B !important;
}

/* ---- Sección principal --------------------------------------------------- */

.dc-footer__main {
    border-bottom: 1px solid #334155 !important;
    padding-bottom: 0;
}

/* Encabezados de columna — gris claro, nunca blanco */
.dc-footer h3 {
    color: #E2E8F0 !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Párrafos del cuerpo del footer */
.dc-footer__main p {
    color: #94A3B8 !important;
}

/* Todos los links de navegación del footer */
.dc-footer__main a {
    color: #94A3B8 !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

.dc-footer__main a:hover {
    color: #E2E8F0 !important;
}

/* Spans sueltos (bullets, "Un proyecto de", etc.) */
.dc-footer__main span:not([class*="bg-"]):not([class*="text-"]) {
    color: #94A3B8;
}

/*
 * CORRECCIÓN: text-primary en footer (#0067FF sobre #1E293B = ratio 1.55:1 — invisible).
 * Forzado a azul claro #60A5FA (ratio 5.1:1).
 */
.dc-footer__main .text-primary {
    color: #60A5FA !important;
}

/* Logo — "Droguerías" en gris claro, "CO" en naranja */
.dc-footer__main .font-bold {
    color: #E2E8F0 !important;
}

/* Ícono del logo background */
.dc-footer .bg-primary\/30 {
    background-color: #1D4ED8 !important;
}

.dc-footer .bg-primary\/30 span {
    color: #E2E8F0 !important;
}

/* Bloque CTA "¿Tu droguería no aparece?" */
.dc-footer .bg-primary\/20 {
    background-color: #0F172A !important;
    border-color: #334155 !important;
}

.dc-footer .bg-primary\/20 p {
    color: #CBD5E1 !important;
}

/* ---- Footer bottom ------------------------------------------------------- */

.dc-footer__bottom {
    background-color: #0F172A !important;
    border-top: 1px solid #334155;
}

/* Copyright y texto del bottom */
.dc-footer__bottom p {
    color: #64748B !important;
    font-size: 0.75rem;
}

/* Links legales */
.dc-footer__bottom a {
    color: #64748B !important;
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.dc-footer__bottom a:hover {
    color: #94A3B8 !important;
}

/* Span "Hecho con ♥ por Anthor Web" */
.dc-footer__bottom span {
    color: #64748B !important;
}

/* Anthor Web dentro del span — mismo tono */
.dc-footer__bottom span span {
    color: #60A5FA !important;
}

/* =============================================================================
   11. PAGINACIÓN
   ============================================================================= */

.dc-pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

.dc-pagination span { display: inline-block; }

.dc-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.dc-pagination a,
.dc-pagination span.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--dc-radius-sm);
    border: 1px solid var(--dc-gray-200);
    background-color: #ffffff;
    color: var(--dc-neutral);
    transition: var(--dc-transition);
    text-decoration: none;
}

.dc-pagination a:hover {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
    color: #ffffff;
}

.dc-pagination span.current {
    background-color: var(--dc-primary);
    border-color: var(--dc-primary);
    color: #ffffff;
    font-weight: 700;
}

.dc-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--dc-gray-400);
}

/* =============================================================================
   12. BREADCRUMBS
   ============================================================================= */

.dc-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dc-breadcrumbs a {
    color: var(--dc-gray-500);
    transition: var(--dc-transition-fast);
}

.dc-breadcrumbs a:hover {
    color: var(--dc-primary);
}

/* Breadcrumbs sobre fondo de gradiente (taxonomy pages) */
.dc-breadcrumbs--light ol,
.dc-breadcrumbs--light a {
    color: rgba(255, 255, 255, 0.82);
}

.dc-breadcrumbs--light a:hover {
    color: #ffffff;
}

/* =============================================================================
   13. SINGLE DROGUERÍA
   ============================================================================= */

.dc-single__hero {
    position: relative;
    border-radius: var(--dc-radius-xl);
    overflow: hidden;
    box-shadow: var(--dc-shadow-md);
    border: 1px solid var(--dc-gray-200);
}

/*
 * CORRECCIÓN: Sidebar CTA block (bg-primary) — override de text-white/70.
 * Selector (0,2,1): .dc-main aside .bg-primary p/span — supera clase Tailwind.
 */
.dc-main aside .bg-primary p,
.dc-main aside .bg-primary span {
    color: rgba(255, 255, 255, 0.90);
}

/* Labels de info de contacto */
.dc-main dt {
    color: var(--dc-gray-500);
}

.dc-main dd {
    color: var(--dc-neutral);
}

/* Contenido de la descripción */
.dc-content {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--dc-gray-600);
}

.dc-content p + p { margin-top: 1em; }

.dc-content h2,
.dc-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* =============================================================================
   14. TAXONOMY — Encabezados de ciudad/zona
   ============================================================================= */

/*
 * CORRECCIÓN: Texto sobre gradientes en páginas de taxonomía — override de text-white/80.
 * Se usa atributo [style] para apuntar divs con gradiente inline.
 */
[style*="linear-gradient"] p {
    color: rgba(255, 255, 255, 0.92);
}

[style*="linear-gradient"] a {
    color: rgba(255, 255, 255, 0.88);
    transition: var(--dc-transition-fast);
}

[style*="linear-gradient"] a:hover {
    color: #ffffff;
}

/*
 * CORRECCIÓN: Pills de filtro rápido en taxonomy headers — bg-white/15 mejorado.
 */
[style*="linear-gradient"] .bg-white\/15 {
    background-color: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}

[style*="linear-gradient"] .hover\:bg-white\/25:hover {
    background-color: rgba(255, 255, 255, 0.30);
}

/* Zona/ciudad navigation cards */
.dc-zone-card {
    transition: var(--dc-transition);
    border: 1px solid var(--dc-gray-200);
    border-radius: var(--dc-radius-lg);
    background-color: var(--dc-gray-50);
}

.dc-zone-card:hover {
    border-color: var(--dc-primary);
    box-shadow: var(--dc-shadow-md);
}

/*
 * CORRECCIÓN: Contador/badge en zona cards — bg-secondary/10 reemplazado globalmente arriba.
 * Aquí se refuerza el color del texto.
 */
.dc-main .text-secondary {
    color: var(--dc-secondary);
}

/*
 * CORRECCIÓN: group-hover sobre bg-secondary en zona cards — text-white/80.
 */
.group:hover .group-hover\:text-white\/80 {
    color: rgba(255, 255, 255, 0.92);
}

/* =============================================================================
   15. FAQ — details/summary
   ============================================================================= */

.dc-faq {
    border: 1px solid var(--dc-gray-200);
    border-radius: var(--dc-radius-lg);
    overflow: hidden;
    transition: var(--dc-transition);
}

.dc-faq summary {
    user-select: none;
    cursor: pointer;
    background-color: var(--dc-gray-50);
    transition: var(--dc-transition-fast);
}

.dc-faq summary::-webkit-details-marker {
    display: none;
}

.dc-faq summary:hover {
    background-color: var(--dc-primary-light);
}

.dc-faq[open] summary {
    background-color: var(--dc-primary-light);
    color: var(--dc-primary);
}

/* =============================================================================
   16. FORMULARIOS — Focus global
   ============================================================================= */

/*
 * !important justificado: input:focus tiene especificidad (0,0,1) mientras que
 * .focus\:border-primary:focus tiene (0,1,1+pseudo) — necesita !important para ganar.
 */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--dc-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 103, 255, 0.15) !important;
}

/* =============================================================================
   17. ACCESIBILIDAD
   ============================================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background-color: var(--dc-primary);
    color: #ffffff;
    border-radius: var(--dc-radius-sm);
}

*:focus-visible {
    outline: 2px solid var(--dc-primary);
    outline-offset: 2px;
}

/* =============================================================================
   18. RESPONSIVE
   ============================================================================= */

@media (max-width: 640px) {
    .dc-hero {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    .dc-card__actions {
        flex-direction: column;
    }

    .dc-card__actions a,
    .dc-card__actions .dc-btn {
        width: 100%;
        justify-content: center;
    }

    .dc-filters .ml-auto {
        margin-left: 0;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .dc-hero {
        min-height: 480px;
        display: flex;
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .dc-hero {
        min-height: 520px;
    }
}

/* =============================================================================
   19. UTILIDADES EXTRAS
   ============================================================================= */

/* Gradiente de marca */
.dc-gradient-primary {
    background: linear-gradient(135deg, var(--dc-primary) 0%, var(--dc-secondary) 100%);
}

/* Texto gradiente */
.dc-text-gradient {
    background: linear-gradient(90deg, var(--dc-primary), var(--dc-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hover lift */
.dc-hover-lift {
    transition: transform var(--dc-transition), box-shadow var(--dc-transition);
}

.dc-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--dc-shadow-md);
}

/* Pulse */
@keyframes dc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.dc-pulse {
    animation: dc-pulse 2s ease-in-out infinite;
}

/* Skeleton loader */
@keyframes dc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dc-skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: dc-shimmer 1.5s infinite;
    border-radius: var(--dc-radius-sm);
}

/* =============================================================================
   20. PRINT
   ============================================================================= */

@media print {
    .dc-header,
    .dc-footer,
    .dc-filters,
    .dc-card__actions {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .dc-card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
}