/* Extraído de mejoras_core.php (2026-09-25) para que se cachee (assets/web.config, 30d).
   Editar ACÁ; el ?v=filemtime del include invalida la caché del navegador. */
/* ════════════════════════════════════════════════════════════════
   MEJORAS CORE — Salguero20 · Todas las páginas
   ════════════════════════════════════════════════════════════════ */

/* ── 1. MIX BLEND MODE ───────────────────────────────────────── */
.scard-visual img, .scard img, .scard-icon img,
.acceso-icon img, .servicio-icon img, .enlace-icon img,
.categoria-icon img, .item-icon img, .logo-img img,
.brand-logo img, img.png-blend,
img[src$=".png"], img[src$=".PNG"] {
    mix-blend-mode: multiply;
}
[data-theme="dark"] .scard-visual img, [data-theme="dark"] .scard img,
[data-theme="dark"] .scard-icon img, [data-theme="dark"] .acceso-icon img,
[data-theme="dark"] .servicio-icon img, [data-theme="dark"] .enlace-icon img,
[data-theme="dark"] .categoria-icon img, [data-theme="dark"] .item-icon img,
[data-theme="dark"] .logo-img img, [data-theme="dark"] .brand-logo img,
[data-theme="dark"] img.png-blend,
[data-theme="dark"] img[src$=".png"], [data-theme="dark"] img[src$=".PNG"] {
    mix-blend-mode: screen;
}
.avatar img, .foto-perfil img, .profile-img, img.no-blend {
    mix-blend-mode: normal !important;
}

/* ── 2. GLASSMORPHISM HEADER ─────────────────────────────────── */
.app-header, .navbar, .top-bar, header {
    transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.header-scrolled {
    background: color-mix(in srgb, var(--primary, #059669) 75%, transparent) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.25) !important;
}
/* En modo oscuro el header al hacer scroll NO debe teñirse con el color de acento
   (se veía verde y el logo quedaba mal): queda oscuro translúcido, como sin scroll. */
[data-theme="dark"] .header-scrolled {
    background: rgba(10,26,10,.85) !important;
}

/* ── 3. SCROLLBAR SUTIL ──────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary, #059669) 15%, transparent);
    border-radius: 3px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ── 4. TRANSICIÓN ENTRE PÁGINAS ─────────────────────────────── */
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.main-container { animation: page-fade-in .18s ease both; }
.page-exit { animation: page-fade-out .25s ease forwards !important; }
@keyframes page-fade-out {
    to { opacity: 0; transform: translateY(-6px); }
}

/* ── 5. TOAST V3 ─────────────────────────────────────────────── */
.toast-v3 {
    position: fixed; bottom: 80px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: color-mix(in srgb, var(--primary, #059669) 95%, black);
    backdrop-filter: blur(10px); color: #fff;
    padding: 10px 20px 10px 14px; border-radius: 50px;
    font-size: .78rem; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    max-width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.toast-v3.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-v3 .toast-icon { font-size: 1.1rem; flex-shrink: 0; }
@keyframes toast-icon-bounce {
    0%, 100% { transform: scale(1); }
    40%       { transform: scale(1.35) rotate(-8deg); }
}
.toast-v3.show .toast-icon { animation: toast-icon-bounce .5s ease .1s both; }

/* ── 6. CONFETTI ─────────────────────────────────────────────── */
.confetti-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 99999; overflow: hidden;
}
@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg) scaleX(1); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg) scaleX(-1); opacity: 0; }
}
.confetti-piece {
    position: absolute; top: -10px; width: 8px; height: 10px;
    border-radius: 2px; animation: confetti-fall linear forwards;
}

/* ── 7. TAMAÑO DE FUENTE ─────────────────────────────────────── */
:root { --font-scale: 1; }
[data-font-size="small"]  { --font-scale: 0.88; }
[data-font-size="normal"] { --font-scale: 1; }
[data-font-size="large"]  { --font-scale: 1.15; }
[data-font-size="xlarge"] { --font-scale: 1.28; }

.scard-title, .scard-label, .scard-sub, .section-label,
.service-title, .action-card-tall .text,
.action-card-tall .subtitle, .story-user,
.page-header h1, .page-header .subtitle,
.info-note-text, .grilla-card-title,
.saludo-text, .nombre-text, .clima-subtitle {
    font-size: calc(var(--font-scale) * 1em) !important;
}

/* ── 8. REDUCIR MOVIMIENTO ───────────────────────────────────── */
[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
    :root:not([data-reduce-motion="false"]) *,
    :root:not([data-reduce-motion="false"]) *::before,
    :root:not([data-reduce-motion="false"]) *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.1ms !important;
    }
}

/* ── 9. FONDO DECORATIVO ─────────────────────────────────────── */
[data-bg-pattern="dots"] .main-container::before {
    content: ''; position: fixed; inset: 0;
    background-image: radial-gradient(circle, var(--primary, #059669) .5px, transparent .5px);
    background-size: 24px 24px; opacity: .03; pointer-events: none; z-index: -1;
}
[data-bg-pattern="grid"] .main-container::before {
    content: ''; position: fixed; inset: 0;
    background-image:
        linear-gradient(var(--primary, #059669) 1px, transparent 1px),
        linear-gradient(90deg, var(--primary, #059669) 1px, transparent 1px);
    background-size: 40px 40px; opacity: .025; pointer-events: none; z-index: -1;
}
[data-bg-pattern="diagonal"] .main-container::before {
    content: ''; position: fixed; inset: 0;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 20px,
        var(--primary, #059669) 20px, var(--primary, #059669) 21px
    );
    opacity: .02; pointer-events: none; z-index: -1;
}
[data-bg-pattern="none"] .main-container::before { display: none; }

/* ── 10. COUNTER ANIMATIONS ──────────────────────────────────── */
.counter-animate { display: inline-block; transition: transform .15s ease; }
.counter-animate.counting { transform: scale(1.1); }

/* ── 11. DARK MODE — ajustes comunes ─────────────────────────── */
[data-theme="dark"] .section-title { color: #d1fae5; }
[data-theme="dark"] .split-track,
[data-theme="dark"] .carousel-track { background: transparent; }
[data-theme="dark"] .scard { box-shadow: 0 4px 20px rgba(0,0,0,.55); }
[data-theme="dark"] .wave-separator path { fill: #111827; }
[data-theme="dark"] .toast-v3 {
    background: color-mix(in srgb, var(--primary, #059669) 90%, black);
}

/* ── 12. STATUS CHIP ─────────────────────────────────────────── */
.status-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: .6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.status-chip-online { background: rgba(16,185,129,.15); color: #059669; }
.status-chip-online::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: #10b981; animation: online-pulse 2s ease infinite;
}
@keyframes online-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── 13. ACCENT BORDER ───────────────────────────────────────── */
.scard-accent-border { border-left: 3px solid var(--primary, #059669); }