/* ============================================================
   theme-compat.css — Classes portadas do theme.css legado
   Contém APENAS as classes efetivamente usadas no projeto.
   Pode ser removido progressivamente à medida que o HTML
   migrar para classes do Design System.
   ============================================================ */


/* ----------------------------------------------------------
   BACKGROUND — bg-holder, overlays, gradientes
---------------------------------------------------------- */
.bg-holder {
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0; left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    z-index: 0;
}
.bg-holder.overlay::before {
    position: absolute; content: "";
    background: rgba(0, 0, 0, 0.25);
    top: 0; bottom: 0; left: 0; right: 0;
}
.bg-holder.overlay-0::before  { background: rgba(0, 0, 0, 0.70); }
.bg-holder.overlay-1::before  { background: rgba(0, 0, 0, 0.55); }
.bg-holder.overlay-2::before  { background: rgba(0, 0, 0, 0.40); }
.bg-holder.overlay-light::before { background: rgba(255, 255, 255, 0.80); }

.bg-light-gradient {
    background: #ffffff;
    opacity: 0.85;
}
.bg-dark-gradient {
    background: linear-gradient(0deg, rgba(33,33,33,0.411) 0%, rgba(33,33,33,0) 100%);
}


/* ----------------------------------------------------------
   BACKGROUND NEUTROS — tons de cinza do tema
---------------------------------------------------------- */
.bg-200 { background-color: #F5F5F5 !important; }
.bg-300 { background-color: #EEEEEE !important; }


/* ----------------------------------------------------------
   TIPOGRAFIA — cores de texto
---------------------------------------------------------- */
.text-400  { color: #E0E0E0 !important; }
.text-800  { color: #616161 !important; }
.text-1000 { color: #212121 !important; }

/* fw-semi-bold: Bootstrap 5 usa fw-semibold (sem hífen), mantemos alias */
.fw-semi-bold { font-weight: 600 !important; }


/* ----------------------------------------------------------
   ESCALA TIPOGRÁFICA EXTENDIDA
   Bootstrap 5 define fs-1..fs-6 com valores diferentes.
   O tema usa uma escala multiplicativa própria (×1.2).
---------------------------------------------------------- */
.fs-1 { font-size: 1.200rem  !important; }
.fs-2 { font-size: 1.440rem  !important; }
.fs-3 { font-size: 1.728rem  !important; }
.fs-4 { font-size: 2.074rem  !important; }
.fs-5 { font-size: 2.488rem  !important; }
.fs-6 { font-size: 2.986rem  !important; }
.fs-7 { font-size: 3.583rem  !important; }
.fs-8 { font-size: 4.300rem  !important; }

/* Responsivos — md */
@media (min-width: 768px) {
    .fs-md--2 { font-size: 0.694rem !important; }
    .fs-md--1 { font-size: 0.833rem !important; }
    .fs-md-0  { font-size: 1.000rem !important; }
    .fs-md-1  { font-size: 1.200rem !important; }
    .fs-md-2  { font-size: 1.440rem !important; }
    .fs-md-3  { font-size: 1.728rem !important; }
    .fs-md-4  { font-size: 2.074rem !important; }
    .fs-md-5  { font-size: 2.488rem !important; }
    .fs-md-6  { font-size: 2.986rem !important; }
    .fs-md-7  { font-size: 3.583rem !important; }
    .fs-md-8  { font-size: 4.300rem !important; }
}

/* Responsivos — lg */
@media (min-width: 992px) {
    .fs-lg--2 { font-size: 0.694rem !important; }
    .fs-lg--1 { font-size: 0.833rem !important; }
    .fs-lg-0  { font-size: 1.000rem !important; }
    .fs-lg-1  { font-size: 1.200rem !important; }
    .fs-lg-2  { font-size: 1.440rem !important; }
    .fs-lg-3  { font-size: 1.728rem !important; }
    .fs-lg-4  { font-size: 2.074rem !important; }
    .fs-lg-5  { font-size: 2.488rem !important; }
    .fs-lg-6  { font-size: 2.986rem !important; }
    .fs-lg-7  { font-size: 3.583rem !important; }
    .fs-lg-8  { font-size: 4.300rem !important; }
}

/* Responsivos — xl */
@media (min-width: 1200px) {
    .fs-xl--2 { font-size: 0.694rem !important; }
    .fs-xl--1 { font-size: 0.833rem !important; }
    .fs-xl-0  { font-size: 1.000rem !important; }
    .fs-xl-1  { font-size: 1.200rem !important; }
    .fs-xl-2  { font-size: 1.440rem !important; }
    .fs-xl-3  { font-size: 1.728rem !important; }
    .fs-xl-4  { font-size: 2.074rem !important; }
    .fs-xl-5  { font-size: 2.488rem !important; }
    .fs-xl-6  { font-size: 2.986rem !important; }
    .fs-xl-7  { font-size: 3.583rem !important; }
    .fs-xl-8  { font-size: 4.300rem !important; }
}


/* ----------------------------------------------------------
   ESPAÇAMENTO EXTENDIDO (além do Bootstrap 5 que vai até 5)
   Bootstrap 5: mb-5 = 3rem. O tema usa escala diferente.
   Portamos apenas os valores acima de 5 que são usados.
---------------------------------------------------------- */
.mt-7  { margin-top:    5.000rem !important; }

.mb-6  { margin-bottom: 4.000rem !important; }
.mb-8  { margin-bottom: 7.500rem !important; }
.mb-10 { margin-bottom: 12.50rem !important; }

.py-7  { padding-top: 5.000rem !important; padding-bottom: 5.000rem !important; }
.py-8  { padding-top: 7.500rem !important; padding-bottom: 7.500rem !important; }
.py-11 { padding-top: 15.00rem !important; padding-bottom: 15.00rem !important; }


/* ----------------------------------------------------------
   CARD-SPAN — cards que se esticam para altura total
---------------------------------------------------------- */
.card-span {
    transition: all 0.4s ease;
    border: 0;
}
.card-span .card-span-img {
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}
/* Remove border-radius do card-img (padrão do tema) */
.card-img,
.card-img-top    { border-top-left-radius: 0; border-top-right-radius: 0; }
.card-img,
.card-img-bottom { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }


/* ----------------------------------------------------------
   MAX-IMG — altura fixa de imagem em cards de matriz
   (mobile: 28vw; base: 300px)
---------------------------------------------------------- */
.max-img { height: 300px; }
@media (max-width: 575px) {
    .max-img { height: 28vw !important; }
}


/* ----------------------------------------------------------
   INPUT GROUP COM ÍCONE INTERNO
---------------------------------------------------------- */
.input-group-icon { position: relative; }
.input-group-icon .input-box {
    padding-left: 2.8rem;
    vertical-align: middle;
}
.input-group-icon .input-box-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: #EEEEEE;
    transform: translateY(-50%);
}


/* ----------------------------------------------------------
   FEATHER ICONS — wrapper de alinhamento
---------------------------------------------------------- */
.feather {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vertical-align: middle;
}


/* ----------------------------------------------------------
   DARK MODE — overrides para classes com cores fixas
   As classes abaixo usam valores hexadecimais literais
   (não tokens CSS), portanto precisam de override explícito.
---------------------------------------------------------- */
[data-theme="dark"] .text-400  { color: #9E9E9E !important; }   /* muted */
[data-theme="dark"] .text-800  { color: #BDBDBD !important; }   /* secundário */
[data-theme="dark"] .text-1000 { color: #E9ECEF !important; }   /* primário */

[data-theme="dark"] .bg-200 { background-color: #1e1e1e !important; }
[data-theme="dark"] .bg-300 { background-color: #2a2a2a !important; }

[data-theme="dark"] .bg-light-gradient {
    background: #1e1e1e;
    opacity: 1;
}

[data-theme="dark"] .input-group-icon .input-box-icon {
    color: #6b7280;
}