/* Identidade da plataforma Site Selva: verde da floresta + laranja do pôr do sol. Os sites das empresas usam as cores delas
   (SiteRenderer); isto vale para a plataforma (início, diretório, painel, admin). */
:root {
    --sv-green: #1F6F5F;
    --sv-green-dark: #0F3D33;
    --sv-green-soft: #E8F3EF;
    --sv-accent: #F2A541;
    --sv-ink: #17212b;
    --sv-muted: #5b6472;
    --sv-line: #e4e8ec;
    --bs-primary: #1F6F5F;
    --bs-primary-rgb: 31, 111, 95;
    --bs-link-color: #1F6F5F;
    --bs-link-color-rgb: 31, 111, 95;
    --bs-link-hover-color: #0F3D33;
    --bs-link-hover-color-rgb: 15, 61, 51;
    --bs-border-radius: .6rem;
}

html, body {
    font-family: Inter, 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--sv-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.01em; font-weight: 700; }

a, .btn-link {
    color: var(--sv-green);
}

.btn { border-radius: .6rem; font-weight: 600; }

.btn-primary {
    --bs-btn-bg: var(--sv-green);
    --bs-btn-border-color: var(--sv-green);
    --bs-btn-hover-bg: var(--sv-green-dark);
    --bs-btn-hover-border-color: var(--sv-green-dark);
    --bs-btn-active-bg: var(--sv-green-dark);
    --bs-btn-active-border-color: var(--sv-green-dark);
    --bs-btn-disabled-bg: var(--sv-green);
    --bs-btn-disabled-border-color: var(--sv-green);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--sv-green);
    --bs-btn-border-color: var(--sv-green);
    --bs-btn-hover-bg: var(--sv-green);
    --bs-btn-hover-border-color: var(--sv-green);
    --bs-btn-active-bg: var(--sv-green-dark);
    --bs-btn-active-border-color: var(--sv-green-dark);
    --bs-btn-disabled-color: var(--sv-green);
    --bs-btn-disabled-border-color: var(--sv-green);
}

.btn-accent { background: var(--sv-accent); border-color: var(--sv-accent); color: #2b1a00; }
.btn-accent:hover { background: #e5952c; border-color: #e5952c; color: #2b1a00; }

.card { border-color: var(--sv-line); border-radius: .8rem; }
.bg-primary { background-color: var(--sv-green) !important; }
.border-primary { border-color: var(--sv-green) !important; }
.text-primary { color: var(--sv-green) !important; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(31, 111, 95, .45);
}

/* ---------- Página inicial e diretório ---------- */
.sv-hero { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 3.5rem 2.5rem; color: #fff;
           background: radial-gradient(circle at 85% 15%, rgba(242,165,65,.45), transparent 40%), linear-gradient(135deg, var(--sv-green), var(--sv-green-dark)); }
.sv-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; max-width: 18ch; }
.sv-hero .lead { max-width: 52ch; opacity: .92; }
.sv-hero .btn-light { color: var(--sv-green-dark); }
.sv-hero .sv-pill { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 999px; background: rgba(255,255,255,.15); margin-bottom: 1rem; }
.sv-mock { background: #fff; color: var(--sv-ink); border-radius: 1rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); overflow: hidden; max-width: 360px; margin-left: auto; transform: rotate(2deg); }
.sv-mock .sv-mock-top { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--sv-line); font-weight: 700; font-size: .9rem; }
.sv-mock .sv-mono { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--sv-green); color: #fff; font-weight: 800; font-size: .85rem; }
.sv-mock .sv-mock-hero { padding: 1rem; background: linear-gradient(135deg, #1F6F5F, #0F3D33); color: #fff; }
.sv-mock .sv-mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .9rem; }
.sv-mock .sv-mock-card { border: 1px solid var(--sv-line); border-radius: .6rem; overflow: hidden; font-size: .78rem; }
.sv-mock .sv-mock-card span { display: block; height: 54px; }
.sv-mock .sv-mock-card b, .sv-mock .sv-mock-card i { display: block; padding: .15rem .5rem; font-style: normal; }
.sv-mock .sv-mock-card i { color: var(--sv-green); font-weight: 800; padding-bottom: .45rem; }
.sv-mock .sv-mock-btn { margin: 0 .9rem .9rem; text-align: center; background: #25D366; color: #fff; font-weight: 700; border-radius: .6rem; padding: .5rem; font-size: .85rem; }
@media (max-width: 991px) { .sv-mock { display: none; } .sv-hero { padding: 2.5rem 1.5rem; } }

.sv-section { margin-top: 4rem; }
.sv-kicker { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-green); margin-bottom: .4rem; }
.sv-feature { height: 100%; padding: 1.5rem; border: 1px solid var(--sv-line); border-radius: 1rem; background: #fff; }
.sv-feature .sv-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sv-green-soft); color: var(--sv-green); margin-bottom: 1rem; }
.sv-feature .sv-icon svg { width: 24px; height: 24px; }
.sv-feature h3 { font-size: 1.1rem; }
.sv-feature p { color: var(--sv-muted); margin: 0; }
.sv-step { display: flex; gap: 1rem; align-items: flex-start; }
.sv-step b { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sv-accent); color: #2b1a00; font-weight: 800; }
.sv-step p { color: var(--sv-muted); margin: .2rem 0 0; }
/* Cartão de modelo (página inicial, galeria /modelos e editor) com a miniatura .sv-tm */
.sv-template { display: flex; flex-direction: column; border: 1px solid var(--sv-line); border-radius: 1rem; overflow: hidden; height: 100%; background: #fff; transition: box-shadow .2s, transform .2s; }
.sv-template:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(15,23,42,.45); }
.sv-template.sv-current { border: 2px solid var(--sv-green); }
.sv-template-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.sv-template-body strong { font-size: 1.05rem; }
.sv-template-seg { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-green); }
.sv-template p { color: var(--sv-muted); font-size: .9rem; margin: 0; }
.sv-template-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; }
/* Filtro por ramo na galeria /modelos */
.sv-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.sv-filter a { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--sv-line); background: #fff; color: var(--sv-ink, #0b1220); font-size: .88rem; font-weight: 600; text-decoration: none; }
.sv-filter button { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--sv-line); background: #fff; font-size: .88rem; font-weight: 600; }
.sv-filter a:hover, .sv-filter button:hover { border-color: var(--sv-green); }
.sv-filter a.sv-on, .sv-filter button.sv-on { background: var(--sv-green); border-color: var(--sv-green); color: #fff; }
.sv-filter-sm a, .sv-filter-sm button { padding: .25rem .7rem; font-size: .8rem; }
/* No celular os 11 ramos ocupavam 6 linhas: viram uma faixa com rolagem lateral (o chip cortado na borda indica que continua). */
@media (max-width: 640px) {
    .sv-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .sv-filter::-webkit-scrollbar { display: none; }
    .sv-filter a, .sv-filter button { flex: none; white-space: nowrap; }
}

.sv-tm { --tm-bg: #fff; --tm-ink: #0b1220; --tm-soft: #eef1f4; aspect-ratio: 16 / 10; background: var(--tm-bg); display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--sv-line); }
.sv-tm i, .sv-tm b, .sv-tm em, .sv-tm strong, .sv-tm span { display: block; }
.sv-tm-top { display: flex; align-items: center; gap: 6px; padding: 7px 10px; }
.sv-tm-top i { width: 14px; height: 14px; border-radius: 4px; background: var(--mp); }
.sv-tm-top b { width: 22px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--tm-ink) 25%, transparent); }
.sv-tm-top b:first-of-type { margin-left: auto; }
.sv-tm-top span { width: 30px; height: 11px; border-radius: 6px; background: var(--ma); }
.sv-tm-hero { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; align-items: center; padding: 6px 12px; position: relative; overflow: hidden;
              background: radial-gradient(60% 80% at 90% 10%, color-mix(in srgb, var(--ma) 30%, transparent), transparent 70%), var(--tm-bg); }
.sv-tm-copy em { width: 34px; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--mp) 25%, transparent); margin-bottom: 6px; }
.sv-tm-copy strong { height: 10px; border-radius: 4px; background: var(--tm-ink); margin-bottom: 5px; width: 90%; }
.sv-tm-copy strong + strong { width: 62%; background: var(--mp); }
.sv-tm-copy span { width: 46px; height: 12px; border-radius: 8px; background: var(--ma); margin-top: 8px; }
.sv-tm-art { aspect-ratio: 1; border-radius: 40% 60% 55% 45%; background: radial-gradient(circle at 75% 20%, var(--ma) 0, transparent 35%), linear-gradient(150deg, color-mix(in srgb, var(--mp) 80%, #fff), var(--mp)); }
.sv-tm-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 12px 10px; }
.sv-tm-list div { border-radius: 6px; background: var(--tm-soft); overflow: hidden; }
.sv-tm-list i { height: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--mp) 80%, #fff), var(--mp)); }
.sv-tm-list b { height: 4px; margin: 4px; border-radius: 4px; background: color-mix(in srgb, var(--tm-ink) 30%, transparent); }
/* Jeito de cada modelo: tipo de destaque (sv-tm-h-*), de catálogo (sv-tm-c-*) e tom; depois detalhes por modelo */
.sv-tm-warm { --tm-bg: #fffaf2; --tm-soft: #f3eadc; }
.sv-tm-dark { --tm-bg: #0b0b10; --tm-ink: #eef0fb; --tm-soft: rgba(255,255,255,.07); }
.sv-tm-dark .sv-tm-hero { background: radial-gradient(50% 70% at 85% 20%, color-mix(in srgb, var(--ma) 30%, transparent), transparent 70%), var(--tm-bg); }
.sv-tm-h-shop .sv-tm-top { background: var(--mp); } .sv-tm-h-shop .sv-tm-top b { background: rgba(255,255,255,.4); }
.sv-tm-h-shop .sv-tm-hero { background: var(--tm-bg); } .sv-tm-h-shop .sv-tm-copy { background: var(--mp); border-radius: 8px; padding: 10px; height: 100%; }
.sv-tm-h-shop .sv-tm-copy strong { background: #fff; } .sv-tm-h-shop .sv-tm-art { border-radius: 8px; aspect-ratio: auto; height: 100%; }
.sv-tm-h-cover .sv-tm-hero { grid-template-columns: 1fr; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 10px), var(--mp); }
.sv-tm-h-cover .sv-tm-art, .sv-tm-h-center .sv-tm-art, .sv-tm-h-frame .sv-tm-art { display: none; }
.sv-tm-h-cover .sv-tm-copy strong { background: #fff; width: 70%; height: 12px; }
.sv-tm-h-center .sv-tm-hero { grid-template-columns: 1fr; justify-items: center; }
.sv-tm-h-center .sv-tm-copy { display: flex; flex-direction: column; align-items: center; width: 70%; }
.sv-tm-h-minimal .sv-tm-hero { grid-template-columns: 1fr; align-content: center; gap: 6px; }
.sv-tm-h-minimal .sv-tm-copy strong { height: 14px; } .sv-tm-h-minimal .sv-tm-copy span { display: none; }
.sv-tm-h-minimal .sv-tm-art { aspect-ratio: auto; height: 16px; border-radius: 3px; }
.sv-tm-h-frame .sv-tm-hero { grid-template-columns: 1fr; justify-items: center; margin: 2px 10px; border-radius: 8px;
    background: radial-gradient(60% 80% at 85% 10%, color-mix(in srgb, var(--ma) 50%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--mp) 75%, #fff), var(--mp)); }
.sv-tm-h-frame .sv-tm-copy { display: flex; flex-direction: column; align-items: center; width: 70%; } .sv-tm-h-frame .sv-tm-copy strong { background: #fff; }
.sv-tm-h-bento .sv-tm-hero { grid-template-columns: 1.2fr .8fr; gap: 6px; align-items: stretch; padding: 6px 10px; background: var(--tm-bg); }
.sv-tm-h-bento .sv-tm-copy { background: var(--tm-soft); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; justify-content: center; }
.sv-tm-h-bento .sv-tm-art { aspect-ratio: auto; border-radius: 8px; }
.sv-tm-c-menu .sv-tm-list, .sv-tm-c-services .sv-tm-list { grid-template-columns: 1fr; gap: 4px; }
.sv-tm-c-menu .sv-tm-list div, .sv-tm-c-services .sv-tm-list div { display: flex; align-items: center; gap: 6px; }
.sv-tm-c-menu .sv-tm-list b, .sv-tm-c-services .sv-tm-list b { flex: 1; }
.sv-tm-c-menu .sv-tm-list div { background: none; border-bottom: 1px dashed color-mix(in srgb, var(--tm-ink) 25%, transparent); border-radius: 0; }
.sv-tm-c-menu .sv-tm-list i { width: 12px; height: 12px; border-radius: 50%; background: var(--ma); }
.sv-tm-c-services .sv-tm-list div { border-left: 3px solid var(--ma); background: color-mix(in srgb, var(--tm-soft) 70%, #fff); border-radius: 4px; }
.sv-tm-dark.sv-tm-c-services .sv-tm-list div { background: var(--tm-soft); }
.sv-tm-c-services .sv-tm-list i { width: 12px; height: 12px; margin: 3px; border-radius: 3px; background: var(--mp); }
.sv-tm-c-rows .sv-tm-list { grid-template-columns: 1fr 1fr; gap: 4px; }
.sv-tm-c-rows .sv-tm-list div { display: flex; align-items: center; gap: 6px; padding: 3px; }
.sv-tm-c-rows .sv-tm-list i { width: 18px; height: 18px; border-radius: 4px; flex: none; } .sv-tm-c-rows .sv-tm-list b { flex: 1; }
.sv-tm-c-tiles .sv-tm-list { grid-template-columns: 2fr 1fr 1fr; gap: 3px; }
.sv-tm-c-tiles .sv-tm-list div { border-radius: 4px; } .sv-tm-c-tiles .sv-tm-list i { height: 34px; } .sv-tm-c-tiles .sv-tm-list b { display: none; }
/* Detalhes por modelo */
.sv-tm-essencial .sv-tm-top { margin: 6px 8px 0; border-radius: 999px; box-shadow: 0 2px 8px -4px rgba(0,0,0,.3); }
.sv-tm-oficina .sv-tm-top, .sv-tm-escritorio .sv-tm-top, .sv-tm-campo .sv-tm-top { background: var(--mp); border-bottom: 3px solid var(--ma); }
.sv-tm-oficina .sv-tm-top b, .sv-tm-escritorio .sv-tm-top b, .sv-tm-campo .sv-tm-top b { background: rgba(255,255,255,.4); }
.sv-tm-neon .sv-tm-hero {
    background: radial-gradient(40% 60% at 20% 30%, color-mix(in srgb, var(--mp) 60%, transparent), transparent 70%), radial-gradient(35% 55% at 85% 30%, color-mix(in srgb, var(--ma) 45%, transparent), transparent 70%),
                linear-gradient(transparent 70%, color-mix(in srgb, var(--mp) 40%, transparent) 70% 71%, transparent 71%) 0 0 / 100% 12px, #07070c; }
.sv-tm-neon .sv-tm-copy strong { background: linear-gradient(90deg, #fff, var(--ma)); } .sv-tm-neon .sv-tm-copy span { background: linear-gradient(90deg, var(--mp), var(--ma)); }
.sv-tm-classico .sv-tm-copy strong + strong { background: color-mix(in srgb, var(--tm-ink) 40%, transparent); height: 5px; }
.sv-tm-classico .sv-tm-copy span, .sv-tm-boutique .sv-tm-copy span, .sv-tm-construtora .sv-tm-copy span { border-radius: 0; background: var(--mp); }
.sv-tm-classico .sv-tm-list div { border-radius: 0; background: none; } .sv-tm-classico .sv-tm-list i { height: 30px; } .sv-tm-classico .sv-tm-list b { margin: 4px auto; width: 60%; }
.sv-tm-cuidado .sv-tm-art, .sv-tm-doce .sv-tm-art { border-radius: 60px 60px 10px 10px; aspect-ratio: 4 / 5; width: 70%; justify-self: center; }
.sv-tm-boutique .sv-tm-list div, .sv-tm-construtora .sv-tm-list div, .sv-tm-boutique .sv-tm-art, .sv-tm-construtora .sv-tm-art { border-radius: 0; }
.sv-tm-pop .sv-tm-top { background: var(--ma); border-bottom: 2px solid #000; } .sv-tm-pop .sv-tm-top i { background: #000; }
.sv-tm-pop .sv-tm-hero { background: var(--mp); } .sv-tm-pop .sv-tm-copy strong { background: #fff; height: 16px; } .sv-tm-pop .sv-tm-art { background: var(--ma); border: 2px solid #000; }
.sv-tm-pop .sv-tm-list div { border: 2px solid #000; box-shadow: 3px 3px 0 #000; background: #fff; }
.sv-tm-construtora .sv-tm-hero { background: linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px) 0 0 / 16.66% 100%, var(--tm-bg); }
.sv-tm-construtora .sv-tm-art { background: var(--ma); }
.sv-tm-pulse .sv-tm-hero { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); background: linear-gradient(135deg, var(--mp), #111 75%); }
.sv-tm-pulse .sv-tm-copy strong:first-of-type { background: var(--ma); }
.sv-tm-festa .sv-tm-hero { background: radial-gradient(circle, #ffbe0b 0 2px, transparent 3px) 0 0 / 18px 18px, radial-gradient(circle, var(--ma) 0 1.5px, transparent 2.5px) 9px 9px / 22px 22px, var(--tm-bg); }
.sv-tm-festa .sv-tm-art { background: linear-gradient(140deg, var(--mp), var(--ma)); }
.sv-tm-portfolio .sv-tm-copy { align-items: flex-start; width: 90%; } .sv-tm-portfolio .sv-tm-copy strong { height: 14px; }
.sv-tm-portfolio .sv-tm-hero { justify-items: start; } .sv-tm-portfolio .sv-tm-copy span, .sv-tm-portfolio .sv-tm-top i { background: var(--ma); }
.sv-tm-aventura .sv-tm-hero { background: repeating-radial-gradient(ellipse at 50% 140%, rgba(255,255,255,.08) 0 2px, transparent 2px 12px), var(--mp); }
.sv-tm-escola .sv-tm-art { background: radial-gradient(circle at 25% 25%, var(--ma) 0 14%, transparent 15%), linear-gradient(150deg, color-mix(in srgb, var(--mp) 80%, #fff), var(--mp)); }
.sv-plan { height: 100%; border: 1px solid var(--sv-line); border-radius: 1rem; padding: 1.5rem; background: #fff; }
.sv-plan.sv-featured { border: 2px solid var(--sv-green); box-shadow: 0 20px 40px -28px rgba(15,61,51,.55); }
.sv-plan .sv-price { font-size: 2rem; font-weight: 800; }
.sv-plan .sv-price small { font-size: .95rem; font-weight: 500; color: var(--sv-muted); }
.sv-plan ul { padding-left: 1.1rem; color: var(--sv-muted); }
.sv-cta { border-radius: 1.25rem; padding: 2.5rem; background: var(--sv-green-soft); text-align: center; }
.sv-footer { margin-top: 4rem; padding: 1.5rem 0; border-top: 1px solid var(--sv-line); color: var(--sv-muted); font-size: .9rem; }

.sv-company { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border: 1px solid var(--sv-line); border-radius: 1rem; background: #fff; height: 100%; text-decoration: none; color: var(--sv-ink); transition: box-shadow .2s ease, transform .2s ease; position: relative; }
.sv-company:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -22px rgba(15,23,42,.5); color: var(--sv-ink); }
.sv-company .sv-mono { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--sv-green); color: #fff; font-weight: 800; font-size: 1.3rem; }
.sv-company h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
.sv-company p { color: var(--sv-muted); margin: 0; font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sv-company .sv-go { font-weight: 600; color: var(--sv-green); font-size: .9rem; margin-top: .4rem; display: inline-block; }
.sv-company img.sv-mono { object-fit: contain; background: #fff; border: 1px solid var(--sv-line); padding: 4px; width: auto; min-width: 52px; max-width: 112px; }

/* Logo no editor do site: xadrez claro para mostrar a transparência */
.sv-logo-box { flex: none; width: 160px; height: 88px; border-radius: .75rem; border: 1px solid var(--sv-line); display: grid; place-items: center; padding: 10px;
               background: repeating-conic-gradient(#f1f3f5 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.sv-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sv-onboarding { padding: 1.1rem 1.25rem; border-radius: 1rem; border: 1px solid var(--sv-line); background: #fff; }
.sv-step-item { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--sv-line); }
.sv-step-item:first-child { border-top: 0; }
.sv-step-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sv-line); color: #fff; font-weight: 800; font-size: .8rem; }
.sv-done .sv-step-mark { background: var(--sv-green); border-color: var(--sv-green); }

/* Lista do catálogo ordenável (arrastar pela alça ou setas). */
.sv-sortable tbody tr[draggable] { transition: background .15s; }
.sv-drag-handle { display: inline-block; padding: 0 4px; cursor: grab; color: var(--sv-muted, #6b7280); font-size: 1.1rem; user-select: none; vertical-align: middle; }
.sv-sortable tbody tr.sv-dragging { opacity: .55; background: var(--sv-green-soft); }
.sv-sortable .btn-link { text-decoration: none; line-height: 1; }
@media (hover: none) { .sv-drag-handle { display: none; } }

/* QR Code da ativação do aplicativo autenticador (SVG gerado no servidor). */
.sv-qr { width: 200px; max-width: 100%; padding: 8px; margin-bottom: .75rem; background: #fff; border: 1px solid var(--sv-line); border-radius: .75rem; }
.sv-qr svg { display: block; width: 100%; height: auto; }

/* Horário por dia no editor: nome do dia com chave à esquerda, faixas de horário à direita; no celular, uma embaixo da outra. */
.sv-week { border: 1px solid var(--sv-line); border-radius: .75rem; overflow: hidden; container-type: inline-size; }
.sv-day { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 1rem; align-items: start; padding: .55rem .9rem; }
.sv-day + .sv-day { border-top: 1px solid var(--sv-line); }
.sv-day-closed { background: rgba(0, 0, 0, .025); }
.sv-day-name { margin: 0; padding-top: .2rem; font-weight: 600; }
.sv-day-slots { display: grid; gap: .35rem; justify-items: start; }
.sv-slot { display: flex; align-items: center; gap: .4rem; }
.sv-slot input[type=time] { flex: 0 1 7.5rem; min-width: 0; }
.sv-day-closed > .text-muted { padding-top: .25rem; }
/* Coluna do editor estreita (ao lado da prévia) ou celular: o nome do dia fica em cima das faixas. */
@container (max-width: 30rem) {
    .sv-day { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .sv-day-closed { grid-template-columns: auto 1fr; }
}

/* Guia de configuração (GuiaPassos): passos numerados com o atual em destaque; no celular, só os números. */
.sv-guide { padding: .9rem 1.1rem; border-radius: 1rem; border: 1px solid var(--sv-line); background: var(--sv-green-soft); }
/* width 0 + min-width 100%: a faixa rola por dentro e não alarga a página (sem isso, o <main> flexível crescia até caber os 7 passos). */
.sv-guide-steps { display: flex; gap: .35rem; list-style: none; padding: 0; margin: .6rem 0 .7rem; overflow-x: auto; scrollbar-width: none; width: 0; min-width: 100%; }
.sv-guide-steps::-webkit-scrollbar { display: none; }
.sv-guide-steps li { flex: 1 0 auto; }
.sv-guide-steps a { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem .3rem .3rem; border-radius: 999px; text-decoration: none; color: var(--sv-muted, #5b6475); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.sv-guide-steps a:hover { background: rgba(255, 255, 255, .7); }
.sv-guide-dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--sv-line); font-size: .75rem; font-weight: 800; }
.sv-guide-steps .sv-done .sv-guide-dot { background: var(--sv-green); border-color: var(--sv-green); color: #fff; }
.sv-guide-steps .sv-now a { background: #fff; color: var(--sv-green-dark); box-shadow: 0 0 0 2px var(--sv-green); }
.sv-guide-steps .sv-now .sv-guide-dot { background: var(--sv-green); border-color: var(--sv-green); color: #fff; }
@media (max-width: 760px) { .sv-guide-steps li:not(.sv-now) .sv-guide-label { display: none; } }
/* Rodapé do passo: voltar à esquerda, salvar e continuar à direita. */
.sv-guide-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sv-line); }
.sv-done strong { color: var(--sv-muted); text-decoration: line-through; }
.sv-photo-hint { padding: .8rem 1rem; border-radius: .6rem; border: 1.5px dashed var(--sv-line); background: var(--sv-green-soft); color: var(--sv-ink); font-size: .9rem; margin-bottom: .8rem; }
.sv-thumb { width: 48px; height: 48px; border-radius: .5rem; object-fit: cover; border: 1px solid var(--sv-line); }
.sv-thumb-empty { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: .5rem; border: 1.5px dashed var(--sv-line); color: var(--sv-muted); font-size: .65rem; text-align: center; line-height: 1.1; }
.sv-checks { padding: .75rem .9rem; border-radius: .6rem; background: #fff8e6; border: 1px solid #f3df96; }
.sv-checks li { margin-top: .35rem; }
.sv-section-thumb { width: 96px; height: 60px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--sv-line); }

/* Fotos da galeria e do antes e depois no editor: grade de miniaturas com ordem e remoção */
.sv-photos { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sv-photos:empty { display: none; }
.sv-photo { margin: 0; border: 1px solid var(--sv-line); border-radius: .6rem; overflow: hidden; background: #fff; }
.sv-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sv-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: .25rem; padding: .25rem .35rem; }
.sv-photo-tools { display: flex; gap: 2px; }
.sv-photo-tools .btn { padding: .1rem .35rem; line-height: 1.2; }

/* ---------- Administração (/admin): cabeçalho, abas, indicadores, painéis, tabelas e estados vazios ---------- */
.sv-admin { max-width: 1240px; padding-bottom: 3rem; }
.sv-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin: .4rem 0 1.1rem; }
.sv-page-head > div:first-child { flex: 1 1 28rem; min-width: 0; }
.sv-page-head h1 { font-size: clamp(1.55rem, 2.6vw, 2rem); font-weight: 800; margin: 0; }
.sv-page-head h1 small { font-size: .95rem; font-weight: 600; color: var(--sv-muted); margin-left: .35rem; }
.sv-page-head .sv-kicker { margin-bottom: .2rem; }
.sv-page-lead { color: var(--sv-muted); margin: .4rem 0 0; max-width: 72ch; }
.sv-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sv-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 600; text-decoration: none; margin-bottom: .35rem; }
.sv-back:hover { text-decoration: underline; }

/* Abas da administração: quebram linha no computador; no celular viram faixa com rolagem lateral (sem ocupar 4 linhas). */
.sv-subnav { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; margin-bottom: 1.5rem; border: 1px solid var(--sv-line); border-radius: .9rem; background: #fff; }
@media (max-width: 760px) {
    .sv-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 0; min-width: 100%;
                 -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .sv-subnav::-webkit-scrollbar { display: none; }
}
.sv-subnav a { flex: none; padding: .45rem .85rem; border-radius: .6rem; color: var(--sv-muted); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.sv-subnav a:hover { background: var(--sv-green-soft); color: var(--sv-green-dark); }
.sv-subnav a.active { background: var(--sv-green); color: #fff; box-shadow: 0 6px 14px -10px rgba(15,61,51,.9); }

/* Indicadores da visão geral */
.sv-stats { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; }
@media (min-width: 992px) { .sv-stats { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-stat { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.2rem; border: 1px solid var(--sv-line); border-radius: 1rem; background: #fff;
           color: var(--sv-ink); text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
a.sv-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sv-green) 45%, var(--sv-line)); box-shadow: 0 16px 30px -24px rgba(15,23,42,.55); color: var(--sv-ink); }
.sv-stat-label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sv-muted); }
.sv-stat-value { font-size: 2.1rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.sv-stat-hint { font-size: .85rem; color: var(--sv-muted); }
.sv-stat-go { margin-top: .35rem; font-size: .85rem; font-weight: 700; color: var(--sv-green); }
.sv-stat.sv-attn { border-color: #f3c97f; background: linear-gradient(180deg, #fff8ec, #fff 70%); }
.sv-stat.sv-attn::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sv-accent); }
.sv-stat.sv-attn .sv-stat-go { color: #a35f00; }

/* Painel (cartão de seção) */
.sv-panel { border: 1px solid var(--sv-line); border-radius: 1rem; background: #fff; margin-bottom: 1.25rem; }
.sv-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--sv-line); }
.sv-panel-head h2 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.sv-panel-head h2 small { font-weight: 500; color: var(--sv-muted); font-size: .85rem; margin-left: .25rem; }
.sv-panel-head p { margin: .15rem 0 0; color: var(--sv-muted); font-size: .88rem; }
.sv-panel-body { padding: 1.1rem 1.2rem; }
.sv-panel-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .85rem 1.2rem; border-top: 1px solid var(--sv-line); background: #fafbfb; border-radius: 0 0 1rem 1rem; }
.sv-panel-danger { border-color: #f1c4c4; }
.sv-panel-danger .sv-panel-head { background: #fff6f6; border-radius: 1rem 1rem 0 0; }

/* Barra de filtros/criação dentro do painel */
.sv-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.sv-toolbar .sv-grow { flex: 1 1 16rem; min-width: 0; }
.sv-toolbar .sv-fixed { flex: 0 1 13rem; min-width: 0; }
.sv-toolbar .sv-narrow { flex: 0 1 6rem; min-width: 0; }
.sv-toolbar .form-label { font-size: .8rem; font-weight: 600; color: var(--sv-muted); margin-bottom: .25rem; }
@media (max-width: 640px) {
    .sv-toolbar > *, .sv-toolbar > .sv-grow, .sv-toolbar > .sv-fixed, .sv-toolbar > .sv-narrow { flex: 1 1 100%; }
    .sv-toolbar .btn { width: 100%; }
}

/* Tabela da administração */
.sv-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .93rem; }
.sv-table th { padding: .65rem 1.2rem; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-muted); background: #f7f9f9; border-bottom: 1px solid var(--sv-line); white-space: nowrap; text-align: left; }
.sv-table td { padding: .75rem 1.2rem; border-bottom: 1px solid var(--sv-line); vertical-align: middle; }
.sv-table tbody tr:last-child td { border-bottom: 0; }
.sv-table tbody tr:hover td { background: #fbfcfc; }
.sv-table .sv-num { text-align: right; font-variant-numeric: tabular-nums; }
.sv-table .sv-end { text-align: right; white-space: nowrap; }
.sv-table .sv-sub { display: block; color: var(--sv-muted); font-size: .82rem; }
.sv-table a.sv-strong { font-weight: 700; text-decoration: none; color: var(--sv-ink); }
.sv-table a.sv-strong:hover { color: var(--sv-green); text-decoration: underline; }
.sv-table tr.sv-row-bad td { background: #fff5f5; }
.sv-table-small { font-size: .84rem; }
.sv-table-small td { padding: .55rem 1.2rem; }
/* width 0 + min-width 100%: a tabela larga rola dentro do cartão em vez de alargar a página (mesmo truque do .sv-guide-steps). */
.sv-table-wrap { overflow-x: auto; border-radius: 0 0 1rem 1rem; width: 0; min-width: 100%; }
.sv-table-wrap:first-child { border-radius: 1rem; }
.sv-mono-text { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.sv-meta { max-width: 28rem; color: var(--sv-muted); word-break: break-word; }
@media (min-width: 761px) { .sv-meta { min-width: 16rem; } }
.sv-table code { color: var(--sv-green-dark); background: var(--sv-green-soft); padding: .1rem .4rem; border-radius: .35rem; font-size: .8rem; white-space: nowrap; }
.sv-limit-input { max-width: 8rem; }
.sv-truncate { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No celular cada linha vira um cartão: rótulo (data-label) à esquerda, valor à direita. */
@media (max-width: 760px) {
    .sv-table-stack thead { display: none; }
    .sv-table-stack, .sv-table-stack tbody, .sv-table-stack tr, .sv-table-stack td { display: block; width: 100%; }
    .sv-table-stack tr { padding: .7rem 1rem; border-bottom: 1px solid var(--sv-line); }
    .sv-table-stack tbody tr:last-child { border-bottom: 0; }
    .sv-table-stack td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem 0; border: 0; text-align: right; }
    .sv-table-stack td::before { content: attr(data-label); flex: none; font-size: .78rem; font-weight: 700; color: var(--sv-muted); text-align: left; }
    .sv-table-stack td.sv-cell-main { display: block; text-align: left; padding-bottom: .4rem; }
    .sv-table-stack td.sv-cell-main::before { content: none; }
    .sv-table-stack td.sv-end { justify-content: flex-end; }
    .sv-table-stack td.sv-end::before { content: none; }
    .sv-table-stack tbody tr:hover td { background: none; }
    .sv-table-stack .sv-meta, .sv-table-stack .sv-truncate { max-width: 60%; white-space: normal; }
}

/* Etiquetas de situação (suaves, legíveis e com cor de sentido) */
.sv-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1.3; white-space: nowrap; border: 1px solid transparent; }
.sv-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sv-chip-ok { background: #e6f4ee; color: #17694f; border-color: #c4e5d6; }
.sv-chip-info { background: #e8f1fb; color: #1d5b99; border-color: #c9dcf2; }
.sv-chip-warn { background: #fff4df; color: #8a5300; border-color: #f6d9a4; }
.sv-chip-bad { background: #fdecec; color: #a32626; border-color: #f4c7c7; }
.sv-chip-off { background: #f0f2f4; color: #59626e; border-color: #e0e4e8; }
.sv-chip-plain::before { content: none; }

/* Estado vazio */
.sv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 2.5rem 1.25rem; color: var(--sv-muted); }
.sv-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sv-green-soft); color: var(--sv-green); margin-bottom: .4rem; }
.sv-empty-icon svg { width: 26px; height: 26px; }
.sv-empty strong { color: var(--sv-ink); font-size: 1.02rem; }
.sv-empty p { margin: 0; max-width: 46ch; font-size: .92rem; }

/* Lista de dados (rótulo: valor) */
.sv-kv { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; gap: .55rem 1rem; margin: 0; font-size: .93rem; }
.sv-kv dt { font-weight: 600; color: var(--sv-muted); }
.sv-kv dd { margin: 0; word-break: break-word; }
@media (max-width: 480px) { .sv-kv { grid-template-columns: 1fr; gap: .1rem; } .sv-kv dd { margin-bottom: .5rem; } }

/* Mensagens de retorno (sucesso/erro) com faixa de cor à esquerda */
.sv-admin .alert { border-radius: .8rem; border-width: 1px 1px 1px 4px; font-size: .93rem; }
.sv-admin .alert-success { border-color: #c4e5d6; border-left-color: var(--sv-green); background: #f0f8f4; color: #134b3c; }
.sv-admin .alert-danger { border-left-color: #c0392b; }
.sv-admin .alert-info { border-color: #cfe0ef; border-left-color: #2f6fa8; background: #f3f8fc; color: #1d4466; }

.sv-admin .form-control, .sv-admin .form-select { border-radius: .6rem; }
.sv-note { font-size: .85rem; color: var(--sv-muted); margin: .5rem 0 0; }
.sv-evidence { white-space: pre-wrap; background: #f7f9f9; border: 1px solid var(--sv-line); border-radius: .6rem; padding: .6rem .8rem; }
.sv-loading { display: flex; align-items: center; gap: .6rem; color: var(--sv-muted); padding: 1.5rem 0; }
.sv-loading::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sv-line); border-top-color: var(--sv-green); animation: sv-spin .8s linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sv-loading::before { animation: none; } a.sv-stat:hover { transform: none; } }

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ocorreu um erro. Recarregue a página."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}