/* 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; }

.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;
}