/* ============================================================
   ABUTRE'S FLORIPA MC — camada sobre o template Dataflow
   Componentes que o template não possui + compatibilidade de classes antigas.
   Nunca editar assets/dataflow/css/styles.css: sobrescrever aqui.
   ============================================================ */

:root {
    --abt-green:  #22C55E;
    --abt-purple: #8D79F6;
    --abt-blue:   #2377FC;
    --abt-red:    #EF4444;
    --abt-orange: #FF7433;
    --abt-amber:  #F59E0B;
    --abt-cyan:   #0EA5E9;
    --abt-grey:   #95989D;
}

/* ---------- Ícones (fonte icomoon do template) ---------- */
.ic { display: inline-block; line-height: 1; vertical-align: -0.12em; }
.ic-lg { font-size: 1.35em; }
[class^="icon-"], [class*=" icon-"] { line-height: 1; }

/* ---------- Título de página ---------- */
.abt-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.abt-page-head h3 { margin: 0; }
.abt-page-head .sub, .sub { color: var(--Body-Text); font-size: 14px; margin-top: 4px; }
.abt-page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dark-theme .sub { color: var(--Surface); }

/* ---------- Botões: tamanhos e variantes extras ---------- */
.tf-button.sm { height: 38px; padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.tf-button.xs { height: 32px; padding: 4px 10px; font-size: 12px; border-radius: 8px; gap: 6px; }
.tf-button.icon-only { width: 38px; padding: 0; }
.tf-button.icon-only.xs { width: 32px; }
.tf-button.danger { background-color: var(--abt-red); border-color: var(--abt-red); color: #fff; }
.tf-button.danger:hover { background-color: #dc2626; border-color: #dc2626; }
.tf-button.style-1.danger, .tf-button.style-3.danger { background-color: transparent; color: var(--abt-red); }
.tf-button.style-1.danger:hover { background-color: var(--abt-red); color: #fff; }
.tf-button.success { background-color: var(--abt-green); border-color: var(--abt-green); }
.tf-button.ghost { background: transparent; border-color: var(--Stroke); color: var(--Main-Dark); }
.tf-button.ghost:hover { border-color: var(--Main); color: var(--Main); background: transparent; }
.tf-button:disabled, .tf-button[disabled] { opacity: .45; cursor: not-allowed; }
.tf-button.w-full { width: 100%; }

/* ---------- Badges de status e patente (mesma base do .block-* do template) ---------- */
.badge, .abt-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 24px; padding: 2px 8px; border-radius: 4px; width: max-content; white-space: nowrap;
    background: var(--Surface-3); color: var(--Main-Dark); font-size: 12px; font-weight: 600; line-height: 1;
}
.badge.sm, .abt-badge.sm { height: 22px; font-size: 11px; padding: 0 7px; }
.badge-ativo, .badge-pago, .badge-escudado, .badge-success, .abt-green { color: var(--abt-green) !important; }
.badge-inativo, .badge-atrasado, .badge-danger, .abt-red { color: var(--abt-red) !important; }
.badge-warning, .badge-pendente, .badge-prospero, .badge-patente, .abt-orange { color: var(--abt-orange) !important; }
.badge-meio-escudo, .abt-purple { color: var(--abt-purple) !important; }
.badge-nomade, .badge-info, .abt-blue { color: var(--abt-blue) !important; }
.badge-isento, .abt-cyan { color: var(--abt-cyan) !important; }
.badge-neutro, .abt-grey { color: var(--Note) !important; }

/* ---------- Avatar com iniciais ---------- */
.member-avatar, .user-avatar-mini {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    background: var(--Surface-3); color: var(--Main); font-weight: 700; font-size: 13px; letter-spacing: .5px;
}
.member-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-upload-circle { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--Surface-3); border: 3px solid var(--Stroke); display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; }
.avatar-upload-circle[onclick] { cursor: pointer; }
.avatar-upload-circle .member-avatar-img { border-radius: 50%; }
.avatar-camera-badge { position: absolute; right: 2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--Main); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 2px solid var(--White); }

/* ---------- Tabela em grade (uso: <div class="wg-table abt-table" style="--cols: 2fr 1fr 120px">) ---------- */
.abt-table { overflow-x: auto; }
.abt-table > ul { margin: 0; padding: 0; list-style: none; }
.abt-table ul.table-title,
.abt-table ul.abt-row { display: grid; grid-template-columns: var(--cols, 1fr); gap: 16px; align-items: center; padding: 12px 16px; border-radius: 12px; min-width: var(--min-w, 0); }
.abt-table ul.table-title { background: var(--Surface-3); margin-bottom: 8px; }
/* O template define html { font-size: 62.5% } (10px); sem esta base, células sem .body-text/.body-title herdam 10px */
.abt-table ul.table-title li { list-style: none; font-size: 14px; font-weight: 700; line-height: 20px; color: var(--Main-Dark); white-space: nowrap; }
.abt-table ul.table-title li .body-title { white-space: nowrap; }
.abt-table ul.abt-row > li { font-size: 14px; line-height: 20px; }
.abt-table ul.abt-row > li i { font-size: 16px; vertical-align: -2px; }
.abt-table ul.abt-row > li .abt-actions .item i { font-size: 17px; vertical-align: 0; }
.abt-table .abt-rows { display: flex; flex-direction: column; gap: 4px; }
.abt-table ul.abt-row { list-style: none; transition: background .2s; }
.abt-table ul.abt-row:nth-child(2n) { background: var(--bg-table); }
.abt-table ul.abt-row:hover { background: var(--hv-item); }
.abt-table ul.abt-row.clickable { cursor: pointer; }
.abt-table ul.abt-row > li { list-style: none; min-width: 0; }
.abt-table .text-right { text-align: right; }
.abt-table .text-center { text-align: center; }
.abt-table .cell-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.abt-table .cell-actions form { display: inline; margin: 0; }
.abt-actions { display: flex; gap: 8px; align-items: center; }
.abt-actions .item, .abt-action { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--Body-Text); background: var(--Surface-3); border: 0; cursor: pointer; text-decoration: none; transition: all .2s; padding: 0; }
.abt-actions .item:hover, .abt-action:hover { color: var(--Main); background: var(--hv-item); }
.abt-actions .item.danger, .abt-action.danger { color: var(--abt-red); }
.abt-actions .item.danger:hover, .abt-action.danger:hover { background: rgba(239, 68, 68, .12); }
.dark-theme .abt-actions .item, .dark-theme .abt-action { color: var(--Surface); }

/* ---------- Grade de cards touch ---------- */
.abt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.abt-grid.compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.abt-card { background: var(--White); border-radius: 12px; padding: 16px; box-shadow: 0px 4px 24px 2px rgba(10, 10, 12, 0.05); display: flex; flex-direction: column; gap: 12px; }
.abt-card.touch { cursor: pointer; transition: transform .15s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.abt-card.touch:hover { box-shadow: 0px 8px 28px 2px rgba(10, 10, 12, 0.12); }
.abt-card.touch:active { transform: scale(.985); }
.abt-card .head { display: flex; align-items: center; gap: 12px; }
.abt-card .name { font-weight: 700; font-size: 15px; color: var(--Main-Dark); line-height: 1.2; }
.abt-card .meta { font-size: 12px; color: var(--Body-Text); }
.dark-theme .abt-card .meta { color: var(--Surface); }
.abt-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--Stroke); padding-top: 10px; margin-top: auto; }
.abt-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.abt-kv .k { font-size: 11px; color: var(--Note); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.abt-kv .v { font-size: 14px; color: var(--Main-Dark); font-weight: 600; margin-top: 2px; word-break: break-word; }
.abt-kv .v.accent { color: var(--Main); }

/* ---------- KPI ---------- */
.abt-kpi { display: flex; align-items: center; gap: 14px; }
.abt-kpi .hex { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.abt-kpi .hex svg { position: absolute; inset: 0; }
.abt-kpi .hex i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; }
.abt-kpi .label { font-size: 13px; color: var(--Body-Text); }
.dark-theme .abt-kpi .label { color: var(--Surface); }
.abt-kpi h4 { margin: 0; }
.abt-kpi .sub { font-size: 11px; margin: 0; }

/* ---------- Seções / painéis ---------- */
.wg-box.compact { padding: 16px; gap: 14px; }
.wg-box > .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wg-box > .head h5, .wg-box > .head h6 { margin: 0; }
.abt-section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--Main-Dark); margin: 0; }
.abt-section-title i { color: var(--Main); }
.abt-note { border-left: 3px solid var(--Main); background: var(--bg-1); border-radius: 6px; padding: 10px 14px; font-size: 13px; color: var(--Body-Text); line-height: 1.5; }
.abt-note.green { border-color: var(--abt-green); } .abt-note.blue { border-color: var(--abt-blue); } .abt-note.purple { border-color: var(--abt-purple); } .abt-note.red { border-color: var(--abt-red); }
.abt-note b { color: var(--Main-Dark); }
.dark-theme .abt-note { background: #30303080; color: var(--Surface); }
.abt-empty { text-align: center; padding: 40px 20px; color: var(--Note); }
.abt-empty i { font-size: 40px; display: block; margin-bottom: 12px; color: var(--Icon); }
.abt-empty .t { font-size: 15px; font-weight: 700; color: var(--Main-Dark); }

/* ---------- Campo de busca (.form-search em <div> ou <form>; o template só estiliza form.form-search) ---------- */
.form-search { position: relative; display: block; }
.form-search fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-search input[type=text], .form-search input[type=search] {
    width: 100%; height: 48px; padding: 0 48px 0 16px; border-radius: 12px;
    border: 1px solid var(--Surface-3); background: var(--White); color: var(--Main-Dark);
    font-size: 14px; line-height: 20px; letter-spacing: 0; outline: 0;
}
.form-search input::placeholder { color: var(--Note); font-size: 14px; }
.form-search input:focus { border-color: var(--Main); }
.form-search .button-submit { position: absolute; top: 50%; right: 14px; left: auto; transform: translateY(-50%); line-height: 0; }
.form-search .button-submit button { padding: 0; border: 0; background: transparent; font-size: 20px; color: var(--Note); cursor: pointer; }
.form-search .button-submit button:hover { color: var(--Main); }
.dark-theme .form-search input[type=text], .dark-theme .form-search input[type=search] { background: var(--Surface-3); border-color: var(--Stroke); color: var(--White); }
.dark-theme .form-search input::placeholder { color: var(--Note); }
.wg-filter .form-search { width: 100%; max-width: 420px; }

/* ---------- Formulários (complementos ao form-style-2) ---------- */
.abt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.abt-fields .full { grid-column: 1 / -1; }
form fieldset .body-title .req, .req { color: var(--abt-red); }
form fieldset .help { display: block; font-size: 11px; color: var(--Note); margin-top: 6px; line-height: 1.4; }
form .select { position: relative; }
form select { appearance: none; }
form input[type="date"], form input[type="time"] { color-scheme: light; }
.dark-theme form input[type="date"], .dark-theme form input[type="time"] { color-scheme: dark; }
form input:read-only:not([type="checkbox"]):not([type="radio"]) { opacity: .75; }
form input.is-invalid { box-shadow: 0 0 0 2px rgba(239, 68, 68, .45) !important; }
form input.is-valid { box-shadow: 0 0 0 2px rgba(34, 197, 94, .45) !important; }
.field-feedback { font-size: 11px; margin-top: 5px; display: block; }
.field-feedback.valid { color: var(--abt-green); } .field-feedback.invalid { color: var(--abt-red); }
.abt-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--Surface-3); cursor: pointer; }
.abt-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--Main); flex-shrink: 0; }
.abt-check b { display: block; font-size: 13px; color: var(--Main-Dark); }
.abt-check span { font-size: 11px; color: var(--Note); line-height: 1.4; }
.abt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.abt-chip { padding: 8px 14px; border-radius: 10px; background: var(--Surface-3); color: var(--Main-Dark); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.abt-chip:hover { border-color: var(--Main); }
.abt-chip.active { background: var(--Main); color: #fff; border-color: var(--Main); }
.abt-chip.green.active { background: var(--abt-green); border-color: var(--abt-green); }
.abt-chip.red.active { background: var(--abt-red); border-color: var(--abt-red); }
.abt-chip.blue.active { background: var(--abt-blue); border-color: var(--abt-blue); }
.abt-chip.purple.active { background: var(--abt-purple); border-color: var(--abt-purple); }
.abt-chip.grey.active { background: var(--Surface-3); color: var(--Note); border-color: var(--Stroke); border-style: dashed; }
.form-style-2 .wg-box .left { width: 300px; flex-shrink: 0; }
@media (max-width: 991px) { .form-style-2 .wg-box { flex-direction: column; } .form-style-2 .wg-box .left { width: 100%; } }

/* ---------- Bottom sheet (Bootstrap offcanvas-bottom) ---------- */
.offcanvas.abt-sheet { height: auto; max-height: 90vh; border: 0; border-radius: 20px 20px 0 0; background: var(--White); color: var(--Main-Dark); box-shadow: 0 -8px 40px rgba(0, 0, 0, .35); }
.offcanvas.abt-sheet .offcanvas-body { padding: 0 20px 24px; overflow-y: auto; }
.abt-sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--Surface); margin: 10px auto 6px; }
.abt-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 14px; border-bottom: 1px solid var(--Stroke); margin-bottom: 14px; }
.abt-sheet-head .title { font-size: 17px; font-weight: 800; color: var(--Main-Dark); line-height: 1.2; }
.abt-sheet-head .close { background: none; border: 0; font-size: 22px; color: var(--Note); cursor: pointer; padding: 4px; line-height: 1; }
.abt-sheet-options { display: flex; flex-direction: column; gap: 8px; }
.abt-sheet-option { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--Surface-3); border: 2px solid transparent; cursor: pointer; transition: all .15s; }
.abt-sheet-option .dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.abt-sheet-option .t { font-weight: 700; color: var(--Main-Dark); }
.abt-sheet-option .d { font-size: 11px; color: var(--Note); }
.abt-sheet-option.green .dot { background: rgba(34, 197, 94, .18); color: var(--abt-green); }
.abt-sheet-option.red .dot { background: rgba(239, 68, 68, .18); color: var(--abt-red); }
.abt-sheet-option.blue .dot { background: rgba(35, 119, 252, .18); color: var(--abt-blue); }
.abt-sheet-option.orange .dot { background: rgba(255, 116, 51, .18); color: var(--abt-orange); }
.abt-sheet-option.purple .dot { background: rgba(141, 121, 246, .18); color: var(--abt-purple); }
.abt-sheet-option.active, .abt-sheet-option:hover { border-color: var(--Main); }
.abt-sheet-option.green.active { border-color: var(--abt-green); } .abt-sheet-option.red.active { border-color: var(--abt-red); } .abt-sheet-option.blue.active { border-color: var(--abt-blue); } .abt-sheet-option.orange.active { border-color: var(--abt-orange); }
@media (min-width: 992px) {
    .offcanvas.abt-sheet.offcanvas-bottom { left: 50%; right: auto; width: min(640px, 96vw); margin-left: calc(min(640px, 96vw) / -2); bottom: 24px; border-radius: 20px; max-height: 88vh; }
    .abt-sheet-handle { display: none; }
}

/* ---------- Modais Bootstrap no visual do template ---------- */
.modal-content { background: var(--White); color: var(--Main-Dark); border: 0; border-radius: 16px; box-shadow: 0 12px 48px rgba(0, 0, 0, .35); }
.modal-header { border-bottom: 1px solid var(--Stroke); padding: 18px 24px; }
.modal-header .modal-title { font-size: 17px; font-weight: 800; color: var(--Main-Dark); margin: 0; display: flex; align-items: center; gap: 8px; }
.modal-header .modal-title i { color: var(--Main); }
.modal-header .btn-close { background: none; border: 0; font-size: 20px; color: var(--Note); cursor: pointer; padding: 4px; opacity: 1; width: auto; height: auto; }
.modal-body { padding: 20px 24px; }
.modal-footer { border-top: 1px solid var(--Stroke); padding: 14px 24px; gap: 10px; }
.modal-backdrop { background: #000; }
.modal-backdrop.show { opacity: .6; }
.dark-theme .modal-header, .dark-theme .modal-footer { border-color: #ffffff1f; }

/* ---------- Alertas ---------- */
.abt-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.abt-alert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.abt-alert.success { background: rgba(34, 197, 94, .12); color: #15803d; border-color: rgba(34, 197, 94, .3); }
.abt-alert.error { background: rgba(239, 68, 68, .12); color: #b91c1c; border-color: rgba(239, 68, 68, .3); }
.abt-alert.info { background: rgba(35, 119, 252, .12); color: #1d4ed8; border-color: rgba(35, 119, 252, .3); }
.dark-theme .abt-alert.success { color: #4ade80; } .dark-theme .abt-alert.error { color: #f87171; } .dark-theme .abt-alert.info { color: #60a5fa; }

/* ---------- Seletor de ano (Dashboard: "Vigência"; saiu do topo na 0.0.1.4) ---------- */
.abt-year { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 14px; border-radius: 12px; background: var(--Surface-3); color: var(--Main-Dark); }
.abt-year i { font-size: 18px; color: var(--Main); }
.abt-year select { width: auto; padding: 6px 28px 6px 6px; background: transparent; border: 0; font-weight: 700; font-size: 15px; color: var(--Main-Dark); cursor: pointer; }
.abt-year .select::after { right: 6px; font-size: 14px; }
.dark-theme .abt-year { background: #CBD5E11A; } .dark-theme .abt-year select { color: #fff; }
/* Usuário no topo: o template fixa .wg-user em 170px e nomes longos passavam da borda da tela. Agora a largura
   acompanha o nome (o bloco cresce para a esquerda), com limite e reticências para nomes muito grandes. */
.header-dashboard .header-user.wg-user { width: auto; max-width: 300px; min-width: 0; gap: 10px; }
.header-dashboard .header-user .text { min-width: 0; text-align: left; }
.header-dashboard .header-user .name, .header-dashboard .header-user .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-dashboard .wrap .header-grid { flex-shrink: 0; }
.header-user .image.initials { display: flex; align-items: center; justify-content: center; background: var(--Main); color: #fff; font-weight: 700; font-size: 13px; border-radius: 50%; width: 36px; height: 36px; }
.abt-brand-badge { font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 3px 8px; border-radius: 6px; background: var(--Main); color: #fff; text-transform: uppercase; }
.box-logo .abt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.box-logo .abt-brand img { max-height: 40px; max-width: 150px; object-fit: contain; }
.box-logo .abt-brand .t { font-size: 18px; font-weight: 800; color: var(--Main-Dark); line-height: 1; white-space: nowrap; }
.box-logo .abt-brand .t span { color: var(--Main); }
.menu-style-icon-default .box-logo .abt-brand .t { display: none; }
/* Sidebar mais larga que os 260px do template (submenus como "Configurações de Pagamento" eram cortados).
   No mobile (< 992px) o template usa left: -100% / 0, então só o desktop precisa das medidas. */
:root { --abt-sidebar-w: 300px; }
@media (min-width: 992px) {
    .layout-wrap .section-menu-left { width: var(--abt-sidebar-w); min-width: var(--abt-sidebar-w); }
    .layout-wrap .section-menu-left > .box-logo { width: var(--abt-sidebar-w); }
    .layout-wrap .section-content-right .main-content { padding-left: var(--abt-sidebar-w); }
    .header-dashboard { width: calc(100% - var(--abt-sidebar-w)); }
    .layout-wrap.full-width .section-menu-left,
    .layout-wrap.full-width .section-menu-left > .box-logo { left: calc(-1 * var(--abt-sidebar-w)); }
}
.layout-wrap .section-menu-left .menu-item.has-children .sub-menu .sub-menu-item { padding-left: 50px; padding-right: 12px; }
.layout-wrap .section-menu-left .menu-item.has-children .sub-menu a .text { font-size: 15px; white-space: nowrap; }
.section-menu-left .menu-item .icon i { font-size: 22px; color: var(--Main-Dark); }
.section-menu-left .menu-item.active .icon i, .section-menu-left .menu-item.active .text { color: var(--Main); }
.section-menu-left .center-heading { text-transform: uppercase; letter-spacing: .6px; }

/* ---------- Login ---------- */
.login-page .left { position: relative; background: #0A0A0C; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.login-page .left .login-art { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; object-position: center; padding: 40px; }
.login-page .left .brand-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; text-align: center; padding: 30px; }
.login-page .left .brand-overlay img { width: auto; height: auto; max-width: 260px; max-height: 260px; object-fit: contain; }
.login-page .left .brand-overlay h2 { color: #fff; margin: 0; }
.login-page .right { display: flex; align-items: center; justify-content: center; }
.login-page .login-box { max-width: 460px; margin: 0 auto; width: 100%; }
.login-page .login-box h3 { color: #fff; }
.login-page .login-box .abt-alert { margin-bottom: 0; width: 100%; }
.login-page form fieldset { position: relative; }
.login-page .show-pass { position: absolute; right: 18px; bottom: 15px; color: #999; cursor: pointer; font-size: 18px; }
@media (max-width: 991px) { .login-page { flex-direction: column; justify-content: flex-start; background: #0A0A0C; } .login-page .left { min-height: 220px; max-height: 32vh; flex-shrink: 0; } .login-page .left .login-art { max-height: 32vh; padding: 20px; } .login-page .right { flex: 1; } }

/* ---------- Barra fixa inferior no celular (chamada) ---------- */
.mobile-sticky-save { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px; background: var(--White); border-top: 1px solid var(--Stroke); box-shadow: 0 -6px 24px rgba(0, 0, 0, .25); }
@media (max-width: 991px) { .mobile-sticky-save { display: flex; } .has-sticky-bar { padding-bottom: 90px; } }

/* ---------- Pílulas de filtro de status (cobrança / integrantes) ---------- */
.abt-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.abt-filter-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--Surface-3); color: var(--Main-Dark); font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: all .15s; user-select: none; }
.abt-filter-pill .n { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--White); color: var(--Main-Dark); }
.abt-filter-pill.active { background: var(--Main); color: #fff; }
.abt-filter-pill.active .n { background: rgba(255, 255, 255, .25); color: #fff; }
@media (max-width: 600px) { .abt-filter-pills { display: grid; grid-template-columns: 1fr 1fr; } .abt-filter-pill { height: 46px; justify-content: center; } }

/* ---------- Paginação / rodapé de lista ---------- */
.abt-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 8px; }

/* ---------- Campo de arquivo simples (comprovantes) ---------- */
input[type="file"].abt-file { width: 100%; padding: 10px 12px; border: 1px dashed var(--Stroke); border-radius: 12px; background: var(--Surface-3); color: var(--Body-Text); font-size: 13px; cursor: pointer; }
input[type="file"].abt-file:hover { border-color: var(--Main); }
input[type="file"].abt-file::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--Main); color: #fff; font-weight: 700; cursor: pointer; }

/* ---------- Repasses (Estudo 13) ---------- */
.abt-repasse { display: flex; flex-direction: column; gap: 16px; }
.abt-repasse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.abt-repasse-qtds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.abt-repasse-qtds .q { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--Surface-3); border: 1px solid transparent; cursor: pointer; text-align: left; transition: border-color .15s; }
.abt-repasse-qtds .q:hover { border-color: var(--Main); }
.abt-repasse-qtds .q b { font-size: 18px; line-height: 22px; color: var(--Main-Dark); }
.abt-repasse-qtds .q span { font-size: 12px; color: var(--Note); }
.abt-repasse-linhas { display: flex; flex-direction: column; border: 1px solid var(--Stroke); border-radius: 12px; overflow: hidden; }
.abt-repasse-linhas .l { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--Stroke); font-size: 14px; color: var(--Body-Text); }
.abt-repasse-linhas .l:last-child { border-bottom: 0; }
.abt-repasse-linhas .l small { display: block; font-size: 12px; color: var(--Note); }
.abt-repasse-linhas .l b { color: var(--Main-Dark); white-space: nowrap; }
.abt-repasse-linhas .l.destaque { background: var(--Surface-3); }
.abt-repasse-linhas .l.saldo { background: color-mix(in srgb, var(--abt-green) 12%, transparent); }
.abt-repasse-linhas .l.saldo b { font-size: 17px; color: var(--abt-green); }
.abt-repasse-linhas .l.saldo.negativo { background: color-mix(in srgb, var(--abt-red) 12%, transparent); }
.abt-repasse-linhas .l.saldo.negativo b { color: var(--abt-red); }
.abt-repasse-linhas button.link, .abt-repasse-linhas .l small button { background: none; border: 0; padding: 0; color: var(--Main); font-size: 12px; text-decoration: underline; cursor: pointer; }
.abt-repasse-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.abt-repasse-lista { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.abt-repasse-lista .item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--Stroke); font-size: 14px; }
.abt-repasse-lista .item b { color: var(--Main-Dark); }
.abt-repasse-lista .item span { color: var(--Note); font-size: 12px; text-align: right; }
.print-only { display: none; }
@media (max-width: 600px) { .abt-repasse-qtds { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Impressão ---------- */
@media print {
    .print-only { display: block !important; color: #000; }
    .section-menu-left, .header-dashboard, .bottom-page, .no-print, .abt-alert, .mobile-sticky-save { display: none !important; }
    .section-content-right, .main-content, .main-content-inner, .main-content-wrap { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    body, .main-content { background: #fff !important; color: #000 !important; }
    .wg-box { box-shadow: none !important; border: 1px solid #ddd; page-break-inside: avoid; }
}

/* ---------- Compatibilidade com classes antigas (telas ainda não convertidas) ---------- */
.panel { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 12px; background: var(--White); box-shadow: 0px 4px 24px 2px rgba(10, 10, 12, 0.05); margin-bottom: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--Secondary); background: var(--Main); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: all .2s; white-space: nowrap; }
.btn:hover { background: var(--Style); color: #fff; }
.btn.alt { background: transparent; color: var(--Main); }
.btn.alt:hover { background: var(--Main); color: #fff; }
.btn-sm { height: 32px; padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--abt-red); background: transparent; color: var(--abt-red); font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-danger:hover { background: var(--abt-red); color: #fff; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--Main-Dark); margin-bottom: 6px; }
.form-control { width: 100%; padding: 12px 16px; border-radius: 12px; border: 0; background: var(--Surface-3); color: var(--Main-Dark); font-size: 14px; }
h1 { font-size: 24px; font-weight: 800; margin: 0; color: var(--Main-Dark); }
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }
.table-responsive > table { min-width: max-content; }
table th { text-align: left; font-size: 12px; color: var(--Note); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--Stroke); }
table td { padding: 10px 12px; border-bottom: 1px solid var(--Stroke); font-size: 13px; color: var(--Main-Dark); vertical-align: middle; }

/* ---------- Grades responsivas de seção ---------- */
.abt-cols-2, .abt-cols-3, .abt-cols-4 { display: grid; gap: 20px; }
.abt-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.abt-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.abt-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mb-30 { margin-bottom: 30px; }

/* ---------- Perfil do integrante ---------- */
.abt-show-grid { display: grid !important; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .abt-show-grid { grid-template-columns: 1fr; } }
.widget-tabs .widget-menu-tab .item-title .inner i { margin-right: 4px; }

/* ---------- Upload compacto ---------- */
.upload-image .uploadfile { height: auto; min-height: 140px; padding: 16px; }
.upload-image .uploadfile .icon { font-size: 30px; }
.upload-image .uploadfile img#myFile-input { display: none; }
.abt-card .upload-image { margin-bottom: 0; }

/* Bloco de código / JSON (auditoria) */
.abt-pre { background: var(--Surface-3); border: 1px solid var(--Stroke); padding: 12px; border-radius: 8px; font-size: 11px; color: var(--Body-Text); max-height: 380px; overflow: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }

/* Token de superfície secundária: o template mantém --Surface-3 claro (#F6F6F6) mesmo no escuro
   e só o corrige dentro de .wg-table; aqui aplicamos a mesma correção globalmente. */
.dark-theme { --Surface-3: #30303080; }

/* <code> inline: o template aplica margem/padding de bloco a code/pre; aqui viram trechos inline discretos */
code, kbd, samp { display: inline; margin: 0; padding: 1px 6px; border-radius: 4px; background: var(--Surface-3); color: var(--Main); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; line-height: 1.4; border: 0; }
pre { margin: 0; }

/* ---------- OCR da CNH (Estudo 10): captura, confirmação tátil, realce e toast ---------- */
.abt-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--Stroke); border-top-color: var(--Main); border-radius: 50%; animation: abt-spin .8s linear infinite; vertical-align: middle; }
@keyframes abt-spin { to { transform: rotate(360deg); } }
.abt-ocr-progresso { display: flex; align-items: center; gap: 12px; padding: 18px 14px; border-radius: 12px; background: var(--Surface-3); font-weight: 600; color: var(--Main-Dark); }
.abt-ocr-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border-radius: 12px; background: var(--Surface-3); cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.abt-ocr-row:has(input:checked) { border-color: var(--Main); }
.abt-ocr-row input { width: 24px; height: 24px; accent-color: var(--Main); flex-shrink: 0; }
.abt-ocr-row .rot { font-size: 11px; color: var(--Note); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.abt-ocr-row .novo { font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--Main-Dark); word-break: break-word; }
.abt-ocr-row .atual { font-size: 13px; color: var(--Note); text-decoration: line-through; }
.abt-ocr-row.invalido .novo { color: var(--abt-red); text-decoration: none; }
.abt-ocr-realce { box-shadow: 0 0 0 3px rgba(255, 116, 51, .45) !important; border-color: var(--Main) !important; transition: box-shadow 1.2s ease 2.2s; }
.abt-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); z-index: 1090; display: flex; align-items: center; gap: 14px; max-width: min(92vw, 560px); padding: 12px 16px; border-radius: 14px; background: var(--Main-Dark); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.35; }
.dark-theme .abt-toast { background: #1f1f1f; border: 1px solid var(--Stroke); }
.abt-toast i { color: var(--Main); font-size: 18px; flex-shrink: 0; }
.abt-toast .tf-button { flex-shrink: 0; }
.abt-toast .fechar { background: none; border: 0; color: inherit; opacity: .7; font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; }

/* ---------- Estudo 11: Sub-sedes (seletor do header, alcance, padrinhos) ---------- */
.abt-subsede { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 14px; border-radius: 12px; background: var(--Surface-3); color: var(--Main-Dark); max-width: 260px; }
.abt-subsede i { font-size: 18px; color: var(--Main); flex-shrink: 0; }
.abt-subsede select { width: auto; max-width: 200px; padding: 6px 28px 6px 6px; background: transparent; border: 0; font-weight: 700; font-size: 15px; color: var(--Main-Dark); cursor: pointer; text-overflow: ellipsis; }
.abt-subsede .select::after { right: 6px; font-size: 14px; }
.abt-subsede .fixo { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark-theme .abt-subsede { background: #CBD5E11A; } .dark-theme .abt-subsede select, .dark-theme .abt-subsede .fixo { color: #fff; }
@media (max-width: 575px) { .abt-subsede { max-width: 150px; padding: 0 8px 0 10px; } .abt-subsede select { max-width: 110px; font-size: 13px; } .abt-subsede .fixo { font-size: 12px; } }
.abt-alcance { border: 1px solid var(--Stroke); border-radius: 12px; background: var(--Surface-3); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.abt-alcance .opcao { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--White); border: 1px solid var(--Stroke); cursor: pointer; margin: 0; }
.abt-alcance .opcao:hover, .abt-alcance .opcao.ativa { border-color: var(--Main); }
.abt-alcance .opcao input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--Main); flex-shrink: 0; }
.abt-alcance .opcao b { display: block; font-size: 14px; color: var(--Main-Dark); }
.abt-alcance .opcao .d { font-size: 13px; color: var(--Note); line-height: 1.4; }
.abt-alcance .lista { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 0 30px; }
.abt-alcance .lista.desligada { opacity: .45; pointer-events: none; }
.abt-alcance .lista label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--White); border: 1px solid var(--Stroke); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--Main-Dark); margin: 0; }
.abt-alcance .lista label input { width: 16px; height: 16px; accent-color: var(--Main); }
.abt-alcance .lista label:has(input:checked) { border-color: var(--Main); background: color-mix(in srgb, var(--Main) 12%, transparent); }
/* Escolha de Sub-sedes por Estado (usuários): resumo em chips + janela sobreposta ao modal do usuário */
.abt-esc-resumo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: 30px; }
.abt-esc-resumo.desligada { opacity: .45; pointer-events: none; }
.abt-esc-resumo .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.abt-esc-resumo .chips .vazio { font-size: 13px; color: var(--abt-red); }
.abt-esc-resumo .chips .total { font-size: 13px; font-weight: 700; color: var(--Main-Dark); margin-right: 4px; }
.abt-esc-resumo .abt-chip { cursor: default; padding: 6px 10px; }
.abt-esc-resumo .abt-chip small { color: var(--Note); font-weight: 600; }
.abt-esc-resumo .abt-chip .x { background: none; border: 0; padding: 0 0 0 2px; color: var(--Note); cursor: pointer; line-height: 1; }
.abt-esc-resumo .abt-chip .x:hover { color: var(--abt-red); }
.abt-esc-filtros { grid-template-columns: 1fr 1.4fr; }
.abt-esc-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.abt-esc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.abt-esc-lista label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--Surface-3); border: 1px solid transparent; cursor: pointer; margin: 0; font-size: 14px; color: var(--Main-Dark); }
.abt-esc-lista label:has(input:checked) { border-color: var(--Main); background: color-mix(in srgb, var(--Main) 12%, transparent); }
.abt-esc-lista label input { width: 18px; height: 18px; accent-color: var(--Main); flex-shrink: 0; }
.abt-esc-lista label span { flex: 1; }
.abt-esc-lista label small { color: var(--Note); font-size: 12px; }
.abt-esc-lista .abt-empty { grid-column: 1 / -1; }
.modal.abt-modal-sobreposto { z-index: 1065; }
.modal-backdrop.abt-backdrop-sobreposto { z-index: 1060; }
@media (max-width: 767px) { .abt-alcance .lista, .abt-esc-resumo { padding-left: 0; } .abt-esc-lista, .abt-esc-filtros { grid-template-columns: 1fr; } }
.abt-padrinhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 46px; padding: 6px 10px; border: 1px solid var(--Stroke); border-radius: 12px; background: var(--White); }
.abt-padrinhos .vazio { font-size: 13px; color: var(--Note); }
.abt-padrinhos .abt-chip { padding: 6px 10px; }
.abt-padrinhos .abt-chip .x { display: inline-flex; margin-left: 2px; opacity: .75; }
.abt-padrinhos .abt-chip .x:hover { opacity: 1; }
.abt-padrinhos-lista { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 12px; }
.abt-padrinhos-lista label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--Stroke); background: var(--Surface-3); cursor: pointer; margin: 0; min-height: 52px; }
.abt-padrinhos-lista label input { width: 20px; height: 20px; accent-color: var(--Main); flex-shrink: 0; }
.abt-padrinhos-lista label .n { font-weight: 700; color: var(--Main-Dark); font-size: 14px; }
.abt-padrinhos-lista label .s { font-size: 12px; color: var(--Note); }
.abt-padrinhos-lista label:has(input:checked) { border-color: var(--Main); }
.abt-padrinhos-lista label.oculto { display: none; }
#sheetPadrinhos fieldset { margin: 0; }
#padrinhosBusca { width: 100%; }

/* Relatório financeiro: mês em aberto clicável (abre a baixa da Cobrança) */
.abt-baixa { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.abt-baixa:hover, .abt-baixa:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px currentColor; outline: none; }
@media print { .abt-baixa:hover { transform: none; box-shadow: none; } }

/* Formulário de integrante: entrada e saída lado a lado, retorno na linha de baixo */
.abt-fields .abt-quebra-linha { grid-column: 1 / -1; height: 0; margin-top: -16px; }

/* Selects com seta desenhada (::after): a seta fica por cima do select e "comia" o clique (só o meio respondia).
   pointer-events: none deixa o clique passar para o select em qualquer ponto. */
.tf-select::after,
.select::after { pointer-events: none; }

/* ---------- Manual do sistema (0.0.1.4) ---------- */
.abt-manual-card { text-decoration: none; }
.abt-manual-icone { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--Surface-3); color: var(--Main); font-size: 22px; }
.abt-manual { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.abt-manual-indice { position: sticky; top: 100px; }
.abt-manual-indice ul { display: flex; flex-direction: column; gap: 2px; }
.abt-manual-indice li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--Body-Text); font-size: 14px; }
.abt-manual-indice li a:hover { background: var(--Surface-3); color: var(--Main-Dark); }
.abt-manual-indice li.active a { background: var(--Surface-3); color: var(--Main); font-weight: 700; }
.abt-manual-conteudo { gap: 18px; font-size: 15px; line-height: 1.65; color: var(--Body-Text); }
.abt-manual-conteudo h5.abt-section-title { margin-top: 12px; }
.abt-manual-conteudo h5.abt-section-title:first-child { margin-top: 0; }
.abt-manual-conteudo p { margin: 0; color: inherit; }
.abt-manual-conteudo b, .abt-manual-conteudo strong { color: var(--Main-Dark); }
.abt-manual-conteudo ul.lista, .abt-manual-conteudo ol.lista { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; margin: 0; }
.abt-manual-conteudo ul.lista { list-style: disc; }
.abt-manual-conteudo ol.lista { list-style: decimal; }
.abt-manual-conteudo table { width: 100%; border-collapse: collapse; font-size: 14px; }
.abt-manual-conteudo th, .abt-manual-conteudo td { border: 1px solid var(--Stroke); padding: 8px 10px; text-align: left; vertical-align: top; }
.abt-manual-conteudo th { background: var(--Surface-3); color: var(--Main-Dark); }
.abt-manual-print { margin: 4px 0; border: 1px solid var(--Stroke); border-radius: 12px; overflow: hidden; background: var(--Surface-3); }
.abt-manual-print img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.abt-manual-print figcaption { padding: 8px 12px; font-size: 13px; color: var(--Note); }
.abt-manual-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--Stroke); padding-top: 16px; margin-top: 8px; }
@media (max-width: 1199px) {
    .abt-manual { grid-template-columns: 1fr; }
    .abt-manual-indice { position: static; order: -1; }
    .abt-manual-indice ul { flex-direction: row; flex-wrap: wrap; }
    .abt-manual-indice li a { padding: 6px 10px; font-size: 13px; background: var(--Surface-3); }
}