/* ═══════════════════════════════════════════════════════════════════
   WellCore · Light Theme FINAL
   Concept: Hero Watermark Giant + Dark Inverted Cards
   Bg warm cream #F5F0E6 · Cards dark #0F0F0F islands with color glow
   Scope: html:not(.dark) — solo afecta light mode
   No Tailwind utility needed. Pure CSS.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.dark) {
    /* Tokens base · warm neutral */
    --color-wc-bg: #F5F0E6;
    --color-wc-bg-secondary: #EDE7D8;
    --color-wc-bg-tertiary: #FFFFFF;
    --color-wc-border: #E2DCCC;
}

html:not(.dark) body {
    background-color: #F5F0E6;
}

/* Sin orbs ambientales — fondo cream limpio */

/* Asegurar que contenido va sobre los orbs */
html:not(.dark) main,
html:not(.dark) [wire\:id] {
    position: relative;
    z-index: 1;
}

/* ═════════════════════════════════════════════════════════════
   HERO · Light Clean Card (ref Image #10)
   Card blanco · badge rosa · título negro · watermark "3" rojo claro
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .hp-hero,
html:not(.dark) .wc-hero-premium {
    background: #FFFFFF !important;
    color: #0F0F0F;
    border-radius: 20px;
    border: 1px solid #EDE7D8;
    box-shadow: 0 2px 10px rgba(15, 15, 15, 0.04), 0 1px 3px rgba(15, 15, 15, 0.03);
    overflow: hidden;
    position: relative;
}

/* Watermark decorativo — número/letra gigante rojo claro en esquina derecha */
html:not(.dark) .wc-hero-premium::after,
html:not(.dark) .hp-hero::after {
    content: "3";
    position: absolute;
    right: -0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Bebas Neue", "Barlow", sans-serif;
    font-size: 16rem;
    font-weight: 900;
    line-height: 1;
    color: #FEE2E2;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -0.05em;
}

/* Inner glass container → transparente sobre el card blanco */
html:not(.dark) .wc-hero-premium > div.relative,
html:not(.dark) .hp-hero > div.relative {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Cards internas dentro del hero → transparentes */
html:not(.dark) .hp-hero .rounded-card,
html:not(.dark) .hp-hero .rounded-xl,
html:not(.dark) .wc-hero-premium .rounded-card,
html:not(.dark) .wc-hero-premium .rounded-xl,
html:not(.dark) .hp-hero [class*="bg-wc-bg-tertiary"],
html:not(.dark) .wc-hero-premium [class*="bg-wc-bg-tertiary"] {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Ocultar orbs rojos internos — card queda limpio */
html:not(.dark) .wc-hero-premium .wc-orb-tr,
html:not(.dark) .wc-hero-premium [class*="pointer-events-none"][class*="rounded-full"],
html:not(.dark) .hp-hero .wc-orb-tr,
html:not(.dark) .hp-hero [class*="pointer-events-none"][class*="rounded-full"] {
    display: none !important;
}

/* Título negro bold */
html:not(.dark) .wc-hero-premium h1,
html:not(.dark) .hp-hero h1 {
    color: #0F0F0F !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: none;
    position: relative;
    z-index: 1;
}

/* Quote motivacional gris */
html:not(.dark) .wc-hero-premium p,
html:not(.dark) .hp-hero p {
    color: #6B7280 !important;
    font-style: normal;
    position: relative;
    z-index: 1;
}

/* Icono de comillas más sutil (gris en vez de rojo) */
html:not(.dark) .wc-hero-premium svg.text-wc-accent\/60,
html:not(.dark) .hp-hero svg.text-wc-accent\/60 {
    color: #9CA3AF !important;
}

/* Plan badge → rojo claro + texto rojo (estilo Image #10) */
html:not(.dark) .wc-hero-premium .bg-wc-accent\/10,
html:not(.dark) .hp-hero .bg-wc-accent\/10 {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border: none;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

html:not(.dark) .wc-hero-premium .text-wc-accent,
html:not(.dark) .hp-hero .text-wc-accent {
    color: #DC2626 !important;
}

/* Botón primario (Registrar) — rojo sólido con glow */
html:not(.dark) .wc-hero-premium a.bg-wc-accent,
html:not(.dark) .hp-hero a.bg-wc-accent {
    background: #DC2626 !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35), 0 2px 6px rgba(220, 38, 38, 0.25);
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    font-weight: 700;
    position: relative;
    z-index: 2;
}
html:not(.dark) .wc-hero-premium a.bg-wc-accent:hover,
html:not(.dark) .hp-hero a.bg-wc-accent:hover {
    background: #EF4444 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45), 0 3px 8px rgba(220, 38, 38, 0.3);
}

/* Botón secundario (Check-in) — outline blanco */
html:not(.dark) .wc-hero-premium a[class*="border-wc-border"],
html:not(.dark) .hp-hero a[class*="border-wc-border"] {
    background: #FFFFFF !important;
    color: #0F0F0F !important;
    border: 1px solid #E2DCCC !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-weight: 600;
    position: relative;
    z-index: 2;
}
html:not(.dark) .wc-hero-premium a[class*="border-wc-border"]:hover,
html:not(.dark) .hp-hero a[class*="border-wc-border"]:hover {
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
}

/* ═════════════════════════════════════════════════════════════
   Stats cards · LIGHT CLEAN con TOP accent line por color
   Card blanco · número grande en color accent · label gris
   Specificity boost con .rounded-xl.bg-wc-bg-tertiary para ganarle a la regla glass
   ═════════════════════════════════════════════════════════════ */
html:not(.dark) .sc-r.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-g.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-p.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-a.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .sc-r,
html:not(.dark) .sc-g,
html:not(.dark) .sc-p,
html:not(.dark) .sc-a {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #EDE7D8 !important;
    color: #0F0F0F;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* TOP accent line 3px por color (sin glow fuerte sobre fondo blanco) */
html:not(.dark) .sc-r::before,
html:not(.dark) .sc-g::before,
html:not(.dark) .sc-p::before,
html:not(.dark) .sc-a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
}
html:not(.dark) .sc-r::before { background: #DC2626; }
html:not(.dark) .sc-g::before { background: #10B981; }
html:not(.dark) .sc-p::before { background: #A78BFA; }
html:not(.dark) .sc-a::before { background: #F59E0B; }

/* Hover sutil */
html:not(.dark) .sc-r:hover { box-shadow: 0 6px 20px rgba(220, 38, 38, 0.15); transform: translateY(-2px); }
html:not(.dark) .sc-g:hover { box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15); transform: translateY(-2px); }
html:not(.dark) .sc-p:hover { box-shadow: 0 6px 20px rgba(167, 139, 250, 0.15); transform: translateY(-2px); }
html:not(.dark) .sc-a:hover { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15); transform: translateY(-2px); }

/* Labels (RACHA, CHECK-INS, etc.) gris */
html:not(.dark) .sc-r .text-wc-text,
html:not(.dark) .sc-g .text-wc-text,
html:not(.dark) .sc-p .text-wc-text,
html:not(.dark) .sc-a .text-wc-text { color: #6B7280 !important; }

/* Texto tertiary (dias consecutivos, este mes, XP total) */
html:not(.dark) .sc-r .text-wc-text-tertiary,
html:not(.dark) .sc-g .text-wc-text-tertiary,
html:not(.dark) .sc-p .text-wc-text-tertiary,
html:not(.dark) .sc-a .text-wc-text-tertiary { color: #9CA3AF !important; }

/* Números grandes en color accent sin glow */
html:not(.dark) .sc-r p.font-data { color: #DC2626 !important; text-shadow: none; }
html:not(.dark) .sc-g p.font-data { color: #10B981 !important; text-shadow: none; }
html:not(.dark) .sc-p p.font-data { color: #A78BFA !important; text-shadow: none; }
html:not(.dark) .sc-a p.font-data { color: #F59E0B !important; text-shadow: none; }

/* Icon bg chips suaves */
html:not(.dark) .sc-r .bg-orange-500\/10 { background: #FEE2E2 !important; }
html:not(.dark) .sc-g .bg-emerald-500\/10 { background: #D1FAE5 !important; }
html:not(.dark) .sc-p .bg-violet-500\/10 { background: #EDE9FE !important; }

/* XP progress bar bg */
html:not(.dark) .sc-p .bg-wc-bg-secondary { background: #EDE7D8 !important; }
html:not(.dark) .sc-a svg circle[stroke="var(--color-wc-border)"] { stroke: #E2DCCC !important; }

/* ═════════════════════════════════════════════════════════════
   Coach Card · Light clean con avatar rojo + botón rojo
   ═════════════════════════════════════════════════════════════ */
html:not(.dark) .coach-card.rounded-xl.bg-wc-bg-tertiary,
html:not(.dark) .coach-card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #EDE7D8 !important;
    color: #0F0F0F;
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.04) !important;
}
html:not(.dark) .coach-card p,
html:not(.dark) .coach-card .text-wc-text,
html:not(.dark) .coach-card [class*="text-wc-text"]:not(.text-wc-text-tertiary):not(.text-wc-text-secondary) { color: #0F0F0F !important; }
html:not(.dark) .coach-card .text-wc-text-secondary { color: #6B7280 !important; }
html:not(.dark) .coach-card .text-wc-text-tertiary { color: #9CA3AF !important; }

/* ═════════════════════════════════════════════════════════════
   Misiones diarias · los 4 items a.group.rounded-xl.bg-wc-bg-tertiary
   Completadas → verde claro · Pendientes → blanco limpio
   (el componente debería diferenciar con una clase; si no, todas light)
   ═════════════════════════════════════════════════════════════ */
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary {
    background: #FFFFFF !important;
    border-color: #EDE7D8 !important;
    color: #0F0F0F;
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.04);
}
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:hover {
    background: #F9FAFB !important;
    box-shadow: 0 4px 14px rgba(15, 15, 15, 0.06);
}
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary .text-wc-text { color: #0F0F0F !important; }
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary .text-wc-text-secondary { color: #6B7280 !important; }
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary .text-wc-text-tertiary { color: #9CA3AF !important; }

/* Misiones completadas · tint verde (heurística por svg check verde dentro) */
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:has(.text-emerald-500),
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:has(.text-green-500),
html:not(.dark) a.group.rounded-xl.border.bg-wc-bg-tertiary:has([class*="text-emerald"]) {
    background: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
}

/* ═════════════════════════════════════════════════════════════
   WC-TOPLINE (Quote motivacional) · Glass con accent line lateral ámbar
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .wc-topline {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 220, 204, 0.8) !important;
    position: relative;
    box-shadow: 4px 4px 0 rgba(245, 158, 11, 0.2), 0 2px 8px rgba(0, 0, 0, 0.04);
}

html:not(.dark) .wc-topline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 4px;
    height: auto;
    background: #F59E0B !important;
    box-shadow: none;
}

/* ═════════════════════════════════════════════════════════════
   Plan Alert · Glass con borde rojo prominente
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) [class*="bg-wc-accent/5"] {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    box-shadow: 4px 4px 0 rgba(220, 38, 38, 0.22), 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

html:not(.dark) [class*="bg-wc-accent/5"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    height: auto;
    width: 4px;
    background: #DC2626;
    box-shadow: none;
}

/* ═════════════════════════════════════════════════════════════
   Cards generales · Glass translúcido con borde sutil
   Incluye: Racha calendar, weight chart, coach card, weekly, missions, activity
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .rounded-card.bg-wc-bg-tertiary,
html:not(.dark) .rounded-xl.bg-wc-bg-tertiary {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 220, 204, 0.8) !important;
    box-shadow: 4px 4px 0 rgba(15, 15, 15, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.25s;
}

html:not(.dark) .rounded-card.bg-wc-bg-tertiary:hover,
html:not(.dark) .rounded-xl.bg-wc-bg-tertiary:hover {
    box-shadow: 6px 6px 0 rgba(220, 38, 38, 0.14), 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translate(-2px, -2px);
}

/* ═════════════════════════════════════════════════════════════
   Weight Chart tooltips · fix detección dark
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) canvas {
    /* Chart.js tooltips — ajustar con JS al cargar sería ideal
       Por ahora dejamos el fondo del canvas oscuro para que se vea con el card dark */
}

/* ═════════════════════════════════════════════════════════════
   Quick action links (cuando están fuera del hero)
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) a.bg-wc-accent {
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

/* ═════════════════════════════════════════════════════════════
   WC-GRAIN background en grid stats
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) .wc-grain::after {
    opacity: 0.02 !important;
    mix-blend-mode: multiply;
}

/* ═════════════════════════════════════════════════════════════
   Daily missions grid · Glass translúcido
   ═════════════════════════════════════════════════════════════ */

html:not(.dark) [wire\:loading\.remove] > div.rounded-xl {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 220, 204, 0.8) !important;
    box-shadow: 4px 4px 0 rgba(15, 15, 15, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ═════════════════════════════════════════════════════════════
   Respetar prefers-reduced-motion
   ═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    html:not(.dark) .sc-r,
    html:not(.dark) .sc-g,
    html:not(.dark) .sc-p,
    html:not(.dark) .sc-a,
    html:not(.dark) .hp-hero,
html:not(.dark) .wc-hero-premium a {
        transition: none;
    }
    html:not(.dark) .sc-r:hover,
    html:not(.dark) .sc-g:hover,
    html:not(.dark) .sc-p:hover,
    html:not(.dark) .sc-a:hover,
    html:not(.dark) .hp-hero,
html:not(.dark) .wc-hero-premium a:hover {
        transform: none;
    }
}