/* ==========================================================================
   Mestreclique · Acompanhamento do lançamento da nova plataforma (Launch.aspx)
   Medidor de estabilidade, trilho das 3 fases, gráfico, diário de bordo e badge da Default.
   ========================================================================== */

/* ------------------------------------------------------------- Painel do topo */
.lch-panel { position: relative; border-radius: 1.75rem; background: linear-gradient(160deg, var(--mc-dark-2), var(--mc-dark)); color: #eef4e0; padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: var(--mc-shadow-lg); overflow: hidden; isolation: isolate; }
.lch-panel::before { content: ""; position: absolute; inset: -30% -25% auto auto; width: 26rem; height: 26rem; border-radius: 9999px; background: radial-gradient(circle, hsl(84 75% 55% / .32), transparent 65%); z-index: -1; }
.lch-gauge { position: relative; width: min(100%, 17rem); aspect-ratio: 1; margin: 1.2rem auto .4rem; }
.lch-gauge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lch-gauge .trk { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 12; }
.lch-gauge .val { fill: none; stroke: url(#lchGrad); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1); }
.lch-gauge .tick { stroke: rgba(255, 255, 255, .16); stroke-width: 2; stroke-linecap: round; transition: stroke .3s; }
.lch-gauge .tick.on { stroke: var(--mc-lime); }
.lch-gauge .unk { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.lch-gauge-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 22%; }
.lch-gauge [data-lch-gauge] { position: absolute; inset: 0; }
.lch-gauge-n { font-size: clamp(2.8rem, 8vw, 3.8rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.lch-gauge-n small { font-size: .45em; font-weight: 700; color: var(--mc-lime); margin-left: .1em; }
.lch-gauge-n.none { font-size: 1.6rem; letter-spacing: 0; color: var(--mc-lime-soft); }
.lch-gauge-cap { text-align: center; margin-top: .2rem; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--mc-lime-soft); line-height: 1.35; }
.lch-trend { display: flex; justify-content: center; margin: .2rem 0 .2rem; min-height: 1.8rem; }
.lch-trend span { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .75rem; border-radius: 9999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: .8rem; font-weight: 600; color: #eef4e0; }
.lch-trend i { color: var(--mc-lime); }
.lch-trend .down i { color: hsl(38 95% 62%); }
.lch-pulse { height: 4.2rem; margin: .6rem -.4rem 0; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lch-pulse svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lch-pulse path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lch-pulse .base { stroke: rgba(255, 255, 255, .13); }
.lch-pulse .sw { stroke: var(--mc-lime); stroke-dasharray: 26 200; stroke-dashoffset: 26; filter: drop-shadow(0 0 5px hsl(84 85% 58% / .9)); animation: lch-sweep 1.6s linear infinite; }
@keyframes lch-sweep { to { stroke-dashoffset: -100; } }
/* o coração: tudo bate ao mesmo ritmo (1,6 s), com o pico quando o traço passa no sobressalto */
.lch-gauge svg { transform-origin: 50% 50%; animation: lch-beat 1.6s ease-out infinite; }
@keyframes lch-beat { 0%, 100% { transform: scale(1); } 33% { transform: scale(1.05); } 42% { transform: scale(1.005); } 50% { transform: scale(1.028); } 62% { transform: scale(1); } }
.lch-gauge .val { animation: lch-glow 1.6s ease-out infinite; }
@keyframes lch-glow { 0%, 100% { filter: drop-shadow(0 0 5px hsl(84 80% 55% / .4)); } 34% { filter: drop-shadow(0 0 20px hsl(84 95% 62% / 1)); } 62% { filter: drop-shadow(0 0 7px hsl(84 80% 55% / .5)); } }
.lch-gauge .tick.on { animation: lch-tick 1.6s ease-out infinite; }
@keyframes lch-tick { 0%, 100% { opacity: .75; } 34% { opacity: 1; } }
.lch-panel::before { animation: lch-aura 1.6s ease-out infinite; }
@keyframes lch-aura { 0%, 100% { opacity: .75; transform: scale(1); } 34% { opacity: 1; transform: scale(1.1); } 62% { opacity: .8; transform: scale(1.02); } }
.lch-panel .mc-ticket-label .mc-live { animation: lch-beat 1.6s ease-out infinite; }
.lch-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px dashed rgba(255, 255, 255, .16); }
@media (max-width: 460px) { .lch-stats { grid-template-columns: 1fr; } }
.lch-stat small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mc-lime-soft); }
.lch-stat b { display: block; margin-top: .25rem; font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; }
.lch-stat b em { font-style: normal; font-size: .75em; font-weight: 600; color: hsl(84 25% 78%); }
.lch-bar { margin-top: .5rem; height: .5rem; border-radius: 9999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.lch-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mc-secondary), var(--mc-lime)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.lch-stat span.sub { display: block; margin-top: .35rem; font-size: .82rem; color: hsl(84 25% 78%); }

/* ------------------------------------------------------------- Trilho das fases */
.lch-track { position: relative; display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .lch-track { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding-top: 2.4rem; } }
.lch-rail { position: absolute; left: 1.425rem; top: 1.4rem; bottom: 1.4rem; width: .45rem; border-radius: 9999px; background: var(--mc-muted); z-index: 0; }
.lch-rail i { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: inherit; background: linear-gradient(180deg, var(--mc-secondary), var(--mc-lime)); transition: height 1.6s cubic-bezier(.2, .8, .2, 1), width 1.6s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 14px hsl(84 70% 50% / .5); }
@media (min-width: 900px) {
    .lch-rail { left: 2rem; right: 2rem; top: .975rem; bottom: auto; width: auto; height: .45rem; }
    .lch-rail i { width: 0; height: 100%; }
}
.lch-phase { position: relative; z-index: 1; background: #fff; border: 1px solid var(--mc-border); border-radius: 1.4rem; padding: 1.4rem 1.4rem 1.5rem 3.6rem; box-shadow: var(--mc-shadow); transition: box-shadow .3s, border-color .3s; }
@media (min-width: 900px) { .lch-phase { padding: 1.5rem; } }
.lch-phase:hover { box-shadow: 0 18px 40px -22px hsl(84 40% 20% / .55); }
.lch-dot { position: absolute; left: .85rem; top: 1.45rem; width: 1.6rem; height: 1.6rem; border-radius: 9999px; background: #fff; border: 4px solid var(--mc-border); display: grid; place-items: center; font-size: .6rem; color: #fff; transition: all .4s; }
@media (min-width: 900px) { .lch-dot { left: 50%; margin-left: -.85rem; top: -2.05rem; width: 1.7rem; height: 1.7rem; } }
.lch-phase.is-done .lch-dot { background: var(--mc-primary); border-color: var(--mc-lime); }
.lch-phase.is-now { border-color: var(--mc-primary); box-shadow: 0 22px 50px -26px hsl(84 40% 20% / .75), 0 0 0 4px hsl(84 55% 55% / .18); }
.lch-phase.is-now .lch-dot { background: var(--mc-lime); border-color: var(--mc-primary); }
.lch-phase.is-now .lch-dot::after { content: ""; position: absolute; inset: -.55rem; border-radius: 9999px; border: 2px solid var(--mc-lime); animation: lch-ping 2s ease-out infinite; }
@keyframes lch-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.lch-phase.is-next { background: var(--mc-soft); }
.lch-phase-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.lch-phase-n { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mc-secondary); }
.lch-state { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: 9999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--mc-muted); color: var(--mc-muted-fg); }
.is-done .lch-state { background: var(--mc-primary); color: var(--mc-lime); }
.is-now .lch-state { background: var(--mc-lime); color: var(--mc-dark); }
.is-now .lch-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--mc-dark); animation: lch-blink 1.4s ease-in-out infinite; }
@keyframes lch-blink { 50% { opacity: .25; } }
.lch-phase h3 { margin-top: .7rem; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--mc-fg); line-height: 1.15; }
.lch-here { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .8rem; font-weight: 700; color: var(--mc-primary); }
.lch-phase p.d { margin-top: .75rem; color: var(--mc-muted-fg); line-height: 1.6; font-size: .95rem; }
.lch-phase-meta { display: grid; gap: .75rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--mc-border); }
.lch-clients { display: flex; align-items: center; gap: .85rem; }
.lch-ring { flex: none; width: 3.4rem; height: 3.4rem; position: relative; }
.lch-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lch-ring circle { fill: none; stroke-width: 6; }
.lch-ring .t { stroke: var(--mc-muted); }
.lch-ring .v { stroke: var(--mc-secondary); stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.is-done .lch-ring .v { stroke: var(--mc-primary); }
.lch-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78rem; color: var(--mc-fg); }
.lch-clients-t b { display: block; color: var(--mc-fg); font-weight: 800; line-height: 1.2; }
.lch-clients-t span { font-size: .85rem; color: var(--mc-muted-fg); }
.lch-when { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; color: var(--mc-fg); }
.lch-when i { color: var(--mc-secondary); width: 1.1rem; text-align: center; }
.lch-goal { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: 1.75rem; padding: .9rem 1.2rem; border-radius: 1rem; background: var(--mc-soft); border: 1px dashed hsl(84 40% 55%); color: var(--mc-fg); font-weight: 600; text-align: center; flex-wrap: wrap; }
.lch-goal i { color: var(--mc-secondary); }

/* ------------------------------------------------------------- Gráfico */
.lch-chart-wrap { position: relative; margin-top: 2rem; padding: 1.2rem 1.2rem .6rem; border-radius: 1.4rem; background: #fff; border: 1px solid var(--mc-border); box-shadow: var(--mc-shadow); }
.lch-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0 .3rem; }
.lch-chart-head b { color: var(--mc-fg); font-weight: 800; }
.lch-chart-head span { font-size: .85rem; color: var(--mc-muted-fg); }
.lch-chart { position: relative; margin-top: .6rem; }
.lch-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.lch-chart .gl { stroke: var(--mc-border); stroke-width: 1; stroke-dasharray: 3 5; }
.lch-chart .al { fill: url(#lchArea); }
.lch-chart .ln { fill: none; stroke: var(--mc-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: lch-draw 1.6s ease forwards; }
@keyframes lch-draw { to { stroke-dashoffset: 0; } }
.lch-chart .pt { fill: #fff; stroke: var(--mc-primary); stroke-width: 3; cursor: pointer; transition: r .2s; }
.lch-chart .pt:hover, .lch-chart .pt:focus { r: 8; outline: none; fill: var(--mc-lime); }
.lch-chart text { font-size: 11px; fill: var(--mc-muted-fg); font-family: inherit; }
.lch-tip { position: absolute; pointer-events: none; transform: translate(-50%, -135%); padding: .35rem .65rem; border-radius: .6rem; background: var(--mc-dark); color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .15s; z-index: 3; }
.lch-tip.on { opacity: 1; }
.lch-empty { padding: 2rem 1rem; text-align: center; color: var(--mc-muted-fg); line-height: 1.6; }
.lch-note { margin-top: 1rem; display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--mc-muted-fg); line-height: 1.6; }
.lch-note i { color: var(--mc-secondary); margin-top: .25rem; }

/* ------------------------------------------------------------- Diário de bordo */
.lch-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.6rem 0 2rem; }
.lch-filter { padding: .45rem 1rem; border-radius: 9999px; border: 1px solid var(--mc-border); background: #fff; font-weight: 600; font-size: .88rem; color: var(--mc-primary-dark); transition: all .2s; display: inline-flex; gap: .45rem; align-items: center; }
.lch-filter small { font-size: .72rem; font-weight: 800; padding: .05rem .4rem; border-radius: 9999px; background: var(--mc-muted); color: var(--mc-muted-fg); }
.lch-filter:hover { background: var(--mc-soft); }
.lch-filter.is-active { background: var(--mc-primary); color: var(--mc-bg); border-color: var(--mc-primary); }
.lch-filter.is-active small { background: rgba(255, 255, 255, .18); color: var(--mc-lime); }
.lch-feed { position: relative; display: grid; gap: 1rem; max-width: 52rem; margin: 0 auto; }
.lch-item { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: start; animation: lch-in .5s ease both; scroll-margin-top: 9rem; }
@keyframes lch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lch-date { text-align: center; padding: .6rem .2rem; border-radius: 1rem; background: var(--mc-primary); color: var(--mc-bg); line-height: 1; box-shadow: var(--mc-shadow); }
.lch-date b { display: block; font-size: 1.7rem; font-weight: 800; }
.lch-date span { display: block; margin-top: .25rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-lime); font-weight: 700; }
.lch-date small { display: block; margin-top: .2rem; font-size: .68rem; color: hsl(84 30% 80%); }
.lch-card { position: relative; background: #fff; border: 1px solid var(--mc-border); border-radius: 1.2rem; padding: 1.2rem 1.35rem; box-shadow: var(--mc-shadow); }
.lch-card::before { content: ""; position: absolute; left: -.55rem; top: 1.35rem; width: 1rem; height: 1rem; background: #fff; border-left: 1px solid var(--mc-border); border-bottom: 1px solid var(--mc-border); transform: rotate(45deg); }
.lch-card:target, .lch-item.hl .lch-card { border-color: var(--mc-secondary); box-shadow: 0 0 0 4px hsl(84 55% 55% / .2), var(--mc-shadow); }
.lch-tags { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.lch-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .6rem; border-radius: 9999px; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: var(--mc-lime); color: var(--mc-dark); }
.lch-tag.melhoria { background: hsl(84 40% 28% / .12); color: var(--mc-primary); }
.lch-tag.correcao { background: hsl(38 95% 88%); color: hsl(30 70% 22%); }
.lch-tag.aviso { background: hsl(0 80% 92%); color: hsl(0 65% 34%); }
.lch-new { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; color: hsl(0 70% 45%); text-transform: uppercase; letter-spacing: .07em; }
.lch-new::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background: hsl(0 75% 52%); animation: lch-blink 1.4s ease-in-out infinite; }
.lch-card h3 { margin-top: .6rem; font-size: 1.2rem; font-weight: 800; color: var(--mc-fg); line-height: 1.3; letter-spacing: -.01em; }
.lch-card p { margin-top: .6rem; color: var(--mc-muted-fg); line-height: 1.7; }
.lch-more { display: flex; justify-content: center; margin-top: 1.5rem; }
@media (max-width: 520px) { .lch-item { grid-template-columns: 3.4rem 1fr; gap: .7rem; } .lch-date b { font-size: 1.35rem; } .lch-card::before { display: none; } }

/* ------------------------------------------------------------- Badge da Default */
.mc-launch-badge { display: inline-flex; align-items: center; gap: .7rem; padding: .3rem .45rem .3rem .3rem; border-radius: 9999px; background: linear-gradient(135deg, var(--mc-dark-2), var(--mc-dark)); border: 1px solid hsl(84 50% 35%); box-shadow: 0 12px 30px -14px hsl(84 40% 10% / .8); color: #eef4e0; transition: transform .3s, box-shadow .3s; max-width: 100%; }
.mc-launch-badge:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -14px hsl(84 40% 10% / .9); }
.mc-launch-badge .rg { position: relative; flex: none; width: 2.6rem; height: 2.6rem; }
.mc-launch-badge .rg svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mc-launch-badge .rg circle { fill: none; stroke-width: 5; }
.mc-launch-badge .rg .t { stroke: rgba(255, 255, 255, .14); }
.mc-launch-badge .rg .v { stroke: var(--mc-lime); stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.mc-launch-badge .rg i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mc-lime); font-size: .85rem; }
.mc-launch-badge .tx { text-align: left; line-height: 1.25; min-width: 0; }
.mc-launch-badge .tx b { display: block; font-size: .92rem; color: #fff; }
.mc-launch-badge .tx small { display: block; font-size: .78rem; color: var(--mc-lime-soft); font-weight: 600; }
.mc-launch-badge .go { flex: none; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(255, 255, 255, .1); color: var(--mc-lime); display: grid; place-items: center; font-size: .8rem; transition: transform .3s; }
.mc-launch-badge:hover .go { transform: translateX(3px); }
@media (max-width: 480px) { .mc-launch-badge .tx small { font-size: .72rem; } }

@media (prefers-reduced-motion: reduce) {
    .lch-pulse svg, .lch-phase.is-now .lch-dot::after, .is-now .lch-state::before, .lch-new::before { animation: none !important; }
    .lch-chart .ln { animation: none; stroke-dashoffset: 0; }
}
@media print { .lch-pulse { display: none; } }

.lch-dur { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; color: var(--mc-fg); }
.lch-dur i { color: var(--mc-secondary); width: 1.1rem; text-align: center; }
@keyframes lch-fade { from { opacity: 0; } to { opacity: 1; } }
.mc-launch-badge .rg { animation: lch-beat 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .lch-gauge svg, .lch-gauge .val, .lch-gauge .tick.on, .lch-panel::before, .lch-panel .mc-ticket-label .mc-live, .mc-launch-badge .rg { animation: none !important; }
    .lch-pulse .sw { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; }
}

.lch-start { display: none; align-items: center; gap: .6rem; margin-top: 1rem; padding: .65rem .85rem; border-radius: .9rem; background: hsl(84 60% 60% / .14); border: 1px solid hsl(84 60% 60% / .35); font-size: .88rem; font-weight: 600; color: #eef4e0; }
.lch-start.on { display: flex; }
.lch-start i { color: var(--mc-lime); }
.lch-start b { color: #fff; }