/* MCG Vidraçaria e Esquadrias — ardósia, marfim e madeira. */
:root {
  --canvas:#18272c;
  --surface:#263941;
  --subtle:#2e4249;
  --input:#1b2b31;
  --ink:#f5f4ef;
  --muted:#b4c3cf;
  --accent:#e8bb95;
  --brand-red:#87563c;
  --accent-hover:#a56d4d;
  --stroke:#304350;
  --strong-stroke:#537286;
  --button:#1a2b39;
  --hover:#243d4e;
  --tint:#213647;
  --header:#101923f5;
  --nav-bg:#111d28;
  --nav-active:#273b4a;
  --nav-selected:#f6d2b2;
  --nav-active-stroke:#7a694b;
  --mcg-ease:cubic-bezier(.2,.75,.24,1);
}
html body.mv-design {
  background:radial-gradient(ellipse at 78% 0,#253748 0,transparent 48%),var(--canvas)!important;
}
html body.mv-design #app>.design-header {
  border-bottom:1px solid #40515c;
  box-shadow:0 8px 22px #0003;
}
html body.mv-design #app>#nav {
  border-color:var(--stroke)!important;
}
html body.mv-design #app #nav button.on {
  color:#f6d2b2!important;
  background:#293642!important;
  border-color:#89634d!important;
}
body.mv-design #nav button svg { color:#a6bccd }
body.mv-design #nav button.on svg { color:#efca83 }
body.mv-design .design-pagehead h1 { letter-spacing:-.045em; font-weight:730 }
body.mv-design .design-pagehead .design-eyebrow { color:#e8bb95 }
html body.mv-design #app .design-hero {
  min-height:360px!important;
  padding:0!important;
  grid-template-columns:minmax(0,1fr) minmax(0,47%);
  gap:0;
  align-items:stretch;
  border:1px solid #465561!important;
  border-radius:22px!important;
  background:linear-gradient(125deg,#182b3a,#101b25 67%,#101923)!important;
  box-shadow:0 22px 45px #0004;
}
body.mv-design .design-hero-copy {
  padding:clamp(28px,4.6vw,66px);
  align-self:center;
}
html body.mv-design #app .design-hero .design-eyebrow {
  color:#e8bb95!important;
  letter-spacing:.14em;
}
html body.mv-design #app .design-hero h2 {
  font-family:Georgia,serif;
  font-size:clamp(35px,4vw,65px)!important;
  line-height:1.03!important;
  color:#fcf7ed!important;
}
html body.mv-design #app .design-hero p {
  color:#c2d1db!important;
  font-size:clamp(14px,1.5vw,16px)!important;
  font-weight:500!important;
}
body.mv-design .design-hero .design-glass {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:0;
}
html body.mv-design .design-hero .design-facade {
  border:0;
  border-radius:0;
  min-height:100%;
  box-shadow:none;
}
body.mv-design .design-facade img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
body.mv-design .design-facade:after {
  background:linear-gradient(90deg,#101b25 0%,transparent 24%),linear-gradient(0deg,#09121be8,transparent 42%);
}
body.mv-design .design-facade figcaption { left:clamp(22px,4vw,56px); bottom:25px; color:#f2c9a7 }
html body.mv-design[data-design=prisma] #app .design-hero .design-actions button.p,
html body.design-login .enter {
  background:linear-gradient(130deg,#f4d3b5,#d5a17b)!important;
  border-color:#e6b892!important;
  color:#19212a!important;
  box-shadow:0 5px 18px #cfaa5b25;
}
body.mv-design #cards .card,
body.mv-design .mcg-service-card {
  background:linear-gradient(155deg,#1c2b37,#121e28);
  border:1px solid var(--stroke);
  border-radius:16px;
}
body.mv-design .mcg-service-card small { color:#f0c7a9 }
body.mv-design .design-footer { gap:12px; flex-wrap:wrap }
html body.design-login {
  background:radial-gradient(ellipse at 85% 0,#243b4c,transparent 57%),#18272c;
}
body.design-login .login-story {
  isolation:isolate;
  background:#142331 url('/images/mcg-projeto.webp') 48% center / cover no-repeat;
}
body.design-login .login-story:before {
  position:absolute;
  content:"";
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#0b1722ed,#101e2ba3 68%,#17293840),linear-gradient(0deg,#101923bf,transparent 65%);
}
body.design-login .login-story .login-art { display:none }
body.design-login .login-story-copy h2 { color:#fff7e8; font-size:clamp(37px,5.2vw,80px); line-height:1.02; margin:0 0 22px }
body.design-login .login-story-copy p { max-width:26rem; color:#e0eaf0 }
body.design-login .login-form-area main {
  background:linear-gradient(155deg,#1a2b39,#111c26);
  border:1px solid #425867;
  box-shadow:0 22px 55px #0006;
  border-radius:23px;
}
body.design-login .login-kicker { color:#f0c7a9 }
body.design-login .brand img { border-radius:8px }
body.design-login #status:empty { min-height:0; margin:0 }
body.mcg-demo { --red:#1b5877; background:#eef3f7 }
body.mcg-demo .hero { border-radius:20px; overflow:hidden }
body.mcg-demo .hero-copy { border-left:4px solid #c09855 }
body.mcg-demo figure img { width:100%; object-fit:cover }
:where(body.mv-design,body.design-login,body.mcg-demo) :is(button,a,input,select,summary):focus-visible {
  outline:2px solid #efbf9b;
  outline-offset:3px;
}
@media (max-width:700px) {
  html body.mv-design #app .design-hero { grid-template-columns:1fr; min-height:0!important }
  body.mv-design .design-hero-copy { padding:28px 22px }
  body.mv-design .design-hero .design-glass { display:block; height:185px; min-height:185px }
  body.mv-design .design-facade:after { background:linear-gradient(0deg,#09121bdc,transparent 65%) }
  body.mv-design .design-facade figcaption { bottom:14px }
  body.design-login .login-story-copy { margin-top:24px }
  body.design-login .login-story-copy h2 { font-size:clamp(32px,7vw,44px) }
  body.design-login .login-form-area { min-height:auto; padding:26px 16px }
}
@media (prefers-reduced-motion:no-preference) {
  body:not(.noanim) :is(button,.button,.cta-primary,summary) {
    transition:translate .22s var(--mcg-ease),scale .15s ease-out,background-color .2s,border-color .2s,box-shadow .22s;
  }
  body:not(.noanim) :is(button:not(:disabled),.button,.cta-primary,summary):active { scale:.975 }
  body.mv-design:not(.noanim)[data-dir="l"] { --mcg-shift:-13px }
  body.mv-design:not(.noanim) #design-main .tab.on { animation:mcg-route .32s var(--mcg-ease) both }
  body.mv-design:not(.noanim) #design-main .tab.on>* { animation:none }
  body:not(.noanim) :is(dialog[open],.ov:not([hidden])>.md,#asp:not([hidden])) {
    animation:mcg-window .27s var(--mcg-ease) both;
  }
  body:not(.noanim) dialog[open]::backdrop { animation:mcg-fade .24s ease-out }
  body.mv-design:not(.noanim) details[open]>summary+* { animation:mcg-route .24s var(--mcg-ease) }
  body.design-login .login-form-area main,
  body.mcg-demo .hero { animation:mcg-route .55s var(--mcg-ease) both }
  body.design-login .login-story-copy { animation:mcg-window .65s var(--mcg-ease) both }
  body.design-login #submit:disabled { cursor:wait }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  body:not(.noanim) :is(.design-actions button,.enter,.mcg-service-card button,.hero-actions .button):not(:disabled):hover { translate:0 -2px; box-shadow:0 8px 24px #0005 }
  body:not(.noanim) .design-actions svg { transition:translate .25s var(--mcg-ease) }
  body:not(.noanim) .design-actions button:hover svg { translate:3px -2px }
  body.mv-design:not(.noanim) :is(#cards .card,.mcg-service-card,.design-facade img) { transition:translate .26s var(--mcg-ease),scale .48s var(--mcg-ease),border-color .26s }
  body.mv-design:not(.noanim) :is(#cards .card,.mcg-service-card):hover { translate:0 -3px; border-color:#967b4f }
  body.mv-design:not(.noanim) .design-facade:hover img { scale:1.045 }
}
@media (prefers-reduced-motion:reduce) {
  :where(body.mv-design,body.design-login,body.mcg-demo) *,
  :where(body.mv-design,body.design-login,body.mcg-demo) *::before,
  :where(body.mv-design,body.design-login,body.mcg-demo) *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
}
@keyframes mcg-route {
  from { opacity:0; translate:var(--mcg-shift,13px) 6px }
  to { opacity:1; translate:0 0 }
}
@keyframes mcg-window {
  from { opacity:0; translate:0 11px; scale:.985 }
  to { opacity:1; translate:0 0; scale:1 }
}
@keyframes mcg-fade { from { opacity:0 } to { opacity:1 } }

/* A fachada ocupa um quadro horizontal, com espaço para as ações ao lado. */
html body.mv-design #app .design-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  background: linear-gradient(112deg,#334952,#22343b 62%) !important;
  border-radius: 12px !important;
}
body.mv-design .design-hero .design-glass {
  padding: 22px 22px 22px 0;
  display: flex;
  align-items: center;
}
html body.mv-design .design-hero .design-facade {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.64;
  height: auto;
  border: 1px solid #b7a89c65;
  border-radius: 6px;
}
body.mv-design .design-facade:after { background:linear-gradient(0deg,#17272eea,transparent 42%) }
body.mv-design .design-facade figcaption { left: 18px; bottom: 14px }
body.mv-design .design-hero h2,
body.design-login .login-story-copy h2,
body.mcg-demo .hero h1 { font-family: Georgia, serif; font-weight: 500; letter-spacing: -.035em }

html body.design-login { background: #f2ebe0; grid-template-columns: 1.18fr 1fr }
body.design-login .login-story {
  background: repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 52px),linear-gradient(135deg,#344b54,#1d3037);
  color: #fff5e8;
  padding: clamp(28px,4.5vw,72px);
}
body.design-login .login-story::before { display:none }
body.design-login .login-story-copy { margin: 30px 0 24px }
body.design-login .login-story-copy h2 { font-size: clamp(38px,4.65vw,72px); margin-bottom: 12px }
body.design-login .login-story-copy p { opacity: 1; max-width: 39ch; color: #dce5e5 }
body.design-login .login-story .login-art {
  display:block;
  margin:26px 0 0;
  height:auto;
  max-width:700px;
  border:1px solid #e9cbb18a;
  padding:8px;
  background:#f6eadb0e;
}
body.design-login .login-art::before { display:none }
body.design-login .login-art img { display:block; width:100%; aspect-ratio:364/189; object-fit:cover }
body.design-login .login-story-foot { opacity:1; color:#e5d2c4; padding-top:14px }
body.design-login .login-form-area { color:#263941; color-scheme:light }
body.design-login .login-form-area main {
  width:min(100%,465px);
  background:#fffbf5;
  color:#263941;
  border:1px solid #c9b7a6;
  border-top:4px solid #956448;
  border-radius:8px;
  box-shadow:0 22px 64px #67463219;
}
body.design-login main .brand { display:block }
body.design-login main .brand img { display:none }
body.design-login main .brand h1 { font-family:Georgia,serif; font-weight:500; letter-spacing:-.025em; font-size:clamp(25px,3vw,36px); color:#253840 }
body.design-login main :is(.hint,footer,footer a) { color:#51463e }
body.design-login main input:not([type=checkbox]) { background:#fffdf9; color:#253840; border-color:#a9998c }
body.design-login main .password button { background:#eee4d8; color:#253840; border-color:#a9998c }
html body.design-login main .enter { background:#263941!important; border-color:#263941!important; color:#fff4e8!important; box-shadow:none }
body.design-login main #status { color:#8d302c }
body.mcg-demo { --red:#754930; background:#f5efe6 }
body.mcg-demo .hero { border-radius:8px }
body.mcg-demo .hero-copy { border-left-color:#a57755 }
body.mcg-demo .hero figure { background:#263941; padding:9px; border-radius:5px }
body.mcg-demo .hero figcaption { color:#f7e5d6 }
@media(max-width:700px) {
  html body.mv-design #app .design-hero { grid-template-columns:1fr }
  body.mv-design .design-hero .design-glass { height:auto; min-height:0; padding:0 16px 16px }
  html body.mv-design .design-hero .design-facade { aspect-ratio:1.92 }
  html body.design-login { display:block }
  body.design-login .login-story { min-height:0; padding:23px 18px 16px }
  body.design-login .login-story-copy { margin:18px 0 0 }
  body.design-login .login-story-copy h2 { font-size:clamp(28px,7.5vw,44px) }
  body.design-login .login-story-copy p { display:none }
  body.design-login .login-story .login-art { margin:14px 0 0; padding:4px }
  body.design-login .login-story-foot { display:none }
  body.design-login .login-form-area { min-height:0; padding:18px 12px 26px }
}

/* Paleta MCG */
:root {
  --canvas:#101f23;
  --surface:#192d31;
  --subtle:#23393c;
  --input:#14282c;
  --ink:#f2faf7;
  --muted:#b1c7c6;
  --accent:#91e6d0;
  --brand-red:#237c70;
  --accent-hover:#2e9180;
  --stroke:#345155;
  --strong-stroke:#527478;
  --button:#1b373b;
  --hover:#285054;
  --tint:#1d3b3d;
  --header:#102326f5;
  --nav-bg:#13272b;
  --nav-active:#204448;
  --nav-selected:#a6f0dd;
  --nav-active-stroke:#47887e;
}
html body.mv-design {background:radial-gradient(ellipse at 78% 0,#214044 0,transparent 48%),var(--canvas)!important}
html body.mv-design #app .design-hero {background:linear-gradient(112deg,#183c3e,#173034 62%)!important}
body.mv-design .mcg-service-card small {color:#a7efd8}
body.mv-design .design-avatar {font-size:.68rem}
body.mv-design .design-hero h2,
body.design-login .login-story-copy h2,
body.design-login main .brand h1,
body.mcg-demo .hero h1 {font-family:var(--font,system-ui),system-ui;font-weight:750}
html body.design-login,body.mcg-demo {background:#e9f3ef}
body.design-login .login-story {background:repeating-linear-gradient(90deg,#ffffff09 0 1px,transparent 1px 52px),linear-gradient(135deg,#1d5555,#112a2d);color:#f1faf7}
body.design-login .login-story-foot {color:#c0e7dd}
body.design-login .login-story .login-art {border-color:#87c7b99c;background:#d4f5ec0e}
body.design-login .login-art img {aspect-ratio:632/278}
body.design-login .login-form-area main {background:#fbfefc;border-color:#b8d1ca;border-top-color:#368476}
body.design-login main :is(.hint,footer,footer a) {color:#365759}
body.design-login main input:not([type=checkbox]) {background:#fff;border-color:#a0bcb5}
body.design-login main .password button {background:#e4f0eb;border-color:#a0bcb5}
html body.design-login main .enter {background:#14534d!important;border-color:#14534d!important;color:#fff!important}
body.mcg-demo {--red:#176459}
body.mcg-demo .hero-copy {border-left-color:#3a937e}
body.mcg-demo .hero figure {background:#193a3e}
body.mcg-demo .hero figcaption {color:#dcf4eb}
#clientes .sh p {margin:.4rem 0;color:var(--muted)}
#crm-rows td {vertical-align:top}
#crm-rows td small {display:block;margin-top:.3rem;color:var(--muted)}
#crm-rows details button {display:block;margin:.35rem 0}
#crm-rows .crm-actions {min-width:200px}
.crm-actions button,.crm-actions a {margin:.2rem .4rem .2rem 0}
.crm-actions a {color:var(--accent)}
#crm-dialog {
  width:min(680px,calc(100% - 28px));
  max-height:calc(100dvh - 28px);
  overflow:auto;
  padding:clamp(16px,4vw,28px);
  border:1px solid var(--strong-stroke);
  border-radius:14px;
  color:var(--ink);
  background:var(--surface);
}
#crm-dialog::backdrop {background:#06181bba}
#crm-dialog label {display:block;margin-bottom:12px}
#crm-dialog label :is(input,textarea,select),#clientes label :is(input,select) {margin-top:5px;width:100%}
#crm-error {color:#ffb5aa}

.mcg-shortcuts {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:10px;
}
body.mv-design .mcg-shortcuts button {
  min-height:74px;
  text-align:left;
  padding:12px 15px;
  background:var(--surface);
  border:1px solid var(--stroke);
}
.mcg-shortcuts :is(strong,span) {display:block}
.mcg-shortcuts span {margin-top:4px;color:var(--muted);font-size:.86rem}