/* Portal SGalvao - refinamento visual sobre o Filament (claro e escuro) */

:root {
    --portal-radius: 14px;
    --portal-radius-sm: 10px;
    --portal-border: rgb(15 23 42 / 0.08);
    --portal-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.12);
}
.dark {
    --portal-border: rgb(255 255 255 / 0.08);
    --portal-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
}

/* Fundo com leve tom frio no claro */
html:not(.dark) body.fi-body {
    background: linear-gradient(180deg, #f6f8fc 0%, #f1f4f9 100%);
    background-attachment: fixed;
}

/* Barra superior translucida */
.fi-topbar {
    background: color-mix(in srgb, white 82%, transparent) !important;
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--portal-border) !important;
    box-shadow: none !important;
}
.dark .fi-topbar { background: color-mix(in srgb, #0b1220 80%, transparent) !important; }

/* Menu lateral */
.fi-sidebar, .fi-main-sidebar {
    border-right: 1px solid var(--portal-border) !important;
    box-shadow: none !important;
}
html:not(.dark) .fi-sidebar { background: #fff !important; }
.fi-sidebar-item-btn {
    border-radius: var(--portal-radius-sm) !important;
    transition: background-color .15s ease, color .15s ease;
}
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background: color-mix(in srgb, var(--primary-500) 8%, transparent) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: color-mix(in srgb, var(--primary-500) 12%, transparent) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-icon {
    color: var(--primary-600) !important;
    font-weight: 600;
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active .fi-icon { color: var(--primary-400) !important; }
/* Modulos (grupos do menu) em destaque: faixa na cor da empresa com borda lateral, bem diferente dos itens e submenus */
.fi-sidebar-group { margin-top: .35rem; }
.fi-sidebar-group-btn {
    background: color-mix(in srgb, var(--primary-500) 10%, transparent);
    border-left: 3px solid var(--primary-500);
    border-radius: var(--portal-radius-sm);
    padding: .5rem .7rem !important;
    margin-bottom: .2rem;
}
.fi-sidebar-group-label {
    font-size: .74rem !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 800 !important;
    color: var(--primary-700) !important;
    opacity: 1;
}
.dark .fi-sidebar-group-label { color: var(--primary-300) !important; }
.fi-sidebar-group-btn .fi-icon { color: var(--primary-600); }
.dark .fi-sidebar-group-btn .fi-icon { color: var(--primary-300); }

/* Titulos de pagina */
.fi-header-heading {
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* Cartoes: secoes, tabelas, widgets */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-modal-window {
    border-radius: var(--portal-radius) !important;
    border: 1px solid var(--portal-border) !important;
    box-shadow: var(--portal-shadow) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.fi-section-header-heading { font-weight: 650; letter-spacing: -0.01em; }

/* Tabelas */
.fi-ta-header-cell {
    font-size: .7rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600 !important;
}
html:not(.dark) .fi-ta-table thead tr { background: #f8fafc !important; }
.fi-ta-row { transition: background-color .12s ease; }
.fi-ta-row:hover { background: color-mix(in srgb, var(--primary-500) 5%, transparent) !important; }

/* Botoes e campos */
.fi-btn { border-radius: var(--portal-radius-sm) !important; font-weight: 600; transition: transform .08s ease, box-shadow .15s ease, filter .15s ease; }
.fi-btn:active { transform: translateY(1px); }
.fi-btn.fi-color-primary:not(.fi-outlined) { box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 6px 14px -8px var(--primary-600); }
.fi-input-wrp { border-radius: var(--portal-radius-sm) !important; }
.fi-badge { border-radius: 999px !important; font-weight: 600; }

/* Login */
.fi-simple-layout {
    background:
        radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--primary-500) 18%, transparent), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, color-mix(in srgb, var(--primary-400) 14%, transparent), transparent 55%),
        #f6f8fc;
}
.dark .fi-simple-layout { background: radial-gradient(1000px 500px at 80% -10%, color-mix(in srgb, var(--primary-500) 20%, transparent), transparent 60%), #0b1220; }
.fi-simple-main {
    border-radius: 20px !important;
    border: 1px solid var(--portal-border) !important;
    box-shadow: 0 24px 60px -24px rgb(15 23 42 / .25) !important;
}

/* Painel inicial */
.portal-hero {
    border-radius: var(--portal-radius);
    padding: 1.75rem 1.75rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-600), color-mix(in srgb, var(--primary-600) 55%, #0f172a));
    box-shadow: var(--portal-shadow);
    position: relative;
    overflow: hidden;
}
.portal-hero::after {
    content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: rgb(255 255 255 / .10);
}
.portal-hero h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.portal-hero p { margin: .35rem 0 0; opacity: .85; font-size: .95rem; }
.portal-hero .logo { background: rgb(255 255 255 / .95); border-radius: 12px; padding: .5rem .75rem; display: inline-flex; margin-bottom: 1rem; }
.portal-hero .logo img { height: 2rem; }

.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.portal-card {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.15rem;
    border-radius: var(--portal-radius); border: 1px solid var(--portal-border);
    background: #fff; box-shadow: var(--portal-shadow); text-decoration: none; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dark .portal-card { background: rgb(255 255 255 / .04); }
a.portal-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary-500) 45%, transparent); }
.portal-card .ico {
    width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--primary-500) 14%, transparent); color: var(--primary-600);
}
.dark .portal-card .ico { color: var(--primary-400); }
.portal-card .ico svg { width: 1.3rem; height: 1.3rem; }
.portal-card strong { font-size: .98rem; font-weight: 650; }
.portal-card small { opacity: .65; }
.portal-card.off { opacity: .6; }
.portal-section-title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; opacity: .6; margin: 1.4rem 0 .7rem; }
.portal-hero .logo.sobre-cor { background: rgb(255 255 255 / .14); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / .25); }
.portal-hero .logo img { height: 2.4rem; width: auto; display: block; }

/* ---- Modo escuro ---- */
.portal-logo-claro { display: inline-flex; align-items: center; }
.dark .portal-logo-claro { background: #fff; padding: .3rem .75rem; border-radius: 10px; }

.dark body.fi-body { background: #0b1220; }
.dark .fi-sidebar { background: #0f172a !important; }
.dark .fi-ta-table thead tr { background: rgb(255 255 255 / .04) !important; }
.dark .fi-section, .dark .fi-ta-ctn, .dark .fi-modal-window { background: #111a2e !important; }
.dark .fi-input-wrp { background: rgb(255 255 255 / .04) !important; }
.dark .portal-card { background: #111a2e; }
.dark .portal-card .ico { background: color-mix(in srgb, var(--primary-500) 22%, transparent); }
.dark .portal-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-600) 85%, #000), color-mix(in srgb, var(--primary-600) 35%, #020617)); }
.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover { background: rgb(255 255 255 / .06) !important; }
.dark .fi-ta-row:hover { background: rgb(255 255 255 / .04) !important; }

/* ---- Responsivo ---- */
.portal-empresa-btn { max-width: 100%; }
.portal-empresa-nome { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* tabelas: rolagem horizontal suave e barra de acoes compacta */
.fi-ta-content { -webkit-overflow-scrolling: touch; }
.fi-ta-header-ctn { gap: .5rem; flex-wrap: wrap; }

@media (max-width: 1023px) {
    .portal-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 640px) {
    .portal-empresa-nome { max-width: 6.5rem; }
    .fi-topbar { padding-inline: .5rem !important; }
    .fi-header { gap: .75rem; }
    .fi-header-heading { font-size: 1.4rem !important; }
    .portal-hero { padding: 1.1rem 1.1rem; }
    .portal-hero h2 { font-size: 1.25rem; }
    .portal-hero::after { width: 140px; height: 140px; right: -50px; top: -50px; }
    .portal-hero .logo img { height: 1.8rem; }
    .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .portal-card { padding: .85rem .9rem; }
    .portal-card strong { font-size: .88rem; }
    .portal-card small { font-size: .72rem; }
    .fi-section-content-ctn, .fi-section-header { padding-inline: 1rem !important; }
    .fi-simple-main { border-radius: 16px !important; }
}

/* acoes-compactas: no celular/tablet estreito, as acoes da linha viram so icones */
@media (max-width: 767px) {
    .fi-ta-actions { flex-wrap: nowrap !important; gap: .6rem !important; }
    .fi-ta-actions .fi-link { font-size: 0 !important; gap: 0 !important; padding: .35rem; }
    .fi-ta-actions .fi-link .fi-icon { width: 1.3rem !important; height: 1.3rem !important; }
    .fi-ta-header-ctn { padding-inline: .75rem !important; }
}

/* acoes-fixas: a coluna do botao de acoes fica visivel ao rolar listagens largas */
.fi-ta-table th.fi-ta-actions-header-cell,
.fi-ta-table td:has(> .fi-ta-actions) { position: sticky; left: 0; z-index: 2; width: 1%; white-space: nowrap; box-shadow: 1px 0 0 var(--portal-border); }
html:not(.dark) .fi-ta-table td:has(> .fi-ta-actions) { background: #fff; }
html:not(.dark) .fi-ta-table th.fi-ta-actions-header-cell { background: #f8fafc; }
.dark .fi-ta-table td:has(> .fi-ta-actions) { background: #111a2e; }
.dark .fi-ta-table th.fi-ta-actions-header-cell { background: #162036; }

/* menu-acoes-na-frente: a celula com o menu aberto passa por cima das colunas fixas das outras linhas */
.fi-ta-table td:has(> .fi-ta-actions):focus-within,
.fi-ta-table td:has(> .fi-ta-actions):has(.fi-dropdown-panel:not([style*="display: none"])) { z-index: 60; }
.fi-ta-table .fi-dropdown-panel { z-index: 70; min-width: 12rem; }

/* botao-acoes-engrenagem: botao pequeno com borda, engrenagem e seta (abre o menu da linha) */
.fi-ta-actions .fi-dropdown-trigger .fi-icon-btn {
    width: auto !important; height: auto !important;
    padding: .3rem .45rem !important; gap: .3rem;
    border: 1px solid var(--portal-border); border-radius: 8px !important;
    display: inline-flex; align-items: center;
}
.fi-ta-actions .fi-dropdown-trigger .fi-icon-btn::after {
    content: ""; display: inline-block; margin-left: .1rem;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
    opacity: .75;
}
.fi-ta-actions .fi-dropdown-trigger .fi-icon-btn:hover { background: color-mix(in srgb, var(--primary-500) 10%, transparent); }

/* ---- Avisos de pagina (ex.: relatorio contabil) ---- */
.portal-nota { padding: .65rem .9rem; border-radius: var(--portal-radius-sm); font-size: .88rem;
    background: color-mix(in srgb, var(--primary-500) 8%, transparent); border: 1px solid var(--portal-border); }
.portal-nota-alerta { background: rgb(245 158 11 / .10); border-color: rgb(245 158 11 / .35); }

/* icones-nos-submenus: itens dentro de um submenu (ex.: Financeiro > Relatorios) mostram o icone, nao o pontinho */
.fi-sidebar-sub-group-items .fi-sidebar-item-icon { display: block !important; }
.fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border { display: none !important; }

/* submenu-sanfona: itens de dentro menores, recuados, com guia lateral; pai abre/fecha como sanfona */
.fi-sidebar-sub-group-items {
    margin: .1rem 0 .35rem 1.15rem; padding-left: .4rem;
    border-left: 1px solid var(--portal-border);
}
.fi-sidebar-sub-group-items .fi-sidebar-item-label { font-size: .8rem !important; }
.fi-sidebar-sub-group-items .fi-sidebar-item-icon { width: 1.05rem !important; height: 1.05rem !important; }
.fi-sidebar-sub-group-items .fi-sidebar-item-btn { padding-block: .3rem !important; gap: .55rem; }

.fi-sidebar-item.portal-sub > .fi-sidebar-sub-group-items { display: none; }
.fi-sidebar-item.portal-sub.portal-sub-open > .fi-sidebar-sub-group-items { display: block; }
.fi-sidebar-item.portal-sub > .fi-sidebar-item-btn { cursor: pointer; user-select: none; }
.fi-sidebar-item.portal-sub > .fi-sidebar-item-btn::after {
    content: ""; margin-left: auto; width: .45rem; height: .45rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .55;
    transform: rotate(-45deg); transition: transform .18s ease;
}
.fi-sidebar-item.portal-sub.portal-sub-open > .fi-sidebar-item-btn::after { transform: rotate(45deg); }

/* menu-recolhido (desktop): so os icones dos itens principais; sem submenus, setinha e guia, e uma linha separa os grupos (os titulos somem) */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-sub-group-items,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.portal-sub > .fi-sidebar-item-btn::after { display: none !important; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--portal-border); }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group:first-child { border-top: 0; padding-top: 0; }
}

/* menu-rapido (desktop): o Filament atrasa 0,1s e anima titulos/rotulos ao abrir e fechar o menu e o conteudo desliza junto; aqui troca na hora */
@media (min-width: 1024px) {
    .fi-sidebar, .fi-main-ctn, .fi-sidebar-item-label, .fi-sidebar-item-badge-ctn, .fi-sidebar-group-btn, .fi-sidebar-group-items,
    .fi-sidebar-group-dropdown-trigger-btn { transition: none !important; }
}

/* dashboard-financeiro: listas (saldos, vencimentos, atrasos) */
.portal-lista { list-style: none; margin: 0; padding: 0; }
.portal-lista li { display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .55rem 0; border-bottom: 1px solid var(--portal-border); }
.portal-lista li:last-child { border-bottom: 0; }
.portal-lista-esq { display: flex; flex-direction: column; min-width: 0; }
.portal-lista-titulo { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-lista-sub { font-size: .74rem; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-lista-dir { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex-shrink: 0; }
.portal-lista-valor { font-weight: 650; font-size: .92rem; font-variant-numeric: tabular-nums; }
.portal-lista-valor.cor-erro { color: rgb(239 68 68); }
.portal-lista-valor.cor-ok { color: rgb(22 163 74); }
.dark .portal-lista-valor.cor-ok { color: rgb(74 222 128); }
.portal-lista-vazio { opacity: .6; font-size: .9rem; margin: .25rem 0; }
.portal-lista-rodape { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--portal-border); font-weight: 700; text-align: right; }
.portal-chip { font-size: .68rem; font-weight: 600; padding: .08rem .5rem; border-radius: 999px; white-space: nowrap; }
.portal-chip.chip-erro { background: rgb(239 68 68 / .14); color: rgb(220 38 38); }
.portal-chip.chip-alerta { background: rgb(245 158 11 / .16); color: rgb(180 83 9); }
.portal-chip.chip-info { background: rgb(59 130 246 / .12); color: rgb(37 99 235); }
.dark .portal-chip.chip-erro { color: rgb(252 165 165); }
.dark .portal-chip.chip-alerta { color: rgb(252 211 77); }
.dark .portal-chip.chip-info { color: rgb(147 197 253); }

/* graficos-altura: graficos com altura propria (sem isso ficam achatados em tela estreita) */
.fi-wi-chart-canvas-ctn { height: 300px; }
@media (max-width: 640px) { .fi-wi-chart-canvas-ctn { height: 260px; } }

/* cores de valores: recebimentos/entradas em verde, pagamentos/saidas em vermelho */
.portal-v-ok { color: rgb(22 163 74); }
.portal-v-erro { color: rgb(220 38 38); }
.dark .portal-v-ok { color: rgb(74 222 128); }
.dark .portal-v-erro { color: rgb(248 113 113); }
/* botoes de funcao: fundo claro da cor, borda e icone coloridos (so o botao principal fica cheio) */
.fi-btn.fi-outlined.fi-color-info { background: color-mix(in srgb, var(--info-500) 11%, transparent); }
.fi-btn.fi-outlined.fi-color-warning { background: color-mix(in srgb, var(--warning-500) 13%, transparent); }
.fi-btn.fi-outlined.fi-color-success { background: color-mix(in srgb, var(--success-500) 11%, transparent); }
.fi-btn.fi-outlined.fi-color-danger { background: color-mix(in srgb, var(--danger-500) 10%, transparent); }
.fi-btn.fi-outlined.fi-color-gray { background: color-mix(in srgb, currentColor 5%, transparent); }
.fi-btn.fi-outlined:hover { filter: brightness(1.06); }

/* =====================================================================
   RODADA DE VISUAL MODERNO
   ===================================================================== */

/* movimento suave ao abrir telas (respeita quem prefere sem animacao).
   "backwards" (e nao "both"): depois da animacao nao fica transform nenhum na pagina. Uma transform presa vira
   o referencial dos elementos "fixed" e desloca os modais para baixo (modal cortado no fim da tela). */
@media (prefers-reduced-motion: no-preference) {
    .fi-main > * { animation: portal-entra .28s ease backwards; }
    @keyframes portal-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* espacamento mais respirado no conteudo */
.fi-main { row-gap: 1.25rem; }
.fi-page-header-main-ctn { row-gap: 1.1rem; }
.fi-breadcrumbs { font-size: .78rem; opacity: .75; }

/* --- cards de indicadores: faixa de cor + numero grande ------------------ */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.fi-wi-stats-overview-stat:hover { transform: translateY(-2px); }
.fi-wi-stats-overview-stat::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: rgb(148 163 184 / .6);
}
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-description.fi-color-danger)::before { background: rgb(220 38 38); }
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-description.fi-color-success)::before { background: rgb(22 163 74); }
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-description.fi-color-warning)::before { background: rgb(217 119 6); }
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-description.fi-color-danger) { background-image: linear-gradient(135deg, rgb(220 38 38 / .05), transparent 55%); }
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-description.fi-color-success) { background-image: linear-gradient(135deg, rgb(22 163 74 / .06), transparent 55%); }
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-description.fi-color-warning) { background-image: linear-gradient(135deg, rgb(217 119 6 / .07), transparent 55%); }
.fi-wi-stats-overview-stat-label { font-size: .78rem !important; letter-spacing: .02em; font-weight: 600 !important; opacity: .8; }
.fi-wi-stats-overview-stat-value { letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* numeros alinhados em colunas (valores, saldos) */
.fi-ta-cell, .portal-v-ok, .portal-v-erro { font-variant-numeric: tabular-nums; }

/* --- tabelas -------------------------------------------------------------- */
/* NAO usar overflow:hidden no cartao da tabela: ele corta o painel de filtros e os menus quando a lista e curta ou vazia.
   Os cantos arredondados ficam por conta do conteudo da tabela e do rodape. */
.fi-ta-ctn { overflow: visible; }
.fi-ta-content-ctn { border-radius: 0 0 var(--portal-radius) var(--portal-radius); overflow-x: auto; }
.fi-ta-ctn > .fi-ta-footer-ctn, .fi-ta-ctn > .fi-pagination { border-radius: 0 0 var(--portal-radius) var(--portal-radius); }
.fi-ta-header-toolbar { padding-block: .6rem; }
.fi-ta-table thead th { position: sticky; top: 0; z-index: 2; }
html:not(.dark) .fi-ta-table thead th { background: #f8fafc; }
.dark .fi-ta-table thead th { background: color-mix(in srgb, #0b1220 70%, #1e293b); }
.fi-ta-row:not(:last-child) .fi-ta-cell { border-bottom-color: var(--portal-border); }
.fi-ta-row .fi-ta-cell:first-child { padding-left: .6rem; }
.fi-ta-text-item.fi-size-sm, .fi-ta-text { line-height: 1.35; }
.fi-ta-empty-state { padding-block: 3rem; }
.fi-ta-empty-state-icon-bg { background: color-mix(in srgb, var(--primary-500) 14%, transparent) !important; }

/* abas (Todas / Atrasadas / Abertas...) em formato de pilulas */
.fi-tabs { border-radius: 999px !important; padding: .25rem !important; gap: .15rem; border: 1px solid var(--portal-border); box-shadow: none !important; }
.fi-tabs-item { border-radius: 999px !important; transition: background-color .15s ease; }
.fi-tabs-item.fi-active { background: color-mix(in srgb, var(--primary-500) 16%, transparent) !important; }
.fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--primary-700); font-weight: 650; }
.dark .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--primary-300); }

/* --- campos e foco -------------------------------------------------------- */
.fi-input-wrp:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 22%, transparent) !important; transition: box-shadow .15s ease; }
.fi-fo-field-label-content { font-weight: 600; font-size: .84rem; }
.fi-section-header-description { font-size: .84rem; }

/* notificacoes e janelas */
.fi-no-notification { border-radius: var(--portal-radius-sm) !important; box-shadow: var(--portal-shadow) !important; }
.fi-modal-window { box-shadow: 0 30px 80px -30px rgb(15 23 42 / .45) !important; }
.fi-modal-heading { font-weight: 700; letter-spacing: -0.01em; }

/* barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: rgb(148 163 184 / .45) transparent; }

/* --- login: cartao unico, painel azul + formulario (desenho aprovado pelo usuario) ------ */
.fi-simple-layout {
    --primary-300: #93c5fd; --primary-400: #60a5fa; --primary-500: #3b82f6; --primary-600: #2b57d9; --primary-700: #1d46b8;
    background: #e6edf9 !important;
    min-height: 100vh;
}
.dark .fi-simple-layout { background: #0b1220 !important; }
.portal-login-marca { display: none; }
.fi-simple-layout .fi-logo { display: none; }
.fi-simple-main { background: transparent !important; box-shadow: none !important; border: 0 !important; max-width: 27rem; padding: 0 !important; ring: 0; }
.fi-simple-layout .fi-simple-main { --tw-ring-shadow: 0 0 #0000 !important; }
.fi-simple-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
.fi-simple-header-heading { display: flex !important; flex-direction: column; align-items: center; gap: .6rem; font-weight: 800 !important; letter-spacing: -0.01em; color: #0f1f4d; }
.dark .fi-simple-header-heading { color: #fff; }
.portal-login-logo img { height: 6.2rem; width: auto; display: block; }
.portal-login-titulo { font-size: 1.55rem; font-weight: 800; }
.fi-simple-header-subheading { font-size: .92rem; opacity: .75; }

/* campos: fundo suave, sem borda, cantos grandes */
.fi-simple-layout .fi-input-wrp { background: #eff3f9; border-radius: 14px !important; border: 1px solid #dfe6f1; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; }
.dark .fi-simple-layout .fi-input-wrp { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .1); }
.fi-simple-layout .fi-input-wrp:focus-within { border-color: #2b57d9; box-shadow: 0 0 0 3px rgb(43 87 217 / .18) !important; }
.fi-simple-layout .fi-input { padding-block: .8rem; font-size: .95rem; }
.fi-simple-layout .fi-fo-field-label-content { font-weight: 700; color: #0f1f4d; }
.dark .fi-simple-layout .fi-fo-field-label-content { color: #e2e8f0; }
.fi-simple-layout .fi-link { color: #2b57d9; font-weight: 600; font-size: .82rem; }

/* botao Entrar */
.fi-simple-layout .fi-btn.fi-color-primary {
    background: #12296a !important; color: #fff !important; width: 100%; padding-block: .85rem; font-size: 1rem; border-radius: 14px !important;
    box-shadow: 0 10px 22px -12px #12296a !important;
}
.fi-simple-layout .fi-btn.fi-color-primary:hover { background: #0d1f52 !important; }

@media (min-width: 1024px) {
    .fi-simple-layout {
        display: grid !important; grid-template-columns: 1fr 1fr; align-content: center;
        max-width: 1080px; width: calc(100% - 3rem); min-height: 640px; margin: 4.5vh auto;
        border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(15 31 77 / .35);
        background: #fff !important;
    }
    .dark .fi-simple-layout { background: #111a2e !important; }
    html:has(.portal-login-marca) body { background: #e6edf9; }
    .dark html:has(.portal-login-marca) body, html.dark:has(.portal-login-marca) body { background: #0b1220; }
    .fi-simple-layout > .fi-simple-main-ctn { display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: #fff; }
    .dark .fi-simple-layout > .fi-simple-main-ctn { background: #111a2e; }
    .portal-login-marca {
        display: flex; align-items: center; padding: 3.5rem; color: #fff; order: -1; position: relative; overflow: hidden; background: #2b57d9;
    }
    .portal-login-marca .bola { position: absolute; border-radius: 50%; }
    .portal-login-marca .bola-1 { width: 520px; height: 520px; right: -140px; top: -220px; background: #2145ab; }
    .portal-login-marca .bola-2 { width: 400px; height: 400px; left: -190px; bottom: -190px; background: #2145ab; }
    .portal-login-marca .bola-vidro {
        width: 190px; height: 190px; right: 40px; bottom: 60px; border: 1px solid rgb(255 255 255 / .35);
        background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .28), rgb(255 255 255 / .06) 60%);
        backdrop-filter: blur(2px);
    }
    .portal-login-marca .texto { position: relative; z-index: 1; max-width: 25rem; }
    .portal-login-marca .pre { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; margin-bottom: .9rem; }
    .portal-login-marca h1 { font-size: 3rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
    .portal-login-marca hr { width: 4rem; height: 4px; border: 0; border-radius: 4px; background: #fff; margin: 1.1rem 0 1.3rem; }
    .portal-login-marca p { font-size: 1.05rem; line-height: 1.55; opacity: .92; margin: 0; }
}
.portal-login-rodape { text-align: center; font-size: .78rem; opacity: .65; margin-top: 1.4rem; }/* ajustes do cartao de login */
@media (min-width: 1024px) {
    .fi-simple-layout { align-content: stretch !important; grid-auto-rows: minmax(640px, auto); align-items: stretch; }
    .portal-login-marca { align-self: stretch; }
}
/* a logo do grupo tem texto claro: vai sobre uma pilula azul-marinho (como na barra superior) */
.portal-login-logo { display: inline-flex; padding: .5rem 1.1rem; border-radius: 16px; background: #12296a; }
.portal-login-logo img { height: 4.4rem; }
@media (max-width: 1023px) {
    .fi-simple-layout > .fi-simple-main-ctn { padding: 1.5rem 1.25rem; width: 100%; }
}
/* logo do grupo (texto escuro) direto sobre o fundo branco do login */
.portal-login-logo { background: transparent; padding: 0; border-radius: 0; }
.portal-login-logo img { height: 7.2rem; }
.dark .portal-login-logo img { background: #fff; border-radius: 16px; padding: .4rem .8rem; }
/* login: foto de fundo sob camada azul (texto continua legivel) */
@media (min-width: 1024px) {
    .portal-login-marca {
        background:
            linear-gradient(160deg, rgb(20 52 140 / .88) 0%, rgb(43 87 217 / .80) 55%, rgb(18 41 106 / .92) 100%),
            url('/images/login-fundo.webp') center / cover no-repeat !important;
    }
    .portal-login-marca .bola-1, .portal-login-marca .bola-2 { background: rgb(18 41 106 / .55); }
}
/* login: arte "Connect" (rede de pontos e icones de logistica) no lugar da foto */
@media (min-width: 1024px) {
    .portal-login-marca {
        background:
            url('/images/login-connect.svg') center / cover no-repeat,
            radial-gradient(640px 420px at 12% 8%, rgb(96 165 250 / .30), transparent 62%),
            linear-gradient(160deg, #12296a 0%, #2b57d9 70%, #3b6cf0 120%) !important;
    }
    .portal-login-marca .bola-1, .portal-login-marca .bola-2 { background: rgb(18 41 106 / .35); }
    .portal-login-marca .bola-vidro { display: none; }
}
/* leitura do texto sobre a arte */
@media (min-width: 1024px) {
    .portal-login-marca .texto { padding: 1.4rem 1.6rem; margin: -1.4rem -1.6rem; border-radius: 28px;
        background: radial-gradient(ellipse at 40% 50%, rgb(14 36 100 / .72), rgb(14 36 100 / 0) 75%); text-shadow: 0 1px 14px rgb(8 22 70 / .55); }
}
@media (min-width: 1024px) {
    .portal-login-marca h1 { font-size: 2.7rem; white-space: nowrap; }
}
/* login: botoes empilhados (Entrar largo; Voltar como link logo abaixo) */
.fi-simple-layout .fi-form-actions, .fi-simple-layout .fi-ac { flex-direction: column; align-items: stretch; gap: .6rem; }
.fi-simple-layout .fi-ac .fi-link { align-self: center; }
.fi-simple-layout .fi-ac.fi-width-full { display: flex !important; flex-direction: column; align-items: stretch; gap: .6rem; }

/* lista do Armazem SV: linha com um leve tom da cor do status e uma faixa forte na esquerda */
.fi-ta-row[class*="portal-st-"] { background: color-mix(in srgb, var(--st) 9%, transparent); box-shadow: inset 5px 0 0 var(--st); }
.fi-ta-row[class*="portal-st-"]:hover { background: color-mix(in srgb, var(--st) 15%, transparent) !important; }
.dark .fi-ta-row[class*="portal-st-"] { background: color-mix(in srgb, var(--st) 14%, transparent); }

/* abas modernas: a ativa vira uma pilula cheia na cor de acao da empresa */
.fi-tabs-item.fi-active { background: var(--primary-600) !important; box-shadow: 0 6px 14px -8px var(--primary-600); }
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon { color: #fff !important; }
.fi-tabs-item.fi-active .fi-badge { background: rgb(255 255 255 / .25) !important; color: #fff !important; box-shadow: none !important; }
.fi-tabs-item:not(.fi-active):hover { background: color-mix(in srgb, var(--primary-500) 10%, transparent); }
.dark .fi-tabs-item.fi-active { background: var(--primary-500) !important; }

/* Vencimento de documentos (tela propria) e aviso no painel inicial */
.portal-venc-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.portal-venc-card { border-radius: var(--portal-radius); padding: .9rem 1.1rem; border: 1px solid var(--portal-border); background: #fff; box-shadow: var(--portal-shadow); }
.dark .portal-venc-card { background: #111a2e; }
.portal-venc-card small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.portal-venc-card strong { display: block; font-size: 1.7rem; line-height: 1.2; }
.portal-venc-card.erro { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.portal-venc-card.alerta { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.dark .portal-venc-card.erro { background: rgb(239 68 68 / .12); border-color: rgb(239 68 68 / .35); color: #fca5a5; }
.dark .portal-venc-card.alerta { background: rgb(245 158 11 / .12); border-color: rgb(245 158 11 / .35); color: #fcd34d; }
.portal-venc-filtros { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: end; }
.portal-venc-filtros label { font-size: .72rem; opacity: .85; display: flex; flex-direction: column; gap: .2rem; }
.portal-venc-filtros select, .portal-venc-filtros input[type=text] { border: 1px solid var(--portal-border); border-radius: 8px; padding: .35rem .6rem; font-size: .85rem; background: transparent; min-width: 150px; }
.portal-venc-filtros .marca { flex-direction: row; align-items: center; gap: .4rem; }
.portal-tabela-wrap { overflow-x: auto; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: #fff; box-shadow: var(--portal-shadow); margin-top: 1rem; }
.dark .portal-tabela-wrap { background: #111a2e; }
.portal-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
.portal-tabela th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: .6rem .9rem; opacity: .7; background: rgb(15 23 42 / .03); }
.portal-tabela td { padding: .55rem .9rem; border-top: 1px solid var(--portal-border); }
.portal-tabela tr:hover td { background: color-mix(in srgb, var(--primary-500) 5%, transparent); }
.portal-tabela .vazio { text-align: center; padding: 2rem; opacity: .6; }
.portal-chip { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.portal-chip.erro { background: #fee2e2; color: #b91c1c; }
.portal-chip.alerta { background: #fef3c7; color: #b45309; }
.portal-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: var(--portal-radius); border: 1px solid; font-size: .85rem; text-decoration: none; }
.portal-aviso svg { width: 1.2rem; height: 1.2rem; flex: none; }
.portal-aviso.erro { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.portal-aviso.alerta { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.dark .portal-aviso.erro { background: rgb(239 68 68 / .12); color: #fecaca; }
.dark .portal-aviso.alerta { background: rgb(245 158 11 / .12); color: #fde68a; }
.portal-aviso .ver { margin-left: auto; text-decoration: underline; font-weight: 600; }


/* Portal do motorista: o cartao da viagem tem o tom da cor do status, como a linha da Programacao de viagens */
.fi-ta-record[class*="portal-st-"] { background: color-mix(in srgb, var(--st) 12%, transparent); box-shadow: inset 5px 0 0 var(--st); border-radius: .5rem; }
.dark .fi-ta-record[class*="portal-st-"] { background: color-mix(in srgb, var(--st) 18%, transparent); }

/* Portal do motorista: a data do servico em negrito e preto (branco no modo escuro) */
.portal-data-viagem { font-weight: 700; color: #000; }
.dark .portal-data-viagem { color: #fff; }

/* Relatorios da Manutencao de frota na tela (o PDF tem o proprio estilo em exports/relatorio-frota) */
.portal-rel { margin-top: 1.5rem; border: 1px solid rgb(0 0 0 / .1); border-radius: .75rem; background: #fff; overflow: hidden; }
.dark .portal-rel { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .1); }
.portal-rel-cab { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border-bottom: 1px solid rgb(0 0 0 / .08); }
.dark .portal-rel-cab { border-color: rgb(255 255 255 / .1); }
.portal-rel-cab span { font-size: .8rem; color: #6b7280; }
.portal-rel-rolagem { overflow-x: auto; }
.portal-rel-tabela { width: 100%; border-collapse: collapse; font-size: .82rem; }
.portal-rel-tabela th { background: #eef3f9; text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; padding: .5rem .75rem; white-space: nowrap; }
.dark .portal-rel-tabela th { background: rgb(255 255 255 / .08); }
.portal-rel-tabela td { padding: .45rem .75rem; border-top: 1px solid rgb(0 0 0 / .06); vertical-align: top; }
.dark .portal-rel-tabela td { border-color: rgb(255 255 255 / .08); }
.portal-rel-tabela .r { text-align: right; white-space: nowrap; }
.portal-rel-tabela .c { text-align: center; }
.portal-rel-tabela tr.grupo td { background: #8da4bc; color: #fff; font-weight: 700; }
.portal-rel-tabela tr.sub td { background: #dbe9f7; font-weight: 700; font-style: italic; }
.dark .portal-rel-tabela tr.sub td { background: rgb(141 164 188 / .25); }
.portal-rel-tabela tr.dest td { background: #eaf1f9; font-weight: 700; }
.dark .portal-rel-tabela tr.dest td { background: rgb(141 164 188 / .15); }
.portal-rel-tabela tr.total td { background: #b2d1dc; font-weight: 700; }
.dark .portal-rel-tabela tr.total td { background: rgb(178 209 220 / .25); }
.portal-rel-tabela td.vazio { text-align: center; color: #6b7280; padding: 1.5rem; }

/* Aviso fixo no topo das telas (ex.: portal da transportadora com taxa de nao comparecimento pendente) */
.portal-aviso { display: flex; flex-direction: column; gap: .15rem; padding: .75rem 1rem; margin-bottom: 1rem; border-radius: .75rem; border: 1px solid; font-size: .875rem; }
.portal-aviso-erro { border-color: rgb(239 68 68 / .45); background: rgb(239 68 68 / .1); color: rgb(185 28 28); }
.dark .portal-aviso-erro { color: rgb(252 165 165); }

/* link para o portal da transportadora na tela de login interna */
.portal-login-transportadora { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-top: 1.2rem; padding: .7rem 1rem; border: 1px dashed rgba(251, 191, 36, .45); border-radius: .75rem; font-size: .82rem; }
.portal-login-transportadora span { opacity: .75; }
.portal-login-transportadora a { color: rgb(251, 191, 36); font-weight: 600; text-decoration: none; }
.portal-login-transportadora a:hover { text-decoration: underline; }

/* cadastro da transportadora: tela larga e centralizada (o login continua estreito) */
.fi-simple-main:has(.portal-cadastro) { max-width: 52rem; width: 100%; }
.fi-simple-main:has(.portal-cadastro) .fi-simple-header-subheading { max-width: 40rem; margin-inline: auto; }
.fi-simple-main:has(.portal-cadastro) .fi-btn.fi-color-primary { width: 100%; max-width: 22rem; margin-inline: auto; display: flex; justify-content: center; }
@media (min-width: 1024px) {
    /* portal da transportadora (sem o painel azul da marca): cartao de coluna unica, centralizado */
    .fi-simple-layout:not(:has(.portal-login-marca)) { grid-template-columns: 1fr; max-width: 960px; min-height: 0; }
    .fi-simple-layout:not(:has(.portal-login-marca)) > .fi-simple-main-ctn { padding: 3rem 2.5rem; }
    .fi-simple-main:has(.portal-cadastro) { max-width: 46rem; }
}