@charset "UTF-8";
/* ==========================================================================
   4IS Platform — Final Premium "Spark" polish layer
   --------------------------------------------------------------------------
   PURELY ADDITIVE. Loaded after 4is.css on the dark layouts
   (app / public / questionario). No layout, content, colour-system or
   business changes — only subtle entrance, hover, focus and shine refinements.
   Every motion rule is guarded by prefers-reduced-motion.
   Brand accents only: orange (#e8872a) + teal (#2bbfb4).
   ========================================================================== */

/* --- Polish keyframes (namespaced to avoid clashing with 4is.css) -------- */
@keyframes plz-rise {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes plz-btn-shine {
    0%   { transform: translateX(0)    skewX(-18deg); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

/* ==========================================================================
   1. COHESIVE APP PAGE ENTRANCE
   The app `.page-body` never had its own staggered reveal — only the header
   did. This gives every command-center page a clean, softly staggered
   entrance. The existing initPageStagger() JS sets per-child delays; the
   nth-child rules below are a graceful fallback if JS is unavailable.
   ========================================================================== */
.page-body > * {
    animation: plz-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* CSS-only stagger fallback (overridden by inline delays from 4is.js) */
.page-body > *:nth-child(1) { animation-delay: 0.04s; }
.page-body > *:nth-child(2) { animation-delay: 0.12s; }
.page-body > *:nth-child(3) { animation-delay: 0.20s; }
.page-body > *:nth-child(4) { animation-delay: 0.28s; }
.page-body > *:nth-child(5) { animation-delay: 0.36s; }
.page-body > *:nth-child(6) { animation-delay: 0.44s; }
.page-body > *:nth-child(n+7) { animation-delay: 0.50s; }

/* ==========================================================================
   2. RESTRAINED BUTTON SHINE SWEEP
   `.btn` has no existing ::before/::after in 4is.css, so this is collision
   free. Standalone hero/login buttons (.btn-hero, .btn-submit) are NOT .btn,
   so the protected homepage/login visuals stay exactly as they are.
   ========================================================================== */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 100%);
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.btn:hover::after,
.btn:focus-visible::after {
    animation: plz-btn-shine 0.8s ease;
}

/* ==========================================================================
   3. SOFT COMPOSABLE HOVER GLOW
   Uses an additive box-shadow via transition only on transform/filter; the
   glow is layered through a brand-tinted outline that ADDS to (never
   replaces) the card/stat hover shadows already defined in 4is.css.
   ========================================================================== */
.card,
.stat-card,
.kpi-card,
.diag-record,
.feature-card,
.pub-card {
    transition:
        transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        filter 0.28s ease;
}
.card:hover,
.stat-card:hover,
.kpi-card:hover,
.feature-card:hover,
.pub-card:hover {
    filter: brightness(1.025);
}
/* Gentle lift only where the base styles don't already translate the card */
.diag-record[data-record-href]:hover {
    filter: brightness(1.03);
}

/* ==========================================================================
   4. PREMIUM FOCUS-VISIBLE RINGS  (accessibility + polish)
   Excludes .btn (it already defines its own focus style in 4is.css).
   ========================================================================== */
a:focus-visible:not(.btn):not(.btn-entrar):not(.btn-hero),
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible:not(.btn),
[data-row-href]:focus-visible,
[data-record-href]:focus-visible,
tr[data-row-href]:focus-visible {
    outline: 2px solid rgba(43, 191, 180, 0.55);
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(43, 191, 180, 0.12);
}

/* ==========================================================================
   5. MICRO-SMOOTHING
   Slightly smoother default easing on navigation + interactive chips, without
   changing any colour or layout.
   ========================================================================== */
.sidebar-nav a,
.nav-links a,
.user-chip,
.topbar-eco-badge {
    transition: color 0.22s ease, background 0.22s ease,
                box-shadow 0.22s ease, transform 0.22s ease;
}

/* ==========================================================================
   6. HOMEPAGE HERO ENTRANCE  (public/home)
   The hero copy + orbit had infinite ambient motion but no first-paint
   reveal. These rules are CSS-only (run on load, no JS dependency) so the
   content is always visible even if scripting fails. The orbit's internal
   ring/traveler/core animations are NOT touched — only the <svg> wrapper gets
   a single soft fade+scale reveal, so the live orbit can't break.
   ========================================================================== */
@keyframes plz-hero-rise {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes plz-orbit-reveal {
    0%   { opacity: 0; transform: scale(0.93); }
    100% { opacity: 1; transform: scale(1); }
}
.home-v3-copy .hero-badge,
.home-v3-copy .hero-headline,
.home-v3-copy .hero-body,
.home-v3-copy .hero-cta-row {
    animation: plz-hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.home-v3-copy .hero-badge    { animation-delay: 0.08s; }
.home-v3-copy .hero-headline { animation-delay: 0.18s; }
.home-v3-copy .hero-body     { animation-delay: 0.30s; }
.home-v3-copy .hero-cta-row  { animation-delay: 0.42s; }

.home-v3-visual .home-v3-orbit {
    animation: plz-orbit-reveal 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.22s;
}

/* ==========================================================================
   7. LOGIN PAGE ENTRANCE  (auth/login)
   A staggered premium reveal for the split layout. The ambient background
   canvas (#login-bg-canvas) and the fixed decorative arcs / nodes / genome
   are deliberately NOT touched, so the live background keeps animating behind
   everything. CSS-only, so the form is always visible if JS fails.
   ========================================================================== */
@keyframes plz-card-in {
    0%   { opacity: 0; transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1); }
}
.auth-live-page .auth-left-brand,
.auth-live-page .auth-left-content h1,
.auth-live-page .auth-left-content > p,
.auth-live-page .auth-left-footer {
    animation: plz-hero-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auth-live-page .auth-left-brand       { animation-delay: 0.10s; }
.auth-live-page .auth-left-content h1  { animation-delay: 0.20s; }
.auth-live-page .auth-left-content > p { animation-delay: 0.30s; }
.auth-live-page .auth-left-footer      { animation-delay: 0.60s; }

.auth-live-page .auth-feature-card {
    animation: plz-hero-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auth-live-page .auth-feature-card:nth-child(1) { animation-delay: 0.40s; }
.auth-live-page .auth-feature-card:nth-child(2) { animation-delay: 0.48s; }
.auth-live-page .auth-feature-card:nth-child(3) { animation-delay: 0.56s; }
.auth-live-page .auth-feature-card:nth-child(4) { animation-delay: 0.64s; }

/* Right-hand login card: subtle glass-depth fade-in, then inner items rise */
.auth-live-page .auth-card {
    animation: plz-card-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: 0.14s;
}
.auth-live-page .auth-card > * {
    animation: plz-hero-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auth-live-page .auth-card > *:nth-child(1)   { animation-delay: 0.30s; }
.auth-live-page .auth-card > *:nth-child(2)   { animation-delay: 0.38s; }
.auth-live-page .auth-card > *:nth-child(3)   { animation-delay: 0.46s; }
.auth-live-page .auth-card > *:nth-child(4)   { animation-delay: 0.54s; }
.auth-live-page .auth-card > *:nth-child(5)   { animation-delay: 0.62s; }
.auth-live-page .auth-card > *:nth-child(n+6) { animation-delay: 0.70s; }

/* ==========================================================================
   8. LOGGED-IN PAGES — REFINED GLOW & DEPTH
   Uses filter: drop-shadow (NOT box-shadow) so the glow LAYERS ON TOP of the
   rich hover shadows already defined in 4is.css instead of replacing them.
   Brand accents only: teal glow on neutral cards, orange on the active nav.
   ========================================================================== */
.kpi-card:hover,
.stat-card:hover {
    filter: brightness(1.03) drop-shadow(0 8px 18px rgba(43, 191, 180, 0.14));
}
.card:hover,
.diag-record[data-record-href]:hover {
    filter: brightness(1.03) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
}
/* Active sidebar item: gentle brand-orange icon glow for a premium feel */
.sidebar-nav a.active .nav-icon {
    filter: drop-shadow(0 0 6px rgba(232, 135, 42, 0.50));
}
/* Chips / badges feel a touch more alive on hover (transition from §5) */
.user-chip:hover,
.topbar-eco-badge:hover {
    transform: translateY(-1px);
}
/* Smoother focus transitions on form controls */
input,
select,
textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* ==========================================================================
   REDUCED MOTION — keep everything visible, drop all polish motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .page-body > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .btn::after { display: none !important; }
    .btn:hover::after,
    .btn:focus-visible::after { animation: none !important; }
    .card:hover,
    .stat-card:hover,
    .kpi-card:hover,
    .feature-card:hover,
    .pub-card:hover,
    .diag-record[data-record-href]:hover {
        filter: none !important;
    }
    /* §6 / §7 entrance — show content immediately, no motion */
    .home-v3-copy .hero-badge,
    .home-v3-copy .hero-headline,
    .home-v3-copy .hero-body,
    .home-v3-copy .hero-cta-row,
    .home-v3-visual .home-v3-orbit,
    .auth-live-page .auth-left-brand,
    .auth-live-page .auth-left-content h1,
    .auth-live-page .auth-left-content > p,
    .auth-live-page .auth-left-footer,
    .auth-live-page .auth-feature-card,
    .auth-live-page .auth-card,
    .auth-live-page .auth-card > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* §8 — drop the micro hover motion */
    .user-chip:hover,
    .topbar-eco-badge:hover {
        transform: none !important;
    }
}