/* =====================================================================
   Agendamento Simples - Design system "Verde Tech" (tema claro)
   Paleta da logo: verde (#0c9e30), amarelo (#f9ed1f) e contorno escuro.
   Vidro claro, brilho suave e borda animada nos cards. A cor principal vem
   de Configurações > Personalização (--bs-primary); o amarelo é a cor de marca.
   ===================================================================== */

/* ---------- Tokens ---------- */
@property --angulo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
    --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --fundo: #f3faf4;
    --fundo-2: #e7f4ea;
    --superficie: rgba(255, 255, 255, .8);
    --borda: rgba(10, 100, 40, .13);
    --borda-forte: rgba(10, 100, 40, .26);
    --texto: #10301b;
    --texto-suave: #52705c;
    --sombra-suave: 0 1px 2px rgba(10, 60, 25, .05), 0 16px 36px -20px rgba(10, 90, 40, .3);
    --sombra-forte: 0 28px 60px -26px rgba(10, 70, 30, .4);

    --raio-btn: 12px;
    --raio-card: 18px;
    --raio-campo: 12px;

    --acento: var(--cor-acento, #076e22);
    --amarelo: #f9ed1f;
    --grad: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 58%, #8be04a) 100%);
    --brilho: 0 10px 28px -12px color-mix(in srgb, var(--bs-primary) 85%, transparent);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--fonte);
    color: var(--texto);
    background:
        radial-gradient(900px 520px at 8% -8%, rgba(12, 158, 48, .13), transparent 60%),
        radial-gradient(760px 460px at 100% 18%, rgba(249, 237, 31, .16), transparent 60%),
        var(--fundo);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--fonte); letter-spacing: -.015em; color: var(--texto); }

::selection { background: color-mix(in srgb, var(--amarelo) 70%, transparent); color: #10301b; }
:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--texto-suave) 40%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.text-suave { color: var(--texto-suave) !important; }

/* ---------- Botões: quadrados de cantos arredondados, com brilho e elevação ---------- */
.btn {
    --bs-btn-border-radius: var(--raio-btn);
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: .55rem;
    border-radius: var(--raio-btn);
    font-weight: 600;
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s ease, box-shadow .28s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
}

.btn-lg { --bs-btn-border-radius: 14px; border-radius: 14px; padding: .8rem 1.6rem; }
.btn-sm { --bs-btn-border-radius: 10px; border-radius: 10px; font-weight: 500; --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .35rem; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn.disabled { transform: none; opacity: .6; }
.btn-link { transform: none !important; overflow: visible; }

/* faixa de luz que atravessa o botão no hover */
.btn-primary::after, .btn-success::after, .btn-warning::after, .btn-danger::after, .btn-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
    z-index: -1;
}
.btn-primary:hover::after, .btn-success:hover::after, .btn-warning:hover::after, .btn-danger:hover::after, .btn-hero:hover::after { left: 135%; }

.btn-primary, .btn-hero {
    background-image: var(--grad);
    background-color: var(--bs-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--brilho);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-hero:hover, .btn-hero:focus {
    background-image: var(--grad);
    border-color: transparent;
    color: #fff;
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--bs-primary) 95%, transparent);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    border-width: 1.5px;
    background: rgba(255, 255, 255, .55);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    background-image: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--brilho);
}

.btn-outline-secondary {
    border-width: 1.5px;
    --bs-btn-color: var(--texto-suave);
    --bs-btn-border-color: var(--borda-forte);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 9%, #fff);
    --bs-btn-hover-color: var(--texto);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 15%, #fff);
    --bs-btn-active-color: var(--texto);
    --bs-btn-active-border-color: var(--bs-primary);
}

/* amarelo da logo */
.btn-warning {
    --bs-btn-bg: var(--amarelo);
    --bs-btn-border-color: #e6d900;
    --bs-btn-color: #2a2500;
    --bs-btn-hover-bg: #ffe92e;
    --bs-btn-hover-border-color: #e6d900;
    --bs-btn-hover-color: #2a2500;
    --bs-btn-active-bg: #f0dc00;
    --bs-btn-active-color: #2a2500;
    box-shadow: 0 10px 24px -12px rgba(200, 180, 0, .9);
}
.btn-outline-warning { --bs-btn-color: #7a6a00; --bs-btn-border-color: #d9c700; --bs-btn-hover-bg: var(--amarelo); --bs-btn-hover-color: #2a2500; --bs-btn-hover-border-color: #d9c700; --bs-btn-active-bg: var(--amarelo); --bs-btn-active-color: #2a2500; }
.btn-success { box-shadow: 0 10px 26px -12px rgba(25, 135, 84, .75); }
.btn-danger { box-shadow: 0 10px 26px -12px rgba(220, 53, 69, .7); }
.btn-outline-danger, .btn-outline-success, .btn-outline-warning, .btn-outline-info { border-width: 1.5px; }

/* botão grande de chamada (hero) */
.btn-hero {
    padding: .95rem 2rem;
    font-size: 1.02rem;
    border-radius: 14px;
    animation: pulsoBrilho 3.4s ease-in-out infinite;
}
@keyframes pulsoBrilho {
    0%, 100% { box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--bs-primary) 80%, transparent); }
    50% { box-shadow: 0 14px 42px -8px color-mix(in srgb, var(--bs-primary) 100%, transparent); }
}

/* ---------- Formulários ---------- */
.form-control, .form-select, .input-group-text {
    border-radius: var(--raio-campo);
    padding-top: .6rem;
    padding-bottom: .6rem;
    border-color: var(--borda-forte);
    transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.form-control, .form-select { background-color: rgba(255, 255, 255, .9); color: var(--texto); }
.input-group-text { background-color: color-mix(in srgb, var(--bs-primary) 7%, #fff); color: var(--acento); }
.input-group > .form-control, .input-group > .btn, .input-group > .input-group-text { border-radius: var(--raio-campo); }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn { overflow: visible; }

.form-control::placeholder { color: #8fa597; }
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 20%, transparent), 0 0 24px -8px color-mix(in srgb, var(--bs-primary) 45%, transparent);
}
.form-label { font-weight: 500; font-size: .86rem; margin-bottom: .35rem; }
.form-text { font-size: .76rem; }
.form-check-input { border-radius: 6px; border-color: var(--borda-forte); }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 25%, transparent); border-color: var(--bs-primary); }

.alert { border-radius: 14px; border-width: 1px; }
.badge { border-radius: 8px; font-weight: 600; letter-spacing: .01em; }
.dropdown-menu, .modal-content { border-radius: 16px; border: 1px solid var(--borda); box-shadow: var(--sombra-forte); }
.page-link { border-radius: 10px !important; margin: 0 2px; color: var(--bs-primary); }
.page-item.active .page-link { background: var(--grad); border-color: transparent; color: #fff; }

/* ---------- Cards: vidro claro, borda verde→amarela girando e holofote que segue o mouse ---------- */
.card {
    --bs-card-bg: transparent;
    --bs-card-color: var(--texto);
    position: relative;
    isolation: isolate;
    background: var(--superficie);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--borda);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-suave);
    transition: transform .28s ease, box-shadow .35s ease, border-color .3s ease;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--angulo),
        var(--bs-primary), var(--amarelo) 22%, color-mix(in srgb, var(--bs-primary) 18%, transparent) 45%,
        var(--bs-primary) 68%, var(--amarelo) 88%, var(--bs-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .4s ease;
    animation: giroBorda 5s linear infinite;
    pointer-events: none;
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--amarelo) 26%, transparent), color-mix(in srgb, var(--bs-primary) 8%, transparent) 45%, transparent 66%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.card > * { position: relative; z-index: 1; }

.card:hover {
    border-color: transparent;
    box-shadow: 0 26px 56px -26px rgba(10, 80, 35, .45), 0 0 46px -20px color-mix(in srgb, var(--bs-primary) 70%, transparent);
}
.card:hover::before, .card:hover::after { opacity: 1; }

/* cards clicáveis levantam; formulários (wizard-card) mantêm a borda sempre acesa e não pulam */
.step-card:hover, .option-card:hover { transform: translateY(-6px); }
.wizard-card::before { opacity: .85; }
.wizard-card:hover { transform: none; }

@keyframes giroBorda { to { --angulo: 360deg; } }

/* aparecer ao rolar (usa 'translate' e animação própria para não brigar com o hover dos cards) */
.reveal { opacity: 0; translate: 0 24px; }
.reveal.visivel { animation: entrar .75s cubic-bezier(.2, .7, .2, 1) var(--atraso, 0ms) both; }
@keyframes entrar { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* ===================================================================
   SITE PÚBLICO
   =================================================================== */

/* Menu */
.site-navbar {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--borda);
    padding: .65rem 0;
}
.site-navbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-primary) 25%, var(--amarelo) 50%, var(--bs-primary) 75%, transparent);
    opacity: .75;
    pointer-events: none;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texto);
    text-decoration: none;
}
.site-brand:hover { color: var(--acento); }
.site-brand img { max-height: 44px; max-width: 160px; width: auto; height: auto; }
.logo-chip { background: transparent; }
.site-brand-texto { display: flex; flex-direction: column; line-height: 1.15; }
.site-brand-texto small { font-size: .7rem; font-weight: 400; color: var(--texto-suave); }

.navbar-toggler { border: 1px solid var(--borda-forte); border-radius: 12px; padding: .4rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 25%, transparent); }
.site-navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2816, 48, 27, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.site-navbar .navbar-toggler-icon { background-image: var(--bs-navbar-toggler-icon-bg); }

.site-nav .nav-link {
    position: relative;
    font-weight: 500;
    font-size: .9rem;
    color: var(--texto);
    padding: .55rem 1rem !important;
    border-radius: 11px;
    transition: color .2s ease, background-color .2s ease;
}
.site-nav .nav-link:hover, .site-nav .nav-link:focus {
    color: var(--acento);
    background: color-mix(in srgb, var(--bs-primary) 11%, transparent);
}
.site-nav .nav-link i { color: var(--bs-primary); }

/* Hero */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 7.5rem) 0;
    color: var(--texto);
    background-image:
        linear-gradient(rgba(10, 100, 40, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 100, 40, .06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(231, 244, 234, .55));
    background-size: 46px 46px, 46px 46px, auto;
    border-bottom: 1px solid var(--borda);
}
.hero::before, .hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 560px; height: 560px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: orbita 18s ease-in-out infinite alternate;
}
.hero::before { background: #0c9e30; opacity: .28; top: -210px; left: -150px; }
.hero::after { background: var(--amarelo); opacity: .4; bottom: -260px; right: -170px; animation-delay: -9s; }
@keyframes orbita { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(90px, 60px) scale(1.18); } }

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .9rem;
    margin-bottom: 1.25rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acento);
    border-radius: 10px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
}
.hero-status .ponto { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #1fc14a; }
.hero-status .ponto::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #1fc14a; opacity: 0; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

.hero h1 {
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.12;
    letter-spacing: -.03em;
    background: linear-gradient(95deg, #0a3d1c 0%, var(--bs-primary) 62%, color-mix(in srgb, var(--bs-primary) 60%, #8be04a) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p.lead { color: var(--texto-suave); max-width: 36rem; font-weight: 400; }

.hero-card { padding: 1.5rem 1.6rem; }
.hero-card li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; font-weight: 500; font-size: .93rem; border-bottom: 1px solid var(--borda); }
.hero-card li:last-child { border-bottom: 0; }
.hero-card li i { color: var(--bs-primary); font-size: 1.2rem; }

/* Seções */
.site-section { padding: clamp(3.2rem, 6vw, 5.5rem) 0; scroll-margin-top: 4.5rem; position: relative; }
.site-section.alt { background: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 70%), var(--fundo-2); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .9rem;
    margin-bottom: .85rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acento);
    border-radius: 9px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 32%, transparent);
}
.section-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--amarelo); box-shadow: 0 0 0 1.5px rgba(29, 28, 28, .55); }
.section-title { font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

/* Como funciona */
.step-card { height: 100%; padding: 2rem 1.35rem 1.6rem; text-align: center; }
.step-card .step-num {
    position: absolute;
    top: -15px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    box-shadow: var(--brilho);
    border: 2px solid #fff;
}
.step-card .step-icon {
    width: 3.6rem; height: 3.6rem;
    margin: 0 auto 1.1rem;
    display: grid; place-items: center;
    border-radius: 16px;
    font-size: 1.55rem;
    color: var(--bs-primary);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bs-primary) 16%, #fff), color-mix(in srgb, var(--amarelo) 26%, #fff));
    border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, transparent);
    transition: transform .3s ease, box-shadow .3s ease;
}
.step-card:hover .step-icon { transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 30px -6px color-mix(in srgb, var(--amarelo) 90%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--bs-primary) 60%, transparent); }
.step-card h3 { font-size: 1rem; font-weight: 600; }
.step-card p { color: var(--texto-suave); font-size: .86rem; margin: 0; font-weight: 400; }

/* Fale Conosco */
.contato-info { list-style: none; padding: 0; margin: 0; }
.contato-info li { display: flex; gap: .95rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--borda); }
.contato-info li:last-child { border-bottom: 0; }
.contato-info .icone {
    flex: 0 0 2.7rem; height: 2.7rem;
    display: grid; place-items: center;
    border-radius: 13px;
    color: var(--bs-primary);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bs-primary) 14%, #fff), color-mix(in srgb, var(--amarelo) 22%, #fff));
    border: 1px solid color-mix(in srgb, var(--bs-primary) 25%, transparent);
    font-size: 1.1rem;
}
.contato-info small { display: block; color: var(--texto-suave); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.contato-info a { color: var(--texto); text-decoration: none; font-weight: 500; }
.contato-info a:hover { color: var(--acento); }

/* Rodapé */
.site-footer { position: relative; background: linear-gradient(180deg, #0d3d1f, #082a15); color: #cfe6d6; padding: 2.8rem 0 1.5rem; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #0c9e30, var(--amarelo), #0c9e30); }
.site-footer a { color: #cfe6d6; text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: var(--amarelo); }
.site-footer .rodape-base { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 1.6rem; padding-top: 1.25rem; font-size: .82rem; }

/* Passos do agendamento */
.stepper { display: flex; justify-content: center; gap: .4rem; margin: 1.4rem auto 0; max-width: 34rem; }
.stepper .passo { flex: 1; text-align: center; font-size: .7rem; font-weight: 500; color: #8fa597; }
.stepper .passo .barra { height: 6px; border-radius: 6px; background: rgba(10, 100, 40, .13); margin-bottom: .45rem; transition: background .3s ease, box-shadow .3s ease; }
.stepper .passo.feito .barra { background: color-mix(in srgb, var(--bs-primary) 65%, #fff); }
.stepper .passo.atual .barra { background: var(--grad); box-shadow: 0 0 12px color-mix(in srgb, var(--bs-primary) 55%, transparent); }
.stepper .passo.atual { color: var(--acento); font-weight: 600; }
.stepper .passo.feito { color: var(--texto-suave); }

.wizard-card { max-width: 640px; margin-inline: auto; padding: 1.9rem; }

.option-card {
    display: block;
    height: 100%;
    padding: 1.3rem;
    text-decoration: none;
    color: var(--texto);
    overflow: hidden;
}
.option-card:hover { color: var(--texto); }
.option-card .option-icon { width: 2.9rem; height: 2.9rem; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; transition: transform .3s ease; }
.option-card:hover .option-icon { transform: scale(1.1) rotate(-5deg); }
.option-card h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.option-card .meta { font-size: .78rem; color: var(--texto-suave); }
.option-card .option-img { display: block; width: calc(100% + 2.6rem); max-width: none; height: 150px; object-fit: cover; margin: -1.3rem -1.3rem 1rem; transition: transform .6s ease; }
.option-card:hover .option-img { transform: scale(1.06); }

/* Calendário de datas */
.cal-nav {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: 12px;
    border: 1px solid var(--borda-forte);
    background: #fff;
    color: var(--texto);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.cal-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--bs-primary) 10%, #fff); border-color: var(--bs-primary); }
.cal-nav:active { transform: scale(.94); }
.cal-nav:disabled { opacity: .35; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal-semana { text-align: center; font-size: .72rem; font-weight: 600; color: var(--texto-suave); padding-bottom: .3rem; text-transform: uppercase; }

.cal-dia {
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    font-weight: 500;
    font-size: .9rem;
    color: #b3c4b9;
    transition: background .2s ease, transform .15s ease, box-shadow .25s ease, border-color .2s ease;
}
.cal-dia.disponivel {
    background: color-mix(in srgb, var(--bs-primary) 13%, #fff);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
    color: #0a4d1d;
    font-weight: 600;
    cursor: pointer;
}
.cal-dia.disponivel:hover { background: var(--grad); border-color: transparent; color: #fff; transform: translateY(-2px) scale(1.06); box-shadow: var(--brilho); }
.cal-dia.hoje { box-shadow: inset 0 0 0 2px var(--amarelo), inset 0 0 0 3px rgba(29, 28, 28, .5); color: var(--texto); font-weight: 700; }

.timeslot {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.15rem;
    border-radius: 12px;
    border: 1px solid var(--borda-forte);
    background: #fff;
    font-weight: 600;
    font-size: .92rem;
    color: var(--texto);
    text-decoration: none;
    transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease;
}
.timeslot i { color: var(--bs-primary); }
.timeslot:hover { background: var(--grad); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: var(--brilho); }
.timeslot:hover i { color: #fff; }
.timeslot small { font-weight: 400; opacity: .75; }

/* Linhas de informação (revisão, comprovante) */
.info-rows { display: grid; gap: .95rem; }
.info-row { display: flex; gap: .9rem; align-items: flex-start; }
.info-row .icone {
    flex: 0 0 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    border-radius: 12px;
    color: var(--bs-primary);
    background: linear-gradient(145deg, color-mix(in srgb, var(--bs-primary) 14%, #fff), color-mix(in srgb, var(--amarelo) 22%, #fff));
    border: 1px solid color-mix(in srgb, var(--bs-primary) 24%, transparent);
}
.info-row .rotulo { font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); }
.info-row .valor { font-weight: 500; }

.protocolo-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .06em;
    color: var(--acento);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 10%, #fff), color-mix(in srgb, var(--amarelo) 28%, #fff));
    border: 1.5px dashed color-mix(in srgb, var(--bs-primary) 55%, transparent);
}

.icone-sucesso {
    width: 4.4rem; height: 4.4rem;
    display: inline-grid; place-items: center;
    border-radius: 18px;
    background: var(--grad);
    border: 3px solid #fff;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 0 1.5px rgba(29, 28, 28, .5), 0 18px 40px -14px color-mix(in srgb, var(--bs-primary) 80%, transparent);
}

.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===================================================================
   LOGIN
   =================================================================== */
.auth-wrap { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-wrap::before, .auth-wrap::after {
    content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); pointer-events: none; animation: orbita 18s ease-in-out infinite alternate;
}
.auth-wrap::before { background: #0c9e30; opacity: .3; top: -190px; left: -140px; }
.auth-wrap::after { background: var(--amarelo); opacity: .42; bottom: -230px; right: -150px; animation-delay: -9s; }
.auth-card { width: 100%; max-width: 420px; padding: 2.2rem; border-radius: 22px; }
.auth-card::before { opacity: .85; }

/* ===================================================================
   PAINEL ADMINISTRATIVO
   =================================================================== */
body.admin { background: radial-gradient(900px 420px at 80% -10%, rgba(12, 158, 48, .1), transparent 60%), radial-gradient(600px 360px at 0% 100%, rgba(249, 237, 31, .1), transparent 60%), var(--fundo); }

.sidebar-admin {
    width: 256px;
    min-height: 100vh;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background:
        radial-gradient(260px 200px at 0% 0%, rgba(249, 237, 31, .16), transparent 70%),
        radial-gradient(300px 260px at 100% 100%, rgba(12, 158, 48, .25), transparent 70%),
        linear-gradient(180deg, #0d3d1f, #082a15);
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1.3rem 1.25rem 1rem; color: #fff; font-weight: 700; text-decoration: none; }
.sidebar-brand:hover { color: #fff; }
.sidebar-brand img { max-height: 36px; max-width: 80px; width: auto; background: #fff; border-radius: 10px; padding: 3px; }
.sidebar-brand span { line-height: 1.15; font-size: .95rem; }

.sidebar-nav { padding: .25rem .85rem 1.5rem; }
.nav-espaco { height: .35rem; }
.nav-kicker {
    margin: 1.35rem .6rem .45rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #8fbf9d;
    font-weight: 600;
}
.nav-espaco + .nav-item-admin + .nav-kicker { margin-top: 1.1rem; }

.nav-item-admin {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .85rem;
    margin-bottom: 2px;
    border-radius: 12px;
    color: #cfe6d6;
    text-decoration: none;
    font-weight: 400;
    font-size: .88rem;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.nav-item-admin i { width: 1.25rem; text-align: center; flex-shrink: 0; font-size: 1rem; }
.nav-item-admin:hover { background: rgba(255, 255, 255, .09); color: #fff; transform: translateX(3px); }
.nav-item-admin.ativo { background: var(--grad); color: #fff; font-weight: 500; box-shadow: var(--brilho); }
.nav-item-admin .badge { margin-left: auto; font-size: .66rem; }

.admin-topbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--borda); }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.page-title { font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.page-subtitle { color: var(--texto-suave); margin: .2rem 0 0; font-size: .9rem; font-weight: 400; }

.painel {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-suave);
    margin-bottom: 1.25rem;
    transition: box-shadow .3s ease, border-color .3s ease;
}
.painel:hover { border-color: color-mix(in srgb, var(--bs-primary) 32%, var(--borda)); box-shadow: 0 1px 2px rgba(10, 60, 25, .05), 0 20px 42px -20px color-mix(in srgb, var(--bs-primary) 45%, rgba(10, 60, 25, .2)); }
.painel-header { padding: 1rem 1.3rem; border-bottom: 1px solid var(--borda); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.painel-titulo { font-size: .98rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .55rem; }
.painel-titulo i { color: var(--bs-primary); }
.painel-body { padding: 1.3rem; }

.stat { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; }
.stat .icone {
    width: 3.1rem; height: 3.1rem;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 1.35rem;
    color: #fff;
    background: var(--grad);
    box-shadow: var(--brilho);
}
.stat .numero { font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.stat .rotulo { color: var(--texto-suave); font-size: .8rem; font-weight: 400; margin-top: .2rem; }

.tabela { margin: 0; --bs-table-bg: transparent; }
.tabela thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); font-weight: 600; border-bottom: 1px solid var(--borda-forte); white-space: nowrap; background: rgba(12, 158, 48, .04); }
.tabela td { vertical-align: middle; }
.tabela.table-hover > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--bs-primary) 7%, transparent); }
.tabela .acoes { white-space: nowrap; text-align: right; }

.vazio { padding: 2.8rem 1rem; text-align: center; color: var(--texto-suave); }
.vazio i { display: block; font-size: 2.1rem; margin-bottom: .6rem; opacity: .55; }

.cor-bolinha { display: inline-block; width: .7rem; height: .7rem; border-radius: 4px; margin-right: .45rem; vertical-align: middle; }
.abas-agenda { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

/* Grade do dia */
.slot-linha { display: flex; gap: 1rem; align-items: flex-start; padding: .95rem 1.3rem; border-bottom: 1px solid var(--borda); transition: background .15s ease; }
.slot-linha:hover { background: color-mix(in srgb, var(--bs-primary) 5%, transparent); }
.slot-linha:last-child { border-bottom: 0; }
.slot-hora { flex: 0 0 5.5rem; font-weight: 700; }
.slot-hora small { display: block; font-weight: 400; color: var(--texto-suave); }
.slot-linha form { flex-shrink: 0; }
.slot-linha .btn { white-space: nowrap; }
.slot-linha.bloqueado { background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(10, 60, 25, .04) 8px, rgba(10, 60, 25, .04) 16px); }
.slot-reserva { display: flex; align-items: center; gap: .6rem; padding: .4rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--bs-primary) 10%, #fff); border: 1px solid color-mix(in srgb, var(--bs-primary) 20%, transparent); margin-bottom: .35rem; }

/* Calendário do painel (FullCalendar) */
#calendario-admin { --fc-button-bg-color: var(--bs-primary); --fc-button-border-color: var(--bs-primary); --fc-button-hover-bg-color: color-mix(in srgb, var(--bs-primary) 85%, #000); --fc-button-hover-border-color: transparent; --fc-button-active-bg-color: color-mix(in srgb, var(--bs-primary) 75%, #000); --fc-button-active-border-color: transparent; --fc-today-bg-color: color-mix(in srgb, var(--amarelo) 22%, transparent); --fc-border-color: var(--borda); font-family: var(--fonte); }
#calendario-admin .fc-button { border-radius: 10px; font-weight: 500; text-transform: none; }
#calendario-admin .fc-button-group > .fc-button { border-radius: 0; }
#calendario-admin .fc-button-group > .fc-button:first-child { border-radius: 10px 0 0 10px; }
#calendario-admin .fc-button-group > .fc-button:last-child { border-radius: 0 10px 10px 0; }
#calendario-admin .fc-toolbar-title { font-weight: 600; letter-spacing: -.02em; }
#calendario-admin .fc-event { cursor: pointer; border-radius: 6px; border: 0; padding: 1px 4px; }
#calendario-admin .fc-daygrid-day.dia-bloqueado { background: #fbdede; }
.legenda-cor { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 4px; background: #fbdede; border: 1px solid #e59a9a; }

/* ===================================================================
   IMPRESSÃO: fundo branco, sem vidro nem animação
   =================================================================== */
.so-impressao { display: none; }

@media print {
    :root { --fundo: #fff; --fundo-2: #fff; --superficie: #fff; --borda: #d5dbe6; --borda-forte: #b9c2d3; --texto: #000; --texto-suave: #4b5563; --acento: #0a5a1f; }
    html, body, body.admin { background: #fff !important; color: #000 !important; }
    .so-impressao { display: block; }
    .no-print, .site-navbar, .site-footer, .sidebar-admin, .admin-topbar, .alert, .offcanvas { display: none !important; }
    .card, .painel { background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important; backdrop-filter: none !important; break-inside: avoid; }
    .card::before, .card::after { display: none !important; }
    .info-row .icone, .stat .icone { display: none; }
    .protocolo-badge { color: #000; border-color: #666; background: #fff; }
    main { padding: 0 !important; }
}

/* ===================================================================
   Acessibilidade: respeita quem prefere menos movimento
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; translate: none; }
}

/* Menu do painel no celular (offcanvas): mesmo verde escuro do menu lateral */
.offcanvas.text-bg-dark {
    background:
        radial-gradient(260px 200px at 0% 0%, rgba(249, 237, 31, .16), transparent 70%),
        linear-gradient(180deg, #0d3d1f, #082a15) !important;
}

/* Rodapé: copyright à esquerda e crédito do desenvolvedor à direita */
.site-footer .rodape-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.site-credito { display: inline-flex; align-items: center; gap: .45rem; color: #cfe6d6; text-decoration: none; transition: color .2s ease; }
.site-credito img { height: 20px; width: auto; object-fit: contain; }
.site-credito strong { color: #fff; font-weight: 600; }
.site-credito:hover, .site-credito:hover strong { color: var(--amarelo); }
@media (max-width: 575px) { .site-footer .rodape-base { justify-content: center; text-align: center; } }