/*
| MAFERSUL — VISAGE SaaS Design System v2 (sobre Filament v3)
| Clima: premium clean, delicado, denso (Tesla / Apple / Linear).
| - Base 12px, escala proporcional, ícones proporcionais.
| - NADA de preto: texto cinza-escuro, divisórias/bordas cinza-claro hairline.
| - Cantos discretos (não arredondado de festa), pouco respiro (sem gaps grandes).
| Carregado APÓS o CSS do Filament (render hook HEAD_END) → vence por ordem.
*/

@import url('https://fonts.bunny.net/css?family=geist:300,400,500,600,700,800|geist-mono:400,500,600|inter:400,500,600,700');

/* ============ 1. Tokens — slate, cinzas delicados (sem preto) ============ */
:root {
    --gray-50:  248 250 252;  /* #F8FAFC fundo                         */
    --gray-100: 241 245 249;  /* #F1F5F9 divisórias super-claras       */
    --gray-200: 232 237 243;  /* #E8EDF3 bordas hairline               */
    --gray-300: 214 222 230;  /* #D6DEE6                               */
    --gray-400: 148 163 184;  /* #94A3B8 ícones/secundário             */
    --gray-500: 100 116 139;  /* #64748B texto secundário              */
    --gray-600:  71  85 105;  /* #475569                               */
    --gray-700:  51  65  85;  /* #334155 texto principal (cinza-escuro)*/
    --gray-800:  30  41  59;  /* #1E293B títulos                       */
    --gray-900:  30  41  59;  /* (sem preto — clampado em slate-800)   */
    --gray-950:  15  23  42;  /* #0F172A só p/ dark-mode bg            */

    --ds-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ds-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Superfícies premium (shadcn): borda hairline + sombra macia em camadas */
    --ds-radius: 10px;
    --ds-border: 15 23 42 / 0.07;
    --ds-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.03);
    --ds-shadow-md: 0 2px 4px -1px rgb(15 23 42 / 0.05), 0 4px 12px -2px rgb(15 23 42 / 0.06);
}

/* ============ 2. Base — 14px, cinza-escuro, denso ============ */
/* Base 14px = corpo padrão de mercado (Filament/Carbon/Polaris): legível e
   ainda denso. Tudo escala por rem a partir daqui, então este 1px a mais sobe
   o sistema inteiro proporcionalmente e tira os micro-rótulos do piso. */
html { font-size: 14px; }      /* 1rem = 14px (escala global) */
.fi-body {
    background-color: rgb(var(--gray-50));
    color: rgb(var(--gray-700));        /* #334155 — nunca preto */
    font-family: var(--ds-sans);
    font-size: 1rem;                    /* 12px base */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Texto da maioria dos componentes do Filament → 12px (proporcional) */
.fi-ta-text, .fi-in-text, .fi-fo-field-wrp, .fi-dropdown-list-item-label,
.fi-ta-empty-state, .fi-breadcrumbs, .fi-badge {
    font-size: 1rem;
}

/* Título de página — proporcional, delicado */
.fi-header-heading {
    font-size: 1.75rem;        /* 21px */
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgb(var(--gray-800));
}
.fi-header-subheading { font-size: 1rem; font-weight: 400; color: rgb(var(--gray-500)); }

.fi-section-header-heading {
    font-size: 1.16rem;        /* ~14px */
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgb(var(--gray-800));
}
.fi-section-header-description { font-size: 0.92rem; font-weight: 400; color: rgb(var(--gray-500)); }

/* Rótulos / legendas — delicados */
.fi-fo-field-wrp-label, .fi-fo-field-wrp-label > * { font-size: 0.95rem; font-weight: 500; color: rgb(var(--gray-600)); }

/* ============ 3. Superfícies — cantos discretos (8px), borda hairline delicada ============ */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-component-ctn > .fi-section {
    background-color: #ffffff;
    border: 1px solid rgb(15 23 42 / 0.06);   /* hairline delicado em slate-alpha */
    border-radius: 8px;
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.035);
}

/* O card de gráfico é a .fi-section interna — o wrapper não pode ter borda
   (senão vira borda dupla, com aparência grossa). */
.fi-wi-chart {
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* Chamado #3 (Master): gráficos sem moldura — o card interno do gráfico fica
   flat, sem borda nem sombra (some o retângulo em volta de cada gráfico). */
.fi-wi-chart .fi-section {
    border: 0;
    box-shadow: none;
}

/* Divisória header→conteúdo das seções: hairline delicado (o default herda
   currentColor = cinza-escuro do texto, e fica uma linha forte). */
.fi-section-content-ctn,
.fi-section > .fi-section-content-ctn {
    border-color: rgb(15 23 42 / 0.05) !important;
}

/* Menos respiro: padding compacto nas seções */
.fi-section-content { padding: 0.875rem 1rem; }   /* ~14px */
.fi-section-header { padding: 0.875rem 1rem; }

/* Inputs — borda clara, cantos discretos */
.fi-input-wrp {
    border: 1px solid rgb(var(--gray-200));
    border-radius: 6px;
    box-shadow: none;
}
/* Foco delicado: substitui o ring roxo grosso padrão do Filament (mais específico,
   por isso o !important) por uma borda lilás clara + halo bem suave. */
.fi-input-wrp:focus-within {
    border-color: rgb(var(--primary-400)) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(var(--primary-500) / 0.10) !important;
}
.fi-checkbox-input, .fi-radio-input { border: 1px solid rgb(var(--gray-300)); box-shadow: none; }
.fi-checkbox-input:checked, .fi-radio-input:checked { border-color: rgb(var(--primary-600)); }

/* ============ 4. Tabelas — densas, divisórias hairline cinza-claro ============ */
.fi-ta-header-cell {
    background-color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.83rem;        /* ~10px */
    font-weight: 600;
    color: rgb(var(--gray-400));
}
/* REGRA DE DESIGN: listas densas — respiro vertical mínimo.
   O padding real da linha está no .fi-ta-text (Filament usa "px-3 py-4" = 1rem
   em cima/embaixo) e o vão nome↔subtítulo no gap-y-1. A célula é "p-0".
   !important porque o utilitário py-4 do Filament vence a classe. */
.fi-ta-text {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    gap: 0.05rem !important;       /* nome + subtítulo colados (era gap-y-1) */
    line-height: 1.2;
    color: rgb(var(--gray-600));
}
.fi-ta-header-cell { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
/* ícones de ação: linha baixa (padding curto) mas com respiro lateral entre eles */
.fi-ta-actions { gap: 0.5rem !important; }
.fi-ta-actions .fi-icon-btn { padding: 0.3rem !important; }
.fi-ta-record .fi-ta-cell:first-child .fi-ta-text-item-label { font-weight: 600; color: rgb(var(--gray-800)); }

.fi-ta-row:hover { background-color: rgb(var(--gray-50)); }

/* TODAS as divisórias da tabela em hairline delicado — incluindo as que o
   Filament deixa em currentColor (tbody / conteúdo / paginação herdavam o
   cinza-escuro do texto #334155 e viravam linha grossa). !important porque a
   utility do Filament vence em especificidade. */
.fi-ta,
.fi-ta-ctn,
.fi-ta-content,
.fi-ta-content-ctn,
.fi-ta-table,
.fi-ta-table thead,
.fi-ta-table tbody,
.fi-ta-table tr,
.fi-ta-table th,
.fi-ta-table td,
.fi-ta-row,
.fi-ta-header-row,
.fi-ta-header-ctn,
.fi-ta-footer-ctn,
.fi-ta-pagination,
.fi-pagination,
.fi-ta-filter-indicators,
.fi-ta-header-toolbar,
.fi-ta-selection-indicator,
.fi-ta-reorder-indicator {
    border-color: rgb(15 23 42 / 0.06) !important;
}

/* ============ 5. Badges — pequenos, tints suaves, canto discreto ============ */
.fi-badge {
    border-radius: 5px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;        /* ~11px */
    font-weight: 500;
    padding-inline: 0.45rem;
}
.fi-badge.fi-color-success { background-color: #DCFCE7; color: #15803D; }
.fi-badge.fi-color-warning { background-color: #FEF3C7; color: #B45309; }
.fi-badge.fi-color-danger  { background-color: #FEE2E2; color: #B91C1C; }
.fi-badge.fi-color-info    { background-color: #E0EAFF; color: #3730A3; }
.fi-badge.fi-color-gray    { background-color: #F1F5F9; color: #475569; }
.fi-badge.fi-color-primary { background-color: #ECE8F3; color: #3D1E66; }
.fi-badge .fi-icon { color: currentColor; }

/* ============ 6. Botões — canto discreto, primária roxa, flat ============ */
.fi-btn {
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: none;
}
.fi-btn:active { transform: scale(0.98); }
.fi-btn.fi-color-primary { background-color: rgb(var(--primary-600)); box-shadow: none; }
.fi-btn.fi-color-primary:hover { background-color: rgb(var(--primary-700)); }
.fi-btn.fi-color-gray {
    background-color: #ffffff;
    border: 1px solid rgb(var(--gray-200));
    color: rgb(var(--gray-700));
}
.fi-btn.fi-color-gray:hover { background-color: rgb(var(--gray-50)); }

/* ToggleButtons (poucas opções → botões): a regra global .fi-btn.fi-color-primary
   acima pintaria TODAS as opções de roxo. Cada opção é um .fi-btn logo após um
   <input> (radio) — discriminador que NÃO pega botão de ação normal. Restauramos o
   padrão: opção NÃO marcada clara/cinza, opção MARCADA colorida (input:checked).
   Opções com cor própria (success=verde, info, warning, danger) já funcionam. */
input + .fi-btn.fi-color-primary {
    background-color: #ffffff;
    color: rgb(var(--gray-700));
}
input + .fi-btn.fi-color-primary:hover { background-color: rgb(var(--gray-50)); }
input:checked + .fi-btn.fi-color-primary {
    background-color: rgb(var(--primary-600));
    color: #ffffff;
}
input:checked + .fi-btn.fi-color-primary:hover { background-color: rgb(var(--primary-700)); }
/* moldura do segmentado (em formulário) → lê como um controle de botões, não texto solto */
.fi-fo-field-wrp .fi-btn-group {
    border: 1px solid rgb(var(--gray-200));
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

/* ============ 6.1 Dropdown de <select> (Choices.js) — PAINEL SÓLIDO ============
   Bug: o painel de opções abria SEM borda e SEM sombra; sobre o fundo quase branco
   da página ele "sumia" (parecia transparente) e os textos dos campos atrás vazavam.
   Fix: fundo opaco + borda + sombra + elevação → menu flutuante nítido e legível
   (inclusive no celular). Vale p/ TODOS os selects (comuns e pesquisáveis). */
.choices__list--dropdown {
    background-color: #ffffff !important;
    border: 1px solid rgb(var(--gray-200)) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px -10px rgb(15 23 42 / 0.30) !important;
    z-index: 50 !important;
    overflow: hidden;
    margin-top: 4px;
}
.choices__list--dropdown .choices__list { background-color: #ffffff; }
.choices__list--dropdown .choices__item { color: #334155; background-color: #ffffff; }
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #f0ebf7;   /* hover: tint roxo suave da marca */
    color: #3D1E66;
}
.choices__list--dropdown .choices__input { background-color: #ffffff !important; }
.choices__list--dropdown .choices__placeholder { color: #9aa3b2; }
/* Dropdown da busca: painel flutua por cima com cantos fechados; a lista
   rola por dentro, sem "meio item" espremido no fim (blocos, 30/07). */
.choices__list--dropdown { z-index: 40; border-radius: 0 0 10px 10px; overflow: hidden; }
.choices__list--dropdown .choices__list {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* Itens do painel mais densos na tela de orçamento */
.blocos-orcamento .choices__list--dropdown .choices__item { padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* Selects estreitos da planilha (Un./Cobr., Dificuldade): sem o "×" de
   limpar espremido sobre o texto (30/07) — sempre há um valor; trocar é
   escolher outro. E o valor não invade o chevron. */
.linhas-bloco .choices__button { display: none !important; }
.linhas-bloco .choices__inner .choices__item--selectable { padding-right: 0.25rem; margin-right: 0; }
.linhas-bloco .choices__inner { overflow: hidden; }
.linhas-bloco .choices__list--single .choices__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Painel ABERTO do select da planilha NÃO herda a largura espremida da
   coluna (bug 19/09: "metro/quadra/do" quebrando palavra por palavra em
   Un./Cobr.). O gatilho pode ficar estreito — a lista de opções tem largura
   própria, min-content, piso na largura do gatilho e teto no viewport. */
.linhas-bloco .choices__list--dropdown {
    width: max-content !important;
    min-width: 100% !important;
    max-width: min(280px, calc(100vw - 2rem)) !important;
}
.linhas-bloco .choices__list--dropdown .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ 7. Sidebar — ESCURA (padrão Gentelella) + acento roxo Mafersul ============ */
.fi-sidebar,
.fi-sidebar-nav { background-color: #1F2733; border-color: rgb(255 255 255 / 0.06); }
.fi-sidebar-header {
    background-color: #1F2733;
    border-bottom: 1px solid rgb(255 255 255 / 0.07);
    box-shadow: none;
}
/* Logo roxo → branco no fundo escuro da sidebar (escopo só na sidebar: no topbar
   claro o logo continua roxo). */
.fi-sidebar-header img,
.fi-sidebar-header .fi-logo { filter: brightness(0) invert(1); opacity: 0.95; }

.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #6B7689;                       /* muted slate */
}
.fi-sidebar-item-label { font-size: 0.97rem; font-weight: 500; color: #C7CFDB; }
.fi-sidebar-item-icon,
.fi-sidebar-group-collapse-button { color: #8A95A8; }

.fi-sidebar-item .fi-sidebar-item-button { border-left: 3px solid transparent; border-radius: 0; }
.fi-sidebar-item .fi-sidebar-item-button:hover { background-color: rgb(255 255 255 / 0.05); }
.fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: #ffffff; }

/* Item ativo: realce roxo translúcido + barra roxa à esquerda (Gentelella) */
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgb(var(--primary-500) / 0.22);
    border-left-color: rgb(var(--primary-300));
}
.fi-sidebar-item-active .fi-sidebar-item-label { font-weight: 600; color: #ffffff; }
.fi-sidebar-item-active .fi-sidebar-item-icon { color: rgb(var(--primary-300)); }

/* Badge "Em breve" legível na sidebar escura */
.fi-sidebar .fi-badge.fi-color-gray { background-color: rgb(255 255 255 / 0.08); color: #AEB7C5; }

/* ============ 8. Topbar — hairline clara ============ */
/* NÃO usar backdrop-filter/filter/transform aqui: vira "containing block" dos
   dropdowns position:fixed (menu do usuário, etc.) e os corta no topo. */
.fi-topbar > nav {
    background-color: #ffffff;
    border-bottom: 1px solid rgb(var(--gray-200));
    box-shadow: none;
}

/* ============ 9. Densidade da página (aproveita a largura, menos gaps) ============ */
.fi-main {
    padding: 0.875rem 1rem !important;   /* ~14px vertical / 16px horizontal */
    max-width: 100%;
}
.fi-page { gap: 0.75rem; }
.fi-page > .fi-section + .fi-section,
.fi-page .fi-wi,
.fi-wi { gap: 0.75rem; }
.fi-wi-stats-overview-stats-ctn { gap: 0.75rem; }

/* Foco visível (AA) */
.fi-btn:focus-visible, .fi-link:focus-visible { outline: 2px solid rgb(var(--primary-600)); outline-offset: 2px; }

/* ============ 10. KPI / Stats — valor proporcional ============ */
.fi-wi-stats-overview-stat { padding: 0.875rem 1rem; }
.fi-wi-stats-overview-stat-label { font-size: 0.92rem; font-weight: 500; color: rgb(var(--gray-500)); }
.fi-wi-stats-overview-stat-value {
    font-family: var(--ds-sans);
    font-size: 1.9rem;          /* ~23px */
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgb(var(--gray-800));
}
.fi-wi-stats-overview-stat-description { font-size: 0.9rem; }

/* Heading dos widgets de gráfico */
.fi-wi-chart-header-heading { font-size: 1.05rem; font-weight: 600; color: rgb(var(--gray-800)); }

/* ============ 11. Login ============ */
.fi-simple-main {
    border: 1px solid rgb(var(--gray-200));
    border-radius: 10px;
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 8px 24px -14px rgb(15 23 42 / 0.12);
}

/* ============ 11b. Agenda — calendário mensal ============ */
.mf-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.mf-cal-dow {
    padding: 0.5rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--gray-400));
    text-align: center;
    border-right: 1px solid rgb(15 23 42 / 0.06);
    border-bottom: 1px solid rgb(15 23 42 / 0.06);
}

.mf-cal-cell {
    position: relative;
    min-height: 104px;
    padding: 5px 5px 7px;
    border-right: 1px solid rgb(15 23 42 / 0.06);
    border-bottom: 1px solid rgb(15 23 42 / 0.06);
    vertical-align: top;
}
.mf-cal-grid > .mf-cal-dow:nth-child(7n),
.mf-cal-grid > .mf-cal-cell:nth-child(7n) { border-right: 0; }

.mf-cal-add {
    opacity: 0;
    transition: opacity 0.12s ease;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: rgb(var(--gray-400));
    font-size: 1rem;
    line-height: 1;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}
.mf-cal-cell:hover .mf-cal-add { opacity: 1; }
.mf-cal-add:hover { background: rgb(var(--gray-100)); color: rgb(var(--primary-600)); }

.mf-cal-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #3D1E66;
    background: #ECE8F3;
}
.mf-cal-chip:hover { background: #E1D9EE; }
.mf-cal-chip .mf-cal-chip-t { font-weight: 600; opacity: 0.75; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.mf-cal-chip .mf-cal-chip-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }

/* ============ 12. Dark mode — slate escuro, sem preto puro ============ */
.dark .fi-body { background-color: rgb(var(--gray-950)); color: rgb(var(--gray-200)); }
.dark .fi-section, .dark .fi-ta-ctn, .dark .fi-wi-stats-overview-stat, .dark .fi-wi-chart,
.dark .fi-simple-main, .dark .fi-fo-component-ctn > .fi-section {
    background-color: rgb(var(--gray-800)); border-color: rgb(255 255 255 / 0.06);
}
.dark .fi-sidebar, .dark .fi-sidebar-nav, .dark .fi-topbar > nav { background-color: rgb(var(--gray-800)); }
.dark .fi-ta-header-cell { background-color: rgb(var(--gray-800)); color: rgb(var(--gray-400)); }
.dark .fi-ta-row, .dark .fi-ta-header-row { border-color: rgb(255 255 255 / 0.05); }
.dark .fi-ta-row:hover { background-color: rgb(255 255 255 / 0.03); }
/* Modais (ex.: editar texto): fundo sólido no dark — sem isto a janela fica
   "transparente" e o conteúdo atrás vaza. */
.dark .fi-modal-window { background-color: rgb(var(--gray-800)); color: rgb(var(--gray-200)); }
.dark .fi-modal-header { background-color: rgb(var(--gray-800)); }

/* ============ 13. Tipografia mais leve + densidade ============ */
/* Menos negrito no geral: peso ~500. Negrito (600) só em títulos de coluna e
   destaques específicos (KPIs). Nada de 700/"font-bold" agressivo. */
.fi-header-heading { font-weight: 500; letter-spacing: -0.01em; }
.fi-section-header-heading { font-weight: 500; }
.fi-btn { font-weight: 500; }
.fi-sidebar-group-label { font-weight: 600; }
.fi-sidebar-item-label { font-weight: 400; }
.fi-sidebar-item-active .fi-sidebar-item-label { font-weight: 500; }
/* Nome na 1ª coluna: leve (não bold) */
.fi-ta-record .fi-ta-cell:first-child .fi-ta-text-item-label { font-weight: 500; }
/* KPI: destaque, mas negrito suave */
.fi-wi-stats-overview-stat-value { font-weight: 600; }
/* Títulos de coluna: o único "bold" permitido — suave */
.fi-ta-header-cell { font-weight: 600; }
/* weight('bold') (700) em colunas/badges → negrito suave (600) */
.fi-main .font-bold, .fi-ta-text .font-bold { font-weight: 600 !important; }
/* Títulos de página: bem leves (400); títulos de seção: 500. Acima do font-bold. */
.fi-main .fi-header-heading { font-weight: 400 !important; }
.fi-main .fi-section-header-heading { font-weight: 500 !important; }

/* Linha escura acima da toolbar da tabela → hairline delicado */
.fi-ta-header-toolbar,
.fi-ta-header,
.fi-ta-selection-ctn { border-color: rgb(15 23 42 / 0.06) !important; }

/* Cabeçalho da tabela mais compacto e padronizado (menos altura vazia) */
.fi-ta-header { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.fi-ta-header-toolbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* ============ 14. Título dentro do card (páginas de listagem) ============ */
/* Funde o header (título + breadcrumb) no topo do card da tabela — vira um box só.
   Escopo: só listagem (.fi-resource-list-records-page); forms/dashboard intactos. */
/* O espaçamento real fica no <section class="gap-y-8"> FILHO da página
   (o .fi-page em si não é o flex container) — zera lá. */
.fi-resource-list-records-page > section { row-gap: 0; }
.fi-resource-list-records-page { gap: 0; }
.fi-resource-list-records-page .fi-header {
    background: #ffffff;
    border: 1px solid rgb(15 23 42 / 0.06);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 0.6rem 1rem 0.5rem;
}
/* O bloco de AÇÕES do header (botão "Novo …") vinha com a utility `sm:mt-7`
   (margin-top 28px), que empurrava o botão pra baixo e inflava a altura do
   header com um vão vazio. Zera → o botão alinha ao centro do título.
   Vale p/ TODA página com ação no topo (não só listagem). */
.fi-header > .sm\:mt-7 { margin-top: 0 !important; }
.fi-header { gap: 0.5rem; }

.fi-resource-list-records-page .fi-ta-ctn {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ============ 15. Dados em caso normal (premium) ============ */
/* Caixa-alta nos DADOS deixa cara de planilha/terminal. Premium = caso normal
   nas células e badges; só os CABEÇALHOS de coluna ficam em alta com tracking. */
.fi-ta-text { text-transform: none; }
.fi-ta-cell .fi-badge { text-transform: none; }

/* ============ 16. Abas de status (Abertos/Todos/…) — botões à esquerda ============ */
/* Filament centraliza as abas (mx-auto) num band que "corta" o conteúdo.
   Alinha à esquerda (eixo do título), como grupo de botões, colado ao card. */
.fi-resource-list-records-page .fi-tabs {
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: -0.5rem;
}

/* ============ 17. Montador — card do bloco em exibição (sincronia c/ scroll) ============ */
.mf-bloco-ativo {
    outline: 2px solid #3D1E66;
    outline-offset: -1px;
    transition: outline-color .2s;
}

/* ============ 18. Overlays — SEMPRE escurecem o fundo (regra do design system) ============ */
/* Modal e gaveta (sidebar no mobile) devem dar um backdrop escuro (~50%) pra
   separar do conteúdo e não confundir. O Filament marca os overlays com a
   utility `bg-gray-950/50`, mas ela NÃO entra no CSS compilado deste tema (fica
   transparente no modo claro — modal/gaveta sem escurecer). Forçamos o fundo
   aqui (!important vence a utility ausente); no escuro, um pouco mais forte. */
.fi-modal-close-overlay,
.fi-sidebar-close-overlay {
    background-color: rgb(15 23 42 / 0.5) !important;   /* slate-950 @ 50% */
}
.dark .fi-modal-close-overlay,
.dark .fi-sidebar-close-overlay {
    background-color: rgb(15 23 42 / 0.7) !important;
}

/* ============ 19. Mobile — inputs em 16px (evita o zoom automático do iOS) ============ */
/* O Safari do iPhone dá zoom ao focar qualquer campo com fonte < 16px. Só no
   celular (<640px) subimos os campos para 16px — o resto do layout fica igual. */
@media (max-width: 639px) {
    .fi-input,
    .fi-fo-field-wrp input,
    .fi-fo-field-wrp textarea,
    .fi-fo-field-wrp select {
        font-size: 16px;
    }

    /* Grids de formulário (seções e repeaters) empilham no celular. A utility
       arbitrária do Filament (`grid-cols-[--cols-default]`) não compila de forma
       confiável neste tema, então os multi-coluna vazavam no mobile. Forçamos
       bloco + espaçamento vertical (só <640px; o desktop mantém o layout denso). */
    .fi-section-content .fi-fo-component-ctn[class*="grid-cols-["] {
        display: block !important;
    }
    .fi-section-content .fi-fo-component-ctn[class*="grid-cols-["] > * + * {
        margin-top: 1.1rem !important;
    }
}

/* ============================================================================
   20. Acabamento PREMIUM (admin shadcn / Tailwind UI) — camada final
   Eleva o tema sem mexer em funcionalidade: superfícies macias, números
   tabulares, transições suaves, hover/active vivos, tabelas elegantes.
   ============================================================================ */

/* 20.1 Superfícies — raio 10px + sombra macia em camadas (profundidade sutil) */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-component-ctn > .fi-section,
.fi-dropdown-panel,
.fi-modal-window {
    border-radius: var(--ds-radius);
    border-color: rgb(var(--ds-border));
    box-shadow: var(--ds-shadow);
}
.fi-dropdown-panel { box-shadow: var(--ds-shadow-md); }

/* 20.2 Números tabulares — alinham em colunas (data/valores não "dançam") */
.fi-ta-text,
.fi-badge,
.fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat-description,
.fi-pagination,
.fi-in-text {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv01' 1;
}
/* KPI em Geist Mono → ar de dashboard de produto */
.fi-wi-stats-overview-stat-value { font-family: var(--ds-mono); letter-spacing: -0.03em; }

/* 20.3 Transições suaves nos elementos interativos (vida, sem exagero) */
.fi-btn,
.fi-icon-btn,
.fi-ta-row,
.fi-link,
.fi-input-wrp,
.fi-sidebar-item-button,
.fi-dropdown-list-item,
.fi-tabs-item {
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .12s ease;
}

/* 20.4 Tabelas — cabeçalho discreto, linhas com respiro ótico, hover claro */
.fi-ta-header-cell {
    letter-spacing: 0.06em;
    color: rgb(var(--gray-400));
    background-color: rgb(var(--gray-50) / 0.6);
}
.fi-ta-row:hover { background-color: rgb(var(--primary-500) / 0.04); }
/* zebra ultra-sutil — ajuda a varredura sem poluir */
.fi-ta-row:nth-child(even):not(:hover) { background-color: rgb(var(--gray-50) / 0.45); }
/* nome da 1ª coluna com mais presença (hierarquia) */
.fi-ta-record .fi-ta-cell:first-child .fi-ta-text-item-label {
    font-weight: 600;
    color: rgb(var(--gray-800));
    letter-spacing: -0.005em;
}

/* 20.5 Botões — primária com leve elevação tintada, press físico */
.fi-btn.fi-color-primary {
    box-shadow: 0 1px 2px rgb(var(--primary-700) / 0.25), 0 1px 3px rgb(var(--primary-700) / 0.12);
}
.fi-btn.fi-color-primary:hover { box-shadow: 0 2px 6px rgb(var(--primary-700) / 0.28); }
.fi-btn:active, .fi-icon-btn:active { transform: translateY(0.5px) scale(0.99); }
.fi-btn { border-radius: 8px; }

/* 20.6 Inputs — raio 8px, foco coerente com a marca */
.fi-input-wrp { border-radius: 8px; }

/* 20.7 Badges — pílula suave, sem peso de "etiqueta de sistema" */
.fi-badge { border-radius: 6px; font-weight: 500; }

/* 20.8 Abas (Diárias/CLTs etc.) — pill premium, ativa com a marca */
.fi-tabs {
    background: rgb(var(--gray-100) / 0.7);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}
.fi-tabs-item { border-radius: 7px; font-weight: 500; color: rgb(var(--gray-500)); }
.fi-tabs-item:hover { color: rgb(var(--gray-700)); background: rgb(255 255 255 / 0.6); }
.fi-tabs-item-active {
    background: #ffffff;
    color: rgb(var(--primary-700));
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}
.fi-tabs-item-active .fi-tabs-item-label { font-weight: 600; }

/* 20.9 Título de página com mais presença (display) */
.fi-header-heading,
.fi-main .fi-header-heading { letter-spacing: -0.025em; }

/* 20.10 Sidebar — item ativo um pouco mais refinado (transição já em 20.3) */
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgb(var(--primary-500) / 0.18);
    box-shadow: inset 0 0 0 1px rgb(var(--primary-400) / 0.12);
}

/* 20.11 Dark mode — superfícies/abas coerentes com o premium */
.dark .fi-ta-header-cell { background-color: rgb(var(--gray-800)); }
.dark .fi-ta-row:hover { background-color: rgb(255 255 255 / 0.04); }
.dark .fi-ta-row:nth-child(even):not(:hover) { background-color: rgb(255 255 255 / 0.02); }
.dark .fi-tabs { background: rgb(255 255 255 / 0.05); }
.dark .fi-tabs-item-active { background: rgb(var(--gray-700)); color: rgb(var(--primary-200)); }

/* ============================================================================
   21. Listagens COM abas de status — desfaz a fusão header↔tabela
   A fusão da seção 14 (header colado no topo da tabela) assume header → tabela
   direto. Em telas com abas (Orçamentos: Todos/Rascunho/…; Funcionários:
   Diárias/CLTs) as abas + a busca entram no meio e a tabela perde a borda de
   cima → o box fica "decapitado"/sem borda. Só nessas telas (`:has(.fi-tabs)`)
   voltamos header e tabela a serem CARDS COMPLETOS, com as abas (pill) no meio
   e respiro. Telas sem abas seguem com o header fundido (seção 14).
   ============================================================================ */
.fi-resource-list-records-page:has(.fi-tabs) > section { row-gap: 0.7rem; }
.fi-resource-list-records-page:has(.fi-tabs) .fi-header {
    border-bottom: 1px solid rgb(15 23 42 / 0.06) !important;
    border-radius: 10px !important;
}
.fi-resource-list-records-page:has(.fi-tabs) .fi-ta-ctn {
    border-top: 1px solid rgb(15 23 42 / 0.06) !important;
    border-radius: 10px !important;
}
.fi-resource-list-records-page:has(.fi-tabs) .fi-tabs { margin-bottom: 0.5rem !important; }
.dark .fi-resource-list-records-page:has(.fi-tabs) .fi-header,
.dark .fi-resource-list-records-page:has(.fi-tabs) .fi-ta-ctn {
    border-color: rgb(255 255 255 / 0.06) !important;
}

/* ============ 20. Repeaters — densos, sem linha divisória ============ */
/* "Itens do orçamento" (memória de cálculo) e todo repeater do painel.
   Regra do tema: NADA de preto — o divide-y entre cabeçalho e conteúdo
   do item some; o cabeçalho (alça de arrastar + lixeira) encolhe; menos
   ar entre linhas e entre campos. Denso > arejado, sempre. */
:where(.grid):has(> .fi-fo-repeater-item) { gap: 0.4rem !important; }
.fi-fo-repeater-item > * + * { border-top-width: 0 !important; } /* mata o divide-y */
.fi-fo-repeater-item { border-radius: 0.5rem !important; }
.fi-fo-repeater-item-header { padding: 0.2rem 0.6rem !important; }
.fi-fo-repeater-item-header .fi-icon-btn { height: 1.75rem !important; width: 1.75rem !important; }
.fi-fo-repeater-item-content { padding: 0.4rem 0.75rem 0.65rem !important; }
.fi-fo-repeater-item-content > .grid { gap: 0.4rem 0.75rem !important; }
.dark .fi-fo-repeater-item > * + * { border-top-width: 0 !important; }

/* -- Blocos + modo planilha (Ticket 6 + blocos 30/07) ------------------ */
/* Dois repeaters aninhados na seção "Itens do orçamento":
   - .blocos-orcamento (externo): cada BLOCO é um card com faixa de título
     (recolhível) e botão "Adicionar bloco" em largura total, tracejado;
   - .linhas-bloco (interno): as LINHAS são a planilha — rótulos por linha
     somem no desktop e alça+lixeira ficam à direita, na altura da linha.
   As regras de planilha são ESCOPADAS em .linhas-bloco para não vazarem
   para o card do bloco (bug 30/07: cabeçalho do bloco flutuava por cima). */

/* Card do bloco: faixa de título lilás no topo.
   SEM overflow:hidden no card — cortava o dropdown da busca (bug 30/07);
   o arredondamento da faixa é feito na própria faixa. */
.blocos-orcamento .fi-fo-repeater-item-header {
    background: #f7f5fc;
    border-bottom: 1px solid #ece8f3;
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 0.45rem 0.9rem !important;
    font-size: 12.5px;
    font-weight: 600;
    color: #3D1E66;
}
.dark .blocos-orcamento .fi-fo-repeater-item-header {
    background: rgba(255, 255, 255, .04);
    border-bottom-color: rgba(255, 255, 255, .08);
    color: #d8ccf2;
}

/* Botão "Adicionar bloco": largura total, tracejado — não confunde com
   o "Adicionar item" (pequeno, dentro do bloco) */
.blocos-orcamento > div > .fi-btn {
    width: 100%;
    justify-content: center;
    border: 1.5px dashed #cfc4e8;
    background: #faf9fd;
    color: #3D1E66;
    font-weight: 600;
    box-shadow: none;
    border-radius: 10px;
    padding: 0.55rem 1rem;
}
.blocos-orcamento > div > .fi-btn:hover { background: #f3effb; border-color: #b49ede; }
.dark .blocos-orcamento > div > .fi-btn { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.15); color: #d8ccf2; }

/* Linhas dentro do bloco: planas (sem card), separadas por fio */
.linhas-bloco { gap: 0 !important; }
.linhas-bloco > ul > .grid { gap: 0.15rem !important; }
.linhas-bloco .fi-fo-repeater-item {
    box-shadow: none !important;
    background: transparent;
    border-radius: 0;
}
.linhas-bloco .fi-fo-repeater-item-header {
    background: transparent;
    border-bottom: 0;
    padding: 0.25rem 0.5rem !important;
    color: inherit;
}

/* "Adicionar item": discreto, alinhado à esquerda */
.linhas-bloco > div { justify-content: flex-start !important; margin-top: 0.3rem; }
.linhas-bloco > div > .fi-btn {
    background: transparent;
    box-shadow: none;
    border: 1px dashed #ddd3f0;
    border-radius: 8px;
    color: #6d28d9;
    font-weight: 600;
    font-size: 12px;
    padding: 0.3rem 0.7rem;
}
.linhas-bloco > div > .fi-btn:hover { background: #f7f5fc; }
.dark .linhas-bloco > div > .fi-btn { border-color: rgba(255,255,255,.15); color: #c4b0ea; }

.itens-orcamento-header { display: none; }

/* ---- Colunas da planilha: largura MÍNIMA real por campo, não fração cega
   (bug 19/09: repeat(12, minmax(0,1fr)) deixa toda coluna encolher até 0 —
   Un./Cobr. e Dificuldade sumiam, Qtd/Unit. R$ cortavam o número no meio,
   o dropdown herdava a largura espremida do gatilho). Os 12 "units" do
   grid mapeiam 1:1 os columnSpan lg de cada campo (ver PHP: Tipo=1,
   Descrição=3, Un./Cobr.=1, Pessoas=1, Qtd=1, Unit. R$=1, Dificuldade=2,
   Acr.%=1, Total=1) — a soma abaixo é o menor conteúdo ainda legível de
   cada um; o que sobra vira fr, proporcional ao que cada coluna pode
   aproveitar (Descrição cresce mais que Pessoas/Acr.%). Cabeçalho e linhas
   usam a MESMA variável para nunca desalinhar. Fora do zoom errado ou de
   janela pequena isto não precisa fração: só passa a existir onde o layout
   é planilha (≥1024px, ver .itens-orcamento-scroll abaixo). */
.itens-orcamento {
    --itens-grid-cols:
        minmax(56px, 0.5fr)   /* Tipo */
        minmax(64px, 1.3fr)   /* Descrição (1/3) */
        minmax(64px, 1.3fr)   /* Descrição (2/3) */
        minmax(64px, 1.3fr)   /* Descrição (3/3) */
        minmax(92px, 1fr)     /* Un./Cobr. */
        minmax(56px, 0.6fr)   /* Pessoas */
        minmax(64px, 0.7fr)   /* Qtd */
        minmax(88px, 1fr)     /* Unit. R$ */
        minmax(70px, 1fr)     /* Dificuldade (1/2) */
        minmax(70px, 1fr)     /* Dificuldade (2/2) */
        minmax(56px, 0.6fr)   /* Acr. % */
        minmax(96px, 1fr);    /* Total */
}

@media (min-width: 1024px) {
    .itens-orcamento-header {
        display: grid;
        grid-template-columns: var(--itens-grid-cols);
        gap: 0.4rem 0.75rem;
        padding: 0 4.5rem 0 0.75rem;
        margin-bottom: -0.35rem;
        font-size: 10.5px;
        font-weight: 600;
        color: rgb(var(--gray-400));
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .linhas-bloco .fi-fo-repeater-item-content .fi-fo-field-wrp-label {
        display: none !important;
    }

    .linhas-bloco .fi-fo-repeater-item { position: relative; }
    .linhas-bloco .fi-fo-repeater-item-header {
        position: absolute;
        top: 50%;
        right: 0.3rem;
        transform: translateY(-50%);
        padding: 0 !important;
        z-index: 1;
    }
    .linhas-bloco .fi-fo-repeater-item-content { padding-right: 4.5rem !important; }
    .linhas-bloco .fi-fo-repeater-item-content > .grid { align-items: center; }
    .linhas-bloco .itens-orcamento-badge { margin-top: 0; }

    /* A grade real dos campos (Filament: --cols-lg) usa a MESMA largura
       mínima do cabeçalho — !important vence o custom property inline que
       o Filament grava por campo (--cols-lg: repeat(12, minmax(0,1fr))). */
    .linhas-bloco .fi-fo-repeater-item-content > .grid {
        --cols-lg: var(--itens-grid-cols) !important;
    }

    /* Total da linha sem quebrar em duas linhas (sobreposição 30/07) */
    .linhas-bloco .fi-fo-placeholder { white-space: nowrap; font-size: 12px; }

    /* Campos numéricos/select da planilha não recebem menos do que a
       largura mínima da própria coluna, mesmo se o navegador tentar
       encolher o input por conta própria (min-width:0 é o default de
       flex/grid item e é ele quem deixa o texto cortar). */
    .linhas-bloco .fi-fo-repeater-item-content > .grid > * { min-width: 0; }
    .linhas-bloco input[type="text"],
    .linhas-bloco input[type="number"],
    .linhas-bloco .choices { min-width: 100%; }

    /* A <ul> do repeater (Filament) é 1 coluna "minmax(0,1fr)" — encolhe até
       0 e deixa a linha empurrar CONTEÚDO por cima da alça/lixeira (que são
       "position:absolute; right:0.3rem" relativo à própria linha: se a LINHA
       fica presa na largura do container mas a grade force um mínimo maior,
       o excesso invade visualmente a faixa reservada pro ícone, mesmo com
       o scroll disponível — bug 19/09, "R$ 2.500,00" sob a lixeira a
       1280px). Corrigido na raiz: a LINHA cresce até o min-content real
       (grade + padding do ícone) e só então overflow-x:auto do wrapper
       (.itens-orcamento-scroll, seção 20 acima) decide se rola. */
    .linhas-bloco > ul > .grid { --cols-default: minmax(min-content, 1fr) !important; }
}

/* Região da TABELA (cabeçalho + linhas) rola na horizontal sozinha quando a
   largura mínima das colunas não cabe no espaço disponível — a página em
   volta (título do bloco, descrição, busca) nunca ganha scroll horizontal.
   Abaixo de 1024px o modo planilha nem existe (cards empilhados, requisito
   6), então não há min-width para forçar scroll aqui. */
.itens-orcamento-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* ============ 21. Resumo financeiro lateral (Ticket 7) ============ */
/* Painel "Resumo financeiro" do orçamento interno: no desktop largo fica
   colado no topo enquanto a página rola (o usuário lança itens vendo o
   custo ao vivo); abaixo de 2xl empilha no fim, sem cobrir campos nem
   espremer a planilha de itens ao lado (breakpoint casado com o
   columnSpan do PHP — 18/09, min-width real da tabela não cabia mais
   entre 1280 e 1536px com o resumo do lado). */
@media (min-width: 1536px) {
    .resumo-orcamento { position: sticky; top: 4.5rem; }
}

/* ============ 22. Paginação — limpa, sem divisores ============ */
/* O Filament separa cada número com border-x (0.5px cinza); em listas densas
   os tracinhos viram ruído visual. Fora com eles — o hover/página ativa já
   diferenciam os itens. (Pedido do cliente, 2026-07-29.) */
.fi-pagination-item { border: none !important; }


/* ============ 23. Upload de imagem — depois de enviar, só a imagem ============ */
/* O FilePond deixa um painel verde com "Envio finalizado / clique para
   desfazer" sobre cada arquivo, e o painel preto ocupa a largura inteira.
   Pedido do Dan (03/09/2026): subiu, fica só a imagem carregada, com o × para
   tirar. Vale para todo upload do painel. */
.filepond--item[data-filepond-item-state='processing-complete'] .filepond--file-status,
.filepond--item[data-filepond-item-state='processing-complete'] .filepond--file-info,
.filepond--item[data-filepond-item-state='idle'] .filepond--file-status,
.filepond--item[data-filepond-item-state='idle'] .filepond--file-info { display: none !important; }
.filepond--item[data-filepond-item-state='processing-complete'] .filepond--item-panel,
.filepond--item[data-filepond-item-state='idle'] .filepond--item-panel { background-color: #f3f4f6 !important; }
.dark .filepond--item[data-filepond-item-state='processing-complete'] .filepond--item-panel,
.dark .filepond--item[data-filepond-item-state='idle'] .filepond--item-panel { background-color: #1f2937 !important; }
.filepond--item[data-filepond-item-state='processing-complete'] .filepond--image-preview-overlay-success,
.filepond--item[data-filepond-item-state='idle'] .filepond--image-preview-overlay-idle { opacity: 0 !important; }
.filepond--image-preview { background: transparent !important; }
/* O × de tirar a imagem fica sempre à vista (não só no hover): "como deleta
   imagem?" foi a pergunta assim que o painel verde saiu. */
.filepond--item[data-filepond-item-state='processing-complete'] .filepond--file-action-button,
.filepond--item[data-filepond-item-state='idle'] .filepond--file-action-button {
    opacity: 1 !important; visibility: visible !important; pointer-events: all !important;
}

/* ============================================================================
   24. Cinco indicadores na mesma linha (chamado #299, Dan, 04/09/2026)
   O robo tentou getColumns()=5 no widget: o Filament emite md:grid-cols-5, que
   nao esta compilado neste tema, e os cards cairam para UM por linha. A regra
   vale para todo widget de estatisticas com exatamente cinco cards: 3 colunas
   no tablet, 5 no desktop. CSS cru, sem build (regra da base).
   ============================================================================ */
@media (min-width: 768px) {
    .fi-wi-stats-overview-stats-ctn:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1280px) {
    .fi-wi-stats-overview-stats-ctn:has(> :nth-child(5):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}


/* ============================================================================
   11c. Login refeito (05/09/2026, referencia do Dan): card de acesso sobre campo
   cinza-claro, eyebrow, abas, campos com celula de icone, botao roxo cheio.
   Vale so na tela de login (classes .fi-simple-*). CSS cru, sem build.
   ============================================================================ */
.fi-simple-layout { background: #f4f5f7; }
.fi-simple-main {
    max-width: 28rem !important; width: 100%;
    background: #fff; border: 1px solid #e6e8ee; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 44px -20px rgba(15, 23, 42, .22);
    padding: 2.7rem 2.75rem 2.4rem !important;
}
.fi-simple-header { align-items: flex-start !important; text-align: left !important; margin-bottom: 1.1rem !important; }
.fi-simple-header-heading {
    display: flex !important; flex-direction: column; gap: .4rem; text-align: left !important;
    font-size: 1.95rem !important; font-weight: 700 !important; letter-spacing: -.02em; color: #111827; line-height: 1.15;
}
.ms-eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8a919f; }
.fi-simple-header-subheading { text-align: left !important; font-size: .98rem; color: #6b7280; line-height: 1.55; margin-top: .55rem !important; }
.ms-link { color: #3D1E66; font-weight: 600; text-decoration: none; }
.ms-link:hover { text-decoration: underline; }

.ms-tabs { display: flex; border-bottom: 1px solid #e6e8ee; margin: .1rem 0 1.5rem; }
.ms-tab {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .85rem .5rem; font-size: .98rem; color: #6b7280; text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s;
}
.ms-tab svg { width: 20px; height: 20px; }
.ms-tab.on { color: #3D1E66; font-weight: 600; border-bottom-color: #3D1E66; }
.ms-tab:hover { color: #3D1E66; }

/* campos com celula de icone a esquerda */
.fi-simple-main .fi-input-wrp {
    border-radius: 10px !important; border: 1px solid #dcdfe6 !important; box-shadow: none !important;
    min-height: 3.3rem; overflow: hidden; background: #fff;
}
.fi-simple-main .fi-input-wrp:focus-within { border-color: #3D1E66 !important; box-shadow: 0 0 0 3px rgba(61, 30, 102, .12) !important; }
.fi-simple-main .fi-input-wrp-prefix {
    background: #f2f3f6; border-right: 1px solid #e6e8ee; padding: 0 .95rem !important; margin: 0 !important;
    display: flex; align-items: center; align-self: stretch;
}
.fi-simple-main .fi-input-wrp-prefix svg { color: #8a919f; width: 1.15rem; height: 1.15rem; }
.fi-simple-main .fi-input-wrp .fi-input { padding-left: .95rem !important; font-size: 1rem; color: #111827; }
.fi-simple-main .fi-input-wrp .fi-input::placeholder { color: #9aa1ad; }
.fi-simple-main .fi-fo-field-wrp { margin-bottom: .1rem; }

/* lembrar + esqueceu na mesma linha */
.ms-remember-row { align-items: center; margin-top: .2rem; }
.ms-remember-row .fi-fo-checkbox label, .ms-remember-row .fi-fo-field-wrp-label { font-size: .95rem; color: #374151; }
.fi-simple-main .fi-checkbox-input { border-radius: 5px; border-color: #c9cdd6; }
.fi-simple-main .fi-checkbox-input:checked { background-color: #3D1E66 !important; border-color: #3D1E66 !important; }
.ms-forgot { text-align: right; }
.ms-forgot a { font-size: .92rem; color: #3D1E66; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* botao Entrar */
.fi-simple-main .fi-form-actions { margin-top: 1.4rem !important; }
.fi-simple-main .fi-form-actions .fi-btn {
    width: 100%; min-height: 3.35rem; border-radius: 10px; font-size: 1.05rem; font-weight: 600;
    background: #3D1E66 !important; color: #fff; justify-content: center; gap: .7rem;
    box-shadow: 0 8px 20px -10px rgba(61, 30, 102, .6);
}
.fi-simple-main .fi-form-actions .fi-btn:hover { background: #4C2A8A !important; }
.fi-simple-main .fi-form-actions .fi-btn svg { width: 1.2rem; height: 1.2rem; }


/* ============ 11d. Login: campos alinhados, olho dentro, aba WhatsApp (05/09/2026) ============ */
.fi-simple-main .fi-input-wrp { display: flex; align-items: stretch; min-height: 3.4rem; }
.fi-simple-main .fi-input-wrp-prefix {
    width: 3.2rem; padding: 0 !important; margin: 0 !important; justify-content: center;
    background: #f2f3f6; border-right: 1px solid #e6e8ee; flex: 0 0 3.2rem;
}
.fi-simple-main .fi-input-wrp-prefix svg { width: 1.2rem; height: 1.2rem; color: #8a919f; }
.fi-simple-main .fi-input-wrp-input { display: flex; align-items: center; }
.fi-simple-main .fi-input-wrp .fi-input { height: 100%; line-height: 1.2; padding-top: 0 !important; padding-bottom: 0 !important; }
/* olho da senha DENTRO do campo, sem caixa separada */
.fi-simple-main .fi-input-wrp-suffix { border: 0 !important; padding: 0 .9rem 0 .25rem !important; margin: 0 !important; background: transparent; }
.fi-simple-main .fi-input-wrp-suffix svg { color: #8a919f; width: 1.15rem; height: 1.15rem; }
.fi-simple-main .fi-input-wrp-suffix .fi-icon-btn { width: 1.6rem; height: 1.6rem; }
/* lembrar + esqueceu alinhados na mesma linha de base */
.ms-remember-row { align-items: center !important; }
.ms-remember-row .fi-fo-field-wrp { margin: 0; }
.ms-remember-row .fi-fo-checkbox > label, .ms-remember-row .fi-fo-field-wrp-label { display: inline-flex; align-items: center; gap: .55rem; }
.fi-simple-main .fi-checkbox-input { width: 1.05rem; height: 1.05rem; margin: 0; }
.ms-forgot { text-align: right; line-height: 1; }

/* painel WhatsApp (mesma familia dos campos) */
.ms-wa { display: flex; flex-direction: column; gap: 1rem; }
.ms-wa-hint { font-size: .95rem; color: #6b7280; line-height: 1.55; margin: 0 0 .25rem; }
.ms-wa-hint b { color: #111827; font-weight: 600; }
.ms-wa-form { display: flex; flex-direction: column; gap: .9rem; }
.ms-field { display: flex; align-items: stretch; min-height: 3.4rem; border: 1px solid #dcdfe6; border-radius: 10px; overflow: hidden; background: #fff; }
.ms-field:focus-within { border-color: #3D1E66; box-shadow: 0 0 0 3px rgba(61, 30, 102, .12); }
.ms-field-ico { width: 3.2rem; flex: 0 0 3.2rem; display: grid; place-items: center; background: #f2f3f6; border-right: 1px solid #e6e8ee; }
.ms-field-ico svg { width: 1.2rem; height: 1.2rem; color: #8a919f; }
.ms-field input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 .95rem; font-size: 1rem; color: #111827; background: transparent; }
.ms-field input::placeholder { color: #9aa1ad; }
.ms-wa-btn {
    width: 100%; min-height: 3.35rem; border: 0; border-radius: 10px; background: #3D1E66; color: #fff;
    font-size: 1.05rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(61, 30, 102, .6); margin-top: .3rem;
}
.ms-wa-btn:hover { background: #4C2A8A; }
.ms-wa-btn svg { width: 1.2rem; height: 1.2rem; }
.ms-wa-trocar { text-align: center; }
.ms-wa-link { background: none; border: 0; color: #3D1E66; font-size: .92rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ms-err { font-size: .88rem; color: #b91c1c; }
.ms-ok { font-size: .9rem; color: #15803d; }

/* [05/09/2026] hidden tem que vencer o display:flex do painel WhatsApp */
.ms-wa[hidden] { display: none !important; }


/* 25. Relatório de Serviço: bloco = cartão roxo numerado; serviço = cartão menor
   dentro, também numerado. Sem isso o repeater aninhado vira uma lista plana e
   "não se sabe onde começa e onde termina o bloco" (Dan, 08/09/2026).
   Marcação do Filament: .fi-fo-repeater > ul > li.fi-fo-repeater-item; o :not()
   tira os itens do repeater interno da regra do externo. */
.rs-blocos { counter-reset: rs-bloco; }
.rs-blocos li.fi-fo-repeater-item:not(.rs-servicos li.fi-fo-repeater-item) {
    counter-increment: rs-bloco;
    border: 2px solid #3D1E66 !important;
    border-radius: 14px !important;
    background: #faf8fd !important;
    box-shadow: 0 6px 20px rgb(61 30 102 / .08) !important;
    overflow: hidden;
}
.rs-blocos li.fi-fo-repeater-item:not(.rs-servicos li.fi-fo-repeater-item) > .fi-fo-repeater-item-header {
    background: #3D1E66 !important;
    padding: .55rem .9rem !important;
}
.rs-blocos li.fi-fo-repeater-item:not(.rs-servicos li.fi-fo-repeater-item) > .fi-fo-repeater-item-header * { color: #fff !important; }
.rs-blocos li.fi-fo-repeater-item:not(.rs-servicos li.fi-fo-repeater-item) > .fi-fo-repeater-item-header h4 { font-weight: 600 !important; font-size: .95rem !important; }
.rs-blocos li.fi-fo-repeater-item:not(.rs-servicos li.fi-fo-repeater-item) > .fi-fo-repeater-item-header h4::before {
    content: "Bloco " counter(rs-bloco) "  ·  ";
    opacity: .75;
    font-weight: 500;
}
.rs-blocos li.fi-fo-repeater-item:not(.rs-servicos li.fi-fo-repeater-item) > .fi-fo-repeater-item-content { padding: 1rem 1rem 1.1rem !important; }

.rs-servicos { counter-reset: rs-servico; }
/* [08/09/2026 Dan] "não quero sanfona dentro do bloco": o serviço não tem barra de
   cabeçalho. Sobra uma linha fina com "Serviço N" e, à direita, a pega de arrastar e
   a lixeira. Só o BLOCO recolhe. */
.rs-servicos li.fi-fo-repeater-item {
    counter-increment: rs-servico;
    border: 1px solid #e3ddee !important;
    border-left: 4px solid #6a3fa0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.rs-servicos li.fi-fo-repeater-item > .fi-fo-repeater-item-header {
    background: transparent !important;
    padding: .35rem .6rem .1rem .8rem !important;
    cursor: default !important;
    border-bottom: 0 !important;
}
.rs-servicos li.fi-fo-repeater-item > .fi-fo-repeater-item-header h4 { font-size: 0 !important; }
.rs-servicos li.fi-fo-repeater-item > .fi-fo-repeater-item-header h4::before {
    content: "Serviço " counter(rs-servico);
    font-size: .8rem;
    color: #6a3fa0;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.rs-servicos li.fi-fo-repeater-item > .fi-fo-repeater-item-content { padding: .5rem .9rem 1rem !important; }
/* cartão do recibo (lilás), etapas numeradas e a régua de Antes/Depois: ideia de
   organização visual trazida pelo Dan em 08/09/2026 */
.rs-emitir { background: #f3eefb !important; border: 1px solid #dccdf0 !important; border-radius: 12px !important; padding: .9rem 1rem !important; }
.rs-emitir > legend { color: #3D1E66 !important; font-weight: 600 !important; }
.rs-etapa { display: flex; align-items: center; gap: .55rem; margin: .1rem 0 -.2rem; }
.rs-etapa-ico { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: 9999px; background: #ece4f7; color: #3D1E66; align-items: center; justify-content: center; }
.rs-etapa-ico svg { width: 1rem; height: 1rem; }
.rs-etapa-txt { font-weight: 600; font-size: .95rem; color: #1f1633; }
.rs-blocos .fi-fo-field-wrp-label, .rs-blocos .fi-fo-field-wrp .text-sm { font-weight: 400; }
.rs-antes, .rs-depois { padding: .9rem 1rem 1rem !important; border-radius: 12px !important; position: relative; }
.rs-antes { border-color: #e9c46a !important; }
.rs-depois { border-color: #9fd3b7 !important; }
.rs-antes > legend, .rs-depois > legend { font-weight: 600 !important; font-size: .9rem !important; padding: 0 .5rem !important; }
.rs-antes > legend { color: #9a6b00 !important; }
.rs-depois > legend { color: #1f6b46 !important; }
.rs-antes > legend::before, .rs-depois > legend::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 9999px; margin-right: .4rem; vertical-align: 1px; }
.rs-antes > legend::before { background: #e9c46a; }
.rs-depois > legend::before { background: #2f7d5b; }


/* 26. Relatório de Serviço, desenho de 08/09/2026: topo com progresso e ações, faixa
   do bloco com foto e contadores, caixa de seleção à esquerda do serviço, selo do
   recibo, foto e descrição lado a lado, barra fixa no rodapé. */
.rs-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: -.25rem 0 .5rem; }
.rs-topo-prog { min-width: 260px; flex: 1 1 260px; max-width: 420px; background: #f6f3fb; border: 1px solid #e3ddee; border-radius: 12px; padding: .6rem .9rem; }
.rs-topo-rot { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #6a3fa0; font-weight: 600; }
.rs-topo-num { font-size: .8rem; color: #4a4458; margin-top: .35rem; }
.rs-topo-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.rs-barra-prog { height: 8px; border-radius: 9999px; background: #e6e1ef; overflow: hidden; margin-top: .4rem; }
.rs-barra-prog > span { display: block; height: 100%; background: #2f7d5b; border-radius: 9999px; transition: width .3s; }
.rs-btn { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid #d7d0e3; background: #fff; color: #3D1E66; border-radius: 9px; padding: .5rem .85rem; font-size: .82rem; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.rs-btn:hover { background: #f3eefb; }
.rs-btn:disabled { opacity: .45; cursor: default; }
.rs-btn-p { background: #3D1E66; border-color: #3D1E66; color: #fff; }
.rs-btn-p:hover { background: #2f1752; }
.rs-faixa { display: flex; align-items: center; gap: .9rem; background: #fff; border: 1px solid #e3ddee; border-radius: 12px; padding: .6rem .8rem; }
.rs-faixa-foto { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; display: block; }
.rs-faixa-semfoto { display: flex; align-items: center; justify-content: center; background: #f1ecf8; color: #9a93a8; font-size: .7rem; }
.rs-faixa-txt { flex: 1 1 auto; min-width: 0; }
.rs-faixa-tit { font-weight: 600; font-size: 1rem; color: #1f1633; }
.rs-faixa-sub { font-size: .78rem; color: #6b7280; margin-top: .15rem; }
.rs-faixa-prog { width: 220px; flex-shrink: 0; }
.rs-faixa-prog-txt { font-size: .74rem; color: #4a4458; }
.rs-faixa-pct { font-size: .74rem; color: #2f7d5b; font-weight: 600; text-align: right; margin-top: .2rem; }
.rs-servicos li.fi-fo-repeater-item { position: relative; }
.rs-servicos li.fi-fo-repeater-item > .fi-fo-repeater-item-content { padding-left: 2.9rem !important; }
.rs-check { position: absolute; left: 1rem; top: 3.05rem; width: auto !important; }
.rs-check input[type=checkbox] { width: 22px; height: 22px; border-radius: 6px; border-color: #6a3fa0; cursor: pointer; }
.rs-check input[type=checkbox]:checked { background-color: #3D1E66; border-color: #3D1E66; }
.rs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 9999px; margin-right: .45rem; vertical-align: 1px; }
.rs-selo { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 600; letter-spacing: .01em; padding: .3rem .65rem; border-radius: 9999px; white-space: nowrap; }
.rs-selo-ok { background: #e8f5ee; color: #1f6b46; }
.rs-selo-emitido { background: #e8f5ee; color: #2f7d5b; }
.rs-selo-marcado { background: #ede7f5; color: #3D1E66; }
.rs-selo-livre { background: #f3f4f6; color: #6b7280; border: 1px dashed #cbd5e1; font-weight: 500; }
.rs-selo-num { display: block; font-size: .72rem; color: #6b7280; margin-top: .3rem; line-height: 1.3; }
.rs-antes, .rs-depois { align-items: start; }
.rs-barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: .6rem; padding: .6rem 1.25rem; background: rgb(255 255 255 / .96); border-top: 1px solid #e3ddee; box-shadow: 0 -6px 20px rgb(61 30 102 / .08); backdrop-filter: blur(6px); }
@media (min-width: 1024px) { .fi-sidebar-open ~ .fi-main-ctn .rs-barra-fixa, .fi-layout:has(.fi-sidebar.fi-sidebar-open) .rs-barra-fixa { left: 20rem; } }
/* [10/09/2026] Revisao responsiva: a 390px o botao de emitir passava 90px da
   tela. A barra quebra em duas linhas e o botao principal ocupa a segunda. */
@media (max-width: 640px) {
    .rs-barra-fixa { flex-wrap: wrap; row-gap: .5rem; padding: .6rem .75rem; }
    .rs-barra-fixa > * { min-width: 0; }
    .rs-barra-fixa .rs-btn { white-space: normal; text-align: center; }
    .rs-barra-fixa .rs-btn-p { flex: 1 1 100%; }
}
.rs-barra-info { margin-left: auto; margin-right: .5rem; font-size: .82rem; color: #4a4458; }
.rs-barra-info a { color: #3D1E66; text-decoration: underline; margin-left: .5rem; font-size: .78rem; }
.fi-page.fi-resource-relatorio-servicos.fi-resource-edit-record-page { padding-bottom: 5.5rem; }
.fi-page.fi-resource-relatorio-servicos.fi-resource-edit-record-page .fi-form-actions { display: none !important; }
.fi-page.fi-resource-relatorio-servicos.fi-resource-edit-record-page [x-data] > .fixed[style*="right:20px"] { bottom: 74px !important; }


/* ------------------------------------------------------------------------
   27. Upload com imagem: o rótulo de arrastar sai de cima da foto
   [10/09/2026 Dan] "depois que tiver imagem pode remover o texto de cima dela".
   O FilePond desenha o rótulo no mesmo lugar da miniatura, e ele ficava lido
   por cima da foto. Some assim que houver um item na caixa; volta ao remover.
   ------------------------------------------------------------------------ */
/* [16/09/2026 Maicon] So vale para caixa de UMA imagem (capa, rosto, logo). Na caixa de
   varias (imagens do servico, fotos da visita) o rotulo precisa continuar: sem ele
   ninguem conseguia por a segunda foto ("so consigo por uma foto de capa e uma de servico"). */
.filepond--root:has(.filepond--item):not(:has(.filepond--browser[multiple])) .filepond--drop-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ------------------------------------------------------------------------
   28. Relatorio de Servico: cabecalho de INFORMACAO, nao formulario
   [10/09/2026 Dan] "seria uma imagem exemplo para o head, que hoje ainda e
   alto". Catorze campos de formulario para mostrar dado que vem todo do
   cadastro ocupavam meia tela. Aqui e leitura densa; o editavel abre no botao.
   ------------------------------------------------------------------------ */
.rs-head { display: flex; flex-direction: column; }
.rs-head-topo { display: flex; align-items: flex-start; gap: .875rem; padding-bottom: .875rem; }
.rs-head-ic { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #f1ecfb; color: #6b4b9a; display: flex; align-items: center; justify-content: center; }
.dark .rs-head-ic { background: rgb(63 45 90); color: #d7c8f0; }
.rs-head-ic svg { width: 1.375rem; height: 1.375rem; }
.rs-eyebrow { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #9b93a8; font-weight: 600; }
.rs-head-nome h2 { margin: .0625rem 0 .25rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; color: #2c2440; line-height: 1.15; }
.dark .rs-head-nome h2 { color: rgb(228 228 231); }
.rs-head-meta { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #6b7280; flex-wrap: wrap; }
.rs-head-meta i { color: #cbd0d8; font-style: normal; }
.rs-pill { font-size: .75rem; font-weight: 600; padding: .125rem .5rem; border-radius: 999px; }
.rs-pill.edicao { background: #e8effd; color: #2f5fb3; }
.rs-pill.travado { background: #e9f7ef; color: #2f7d5b; }

.rs-head-grade { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 0; border-top: 1px solid #eceaf2; padding-top: .875rem; }
.dark .rs-head-grade { border-color: rgb(63 63 70); }
.rs-head-col { display: flex; gap: .875rem; padding: 0 1.25rem; }
.rs-head-col:first-child { padding-left: 0; }
.rs-head-col + .rs-head-col { border-left: 1px solid #eceaf2; flex-direction: column; gap: .875rem; }
.dark .rs-head-col + .rs-head-col { border-color: rgb(63 63 70); }
.rs-head-campos { display: flex; flex-direction: column; gap: .875rem; min-width: 0; }
.rs-head-foto { flex: 0 0 auto; width: 6rem; height: 6rem; border-radius: .625rem; object-fit: cover; }

.rs-campo { display: flex; gap: .625rem; align-items: flex-start; min-width: 0; }
.rs-campo-ic { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: #f4f1fa; color: #6b4b9a; display: flex; align-items: center; justify-content: center; }
.dark .rs-campo-ic { background: rgb(52 40 70); color: #cbb9e8; }
.rs-campo-ic svg { width: .9375rem; height: .9375rem; }
.rs-rot { display: block; font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: #9b93a8; font-weight: 600; }
.rs-campo b { display: block; font-size: .875rem; font-weight: 500; color: #2c2440; line-height: 1.35; margin-top: .0625rem; }
.dark .rs-campo b { color: rgb(228 228 231); }
.rs-campo em { display: block; font-style: normal; font-size: .75rem; color: #9b93a8; margin-top: .0625rem; }
.rs-seta { font-style: normal; color: #9b93a8; margin: 0 .25rem; }
.rs-mapa { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 500; color: #6b4b9a; border: 1px solid #e4e0ee; border-radius: .5rem; padding: .375rem .625rem; text-decoration: none; white-space: nowrap; }
.rs-mapa svg { width: .875rem; height: .875rem; }

.rs-head-obs { display: flex; gap: .625rem; align-items: flex-start; border-top: 1px solid #eceaf2; margin-top: .875rem; padding-top: .875rem; }
.dark .rs-head-obs { border-color: rgb(63 63 70); }
.rs-head-obs .rs-obs-txt { font-weight: 400; color: #4b5361; white-space: pre-line; }
.dark .rs-head-obs .rs-obs-txt { color: rgb(161 161 170); }

@media (max-width: 1279px) {
    .rs-head-grade { grid-template-columns: 1fr; gap: .875rem; }
    .rs-head-col + .rs-head-col { border-left: 0; border-top: 1px solid #eceaf2; padding: .875rem 0 0; }
    .rs-head-col:first-child { padding: 0; }
}


/* ------------------------------------------------------------------------
   29. Relatorio de Servico: revisao responsiva (medida, 10/09/2026)
   Medido com scripts/tela/avaliar.php nas larguras 1440, 1280, 1024, 820 e 390.
   O corpo da pagina nunca rolava de lado; o que rolava era por dentro:
   - o rotulo do bloco (h4 do repeater) nao quebrava: 213px de rolagem a 390;
   - a linha do servico no repeater: 120px a 390;
   - a tabela de recibos: 25px a partir de 820.
   ------------------------------------------------------------------------ */
.fi-fo-repeater-item-header h4,
.fi-fo-repeater-item-header .fi-fo-repeater-item-header-label {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    min-width: 0;
}

@media (max-width: 640px) {
    /* nada dentro do bloco pode exigir largura minima maior que a tela */
    .fi-fo-repeater-item-content .fi-fo-field-wrp,
    .fi-fo-repeater-item-content .fi-fo-component-ctn { min-width: 0; }
    .fi-fo-repeater-item-content input,
    .fi-fo-repeater-item-content select,
    .fi-fo-repeater-item-content textarea { min-width: 0; max-width: 100%; }
    .rs-antes, .rs-depois { min-width: 0; }
    .rs-antes .fi-fo-field-wrp, .rs-depois .fi-fo-field-wrp { min-width: 0; }
    /* o check do servico sai da posicao absoluta e volta ao fluxo */
    .rs-check { position: static !important; margin-bottom: .25rem; }
}


/* ------------------------------------------------------------------------
   30. Gerador de imagens por IA (Dan, 10/09/2026)
   Modal por cima da tela atual, no design system do painel: mesma familia de
   raio, borda, roxo e espacamento. Duas colunas no desktop, uma no celular.
   ------------------------------------------------------------------------ */
.gi-fundo { position: fixed; inset: 0; z-index: 60; background: rgb(15 23 42 / .5); display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; }
.gi-caixa { background: #fff; border-radius: 1rem; width: 100%; max-width: 62rem; max-height: calc(100vh - 3rem); display: flex; flex-direction: column; box-shadow: 0 24px 60px rgb(15 23 42 / .22); overflow: hidden; }
.dark .gi-caixa { background: rgb(24 24 27); }

.gi-topo { display: flex; align-items: flex-start; gap: .875rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #ececf1; }
.dark .gi-topo { border-color: rgb(63 63 70); }
.gi-marca { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #f1ecfb; color: #6b4b9a; display: flex; align-items: center; justify-content: center; }
.gi-marca svg { width: 1.375rem; height: 1.375rem; }
.gi-titulo h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: #2c2440; }
.dark .gi-titulo h2 { color: rgb(228 228 231); }
.gi-titulo p { margin: .125rem 0 0; font-size: .875rem; color: #71717a; }
.gi-x { margin-left: auto; border: 0; background: transparent; color: #a1a1aa; cursor: pointer; padding: .25rem; border-radius: .5rem; }
.gi-x svg { width: 1.25rem; height: 1.25rem; display: block; }
.gi-x:hover { background: #f4f4f5; color: #52525b; }

.gi-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.25rem 1.5rem; overflow-y: auto; }
.gi-col { min-width: 0; display: flex; flex-direction: column; }
.gi-rot { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: #8b8496; font-weight: 600; margin-bottom: .375rem; }
.gi-area, .gi-campo { width: 100%; font: inherit; font-size: .875rem; padding: .625rem .75rem; border: 1px solid #e0e0e6; border-radius: .625rem; background: #fff; color: #27272a; }
/* [10/09/2026] O <select> herdava uma seta de fundo que REPETIA e cobria o
   texto ("Fotorrealista" atras de sete chevrons). Uma seta so, sem repetir,
   com espaco a direita para ela. */
select.gi-campo {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem 1rem;
}
.dark select.gi-campo { background-color: rgb(39 39 42); }
.dark .gi-area, .dark .gi-campo { background: rgb(39 39 42); border-color: rgb(63 63 70); color: rgb(228 228 231); }
.gi-area { resize: vertical; min-height: 6.5rem; }
.gi-area:focus, .gi-campo:focus { outline: 2px solid #6b4b9a; outline-offset: -1px; }
.gi-conta { text-align: right; font-size: .75rem; color: #a1a1aa; margin: .25rem 0 .875rem; }
.gi-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .875rem; }
.gi-campo + .gi-rot { margin-top: .875rem; }
select.gi-campo { margin-bottom: .875rem; }

.gi-solta { display: flex; align-items: center; gap: .75rem; border: 1px dashed #d4d4d8; border-radius: .625rem; padding: .875rem; cursor: pointer; color: #6b4b9a; }
.gi-solta:hover { background: #faf9fc; }
.gi-solta svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.gi-solta b { display: block; font-size: .875rem; font-weight: 500; color: #3f3f46; }
.gi-solta em { display: block; font-style: normal; font-size: .75rem; color: #a1a1aa; }
.gi-ref { display: flex; align-items: center; gap: .75rem; border: 1px solid #e0e0e6; border-radius: .625rem; padding: .5rem .75rem; }
.gi-ref img { width: 2.75rem; height: 2.75rem; border-radius: .5rem; object-fit: cover; }
.gi-ref-txt b { display: block; font-size: .8125rem; font-weight: 500; }
.gi-ref-txt em { font-style: normal; font-size: .75rem; color: #a1a1aa; }
.gi-ref-x { margin-left: auto; border: 0; background: transparent; color: #b91c1c; font: inherit; font-size: .8125rem; cursor: pointer; }

.gi-detalhe { margin-top: .875rem; font-size: .8125rem; color: #71717a; }
.gi-detalhe summary { cursor: pointer; color: #6b4b9a; }
.gi-detalhe p { margin: .5rem 0 0; padding: .625rem .75rem; background: #faf9fc; border: 1px solid #ececf1; border-radius: .5rem; white-space: pre-line; }
.dark .gi-detalhe p { background: rgb(39 39 42); border-color: rgb(63 63 70); }
.gi-nota { font-size: .75rem; color: #a1a1aa; line-height: 1.5; }
.gi-consumo { margin-top: auto; padding-top: .875rem; }

.gi-preview { border: 1px solid #ececf1; border-radius: .75rem; background: #fafafa; min-height: 16rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dark .gi-preview { background: rgb(39 39 42); border-color: rgb(63 63 70); }
.gi-img { width: 100%; height: auto; display: block; }
.gi-vazio, .gi-carregando { text-align: center; padding: 2rem 1rem; color: #a1a1aa; }
.gi-vazio b, .gi-carregando b { display: block; font-size: .9375rem; color: #52525b; margin-bottom: .25rem; }
.gi-vazio span, .gi-carregando span { font-size: .8125rem; }
.gi-vazio-ic { display: inline-flex; width: 3rem; height: 3rem; border-radius: .75rem; background: #f1ecfb; color: #6b4b9a; align-items: center; justify-content: center; margin-bottom: .75rem; }
.gi-vazio-ic svg { width: 1.5rem; height: 1.5rem; }
.gi-esqueleto { height: 8rem; border-radius: .625rem; margin-bottom: .875rem; background: linear-gradient(90deg, #f4f4f5 25%, #e9e7ef 37%, #f4f4f5 63%); background-size: 400% 100%; animation: gi-brilho 1.4s ease infinite; }
@keyframes gi-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .gi-esqueleto { animation: none; } }

.gi-erro { margin-top: .75rem; background: #fdecec; border: 1px solid #f3c1c1; color: #991b1b; border-radius: .625rem; padding: .625rem .75rem; font-size: .8125rem; }
.gi-acoes-img { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 .5rem; }
.gi-sugestoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.gi-chip { font: inherit; font-size: .8125rem; border: 1px solid #e4e0ee; background: #fff; color: #4b4457; border-radius: 999px; padding: .375rem .75rem; cursor: pointer; }
.gi-chip:hover { background: #faf9fc; border-color: #cbb9e8; }
.dark .gi-chip { background: rgb(39 39 42); border-color: rgb(63 63 70); color: rgb(212 212 216); }

.gi-btn { font: inherit; font-size: .875rem; font-weight: 500; padding: .5rem .875rem; border-radius: .625rem; border: 1px solid #e0e0e6; background: #fff; color: #3f3f46; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .375rem; }
.gi-btn:hover { background: #fafafa; }
.gi-btn.gi-forte { background: #3d1e66; border-color: #3d1e66; color: #fff; }
.gi-btn.gi-forte:hover { background: #331956; }
.gi-btn:disabled { opacity: .5; cursor: not-allowed; }
.dark .gi-btn { background: rgb(39 39 42); border-color: rgb(63 63 70); color: rgb(228 228 231); }

.gi-rodape { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid #ececf1; background: #fbfbfc; }
.dark .gi-rodape { border-color: rgb(63 63 70); background: rgb(32 32 35); }
.gi-rodape-btns { margin-left: auto; display: flex; gap: .5rem; flex-shrink: 0; }

@media (max-width: 860px) {
    .gi-fundo { padding: 0; }
    .gi-caixa { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
    .gi-corpo { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
    .gi-dupla { grid-template-columns: 1fr; }
    .gi-rodape { flex-direction: column; align-items: stretch; gap: .625rem; }
    .gi-rodape-btns { margin-left: 0; }
    .gi-rodape-btns .gi-btn { flex: 1; justify-content: center; }
    .gi-consumo { margin-top: .5rem; }
}


/* ------------------------------------------------------------------------
   31. Orcamento rapido: cartoes com icone e a caixa de dica (desenho do Dan)
   ------------------------------------------------------------------------ */
.so-aviso { display: flex; align-items: flex-start; gap: .5rem; background: #f6f3fc; border: 1px solid #e6ddf7; border-radius: .625rem; padding: .625rem .75rem; font-size: .8125rem; line-height: 1.4; color: #5b5170; }
.dark .so-aviso { background: rgb(52 40 70); border-color: rgb(76 58 104); color: rgb(200 190 220); }
.so-aviso svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: #6b4b9a; margin-top: .05rem; }

/* contador do textarea, sem ida ao servidor por tecla */
.so-conta { position: relative; }
.so-conta .fi-fo-field-wrp-hint, .so-conta > .fi-fo-field-wrp-label-ctn { position: relative; }
.so-conta textarea + .so-contador { display: block; }
.so-conta::after { content: ; }

/* icone do cabecalho da secao no tom da casa */
.fi-section-header-icon { color: #6b4b9a; }
.dark .fi-section-header-icon { color: #cbb9e8; }


/* ------------------------------------------------------------------------
   32. Meu Perfil no desenho do Dan (10/09/2026)
   Cartao da pessoa a esquerda, secoes a direita, caixas de apoio dentro delas.
   A pagina e do pacote breezy: aqui e so arranjo, sem tocar nas views dele.
   ------------------------------------------------------------------------ */
.pf-grade { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pf-grade > .filament-breezy-grid-section { grid-column: 2; }
/* a secao do pacote vira cartao: titulo em cima, campos embaixo */
.pf-secao { display: block !important; padding: 1.25rem 1.5rem !important; margin: 0 !important;
    background: #fff; border: 1px solid rgb(236 236 241); border-radius: .875rem; box-shadow: 0 1px 2px rgb(15 23 42/.04); }
.dark .pf-secao { background: rgb(24 24 27); border-color: rgb(63 63 70); }
.pf-secao > div { grid-column: auto !important; }
.pf-cab { display: flex !important; align-items: flex-start; gap: .875rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #ececf1; }
.dark .pf-cab { border-color: rgb(63 63 70); }
.pf-cab .pf-ic { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: .625rem; background: #f1ecfb; color: #6b4b9a; display: flex; align-items: center; justify-content: center; }
.dark .pf-cab .pf-ic { background: rgb(63 45 90); color: #d7c8f0; }
.pf-cab .pf-ic svg { width: 1.25rem; height: 1.25rem; }
.pf-cartao { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: 5rem;
    background: #fff; border: 1px solid rgb(236 236 241); border-radius: .875rem; padding: 1.5rem; text-align: center;
    box-shadow: 0 1px 2px rgb(15 23 42/.04); }
.dark .pf-cartao { background: rgb(24 24 27); border-color: rgb(63 63 70); }

.pf-avatar { position: relative; width: 6rem; height: 6rem; border-radius: 999px; margin: 0 auto .875rem; background: #6b4b9a; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 2.25rem; font-weight: 600; overflow: hidden;
    border: 0; padding: 0; cursor: pointer; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* [10/09/2026 Dan] foto com fundo transparente ficava roxa por baixo */
.pf-avatar.pf-tem-foto { background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.dark .pf-avatar.pf-tem-foto { background: rgb(39 39 42); box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.pf-troca { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    background: rgb(20 12 34 / .62); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    opacity: 0; transition: opacity .15s; }
.pf-troca svg { width: 1.15rem; height: 1.15rem; }
.pf-avatar:hover .pf-troca, .pf-avatar:focus-visible .pf-troca { opacity: 1; }

.pf-nome { margin: 0; font-size: 1.25rem; font-weight: 700; color: #2c2440; }
.dark .pf-nome { color: rgb(228 228 231); }
.pf-papel { margin: .125rem 0 .625rem; font-size: .875rem; color: #8b8496; }
.pf-pill { display: inline-block; font-size: .75rem; font-weight: 600; color: #6b4b9a; background: #f1ecfb; border-radius: 999px; padding: .25rem .75rem; }
.dark .pf-pill { background: rgb(63 45 90); color: #d7c8f0; }
.pf-empresa { display: flex; align-items: center; justify-content: center; gap: .375rem; margin: .875rem 0 0; font-size: .875rem; color: #52525b; }
.pf-empresa svg { width: 1rem; height: 1rem; color: #8b8496; }
.dark .pf-empresa { color: rgb(212 212 216); }

.pf-linhas { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #ececf1; display: flex; flex-direction: column; gap: .75rem; text-align: left; }
.dark .pf-linhas { border-color: rgb(63 63 70); }
.pf-linhas p { margin: 0; display: flex; align-items: center; gap: .625rem; font-size: .8125rem; color: #52525b; word-break: break-word; }
.dark .pf-linhas p { color: rgb(212 212 216); }
.pf-linhas svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: #8b8496; }

/* caixa de apoio dentro da secao */
.pf-com-apoio { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }
.pf-apoio { background: #f6f3fc; border: 1px solid #e6ddf7; border-radius: .75rem; padding: 1rem; font-size: .8125rem; color: #5b5170; }
.dark .pf-apoio { background: rgb(52 40 70); border-color: rgb(76 58 104); color: rgb(200 190 220); }
.pf-apoio b { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #3d1e66; margin-bottom: .375rem; }
.dark .pf-apoio b { color: #d7c8f0; }
.pf-apoio b svg { width: 1.05rem; height: 1.05rem; }
.pf-apoio ul { margin: .5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .375rem; }
.pf-apoio li { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.4; }
.pf-apoio li::before { content: ; flex: 0 0 auto; width: .875rem; height: .875rem; margin-top: .1rem;
    background: currentColor; opacity: .75;
    -webkit-mask: no-repeat center/contain url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%23000 stroke-width=3 stroke-linecap=round stroke-linejoin=round%3E%3Cpath d=M20 6 9 17l-5-5/%3E%3C/svg%3E);
    mask: no-repeat center/contain url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 24 24 fill=none stroke=%23000 stroke-width=3 stroke-linecap=round stroke-linejoin=round%3E%3Cpath d=M20 6 9 17l-5-5/%3E%3C/svg%3E); }

@media (max-width: 1023px) {
    .pf-grade { grid-template-columns: 1fr; }
    .pf-grade > .filament-breezy-grid-section, .pf-cartao { grid-column: 1; }
    .pf-cartao { grid-row: auto; position: static; }
    .pf-com-apoio { grid-template-columns: 1fr; }
}

/* 27. Prévias de telas (setembro/2026): o item de menu das telas em aprovação sai em
   vermelho, com o selo "prévia". Casa pelo prefixo da rota, então página nova de
   prévia já nasce marcada; quando a tela real entra, a prévia sai e a regra fica. */
.fi-sidebar-item-button[href*="/admin/previa/"] .fi-sidebar-item-label,
.fi-sidebar-item-button[href*="/admin/previa/"] .fi-sidebar-item-icon { color: #dc2626 !important; }
.dark .fi-sidebar-item-button[href*="/admin/previa/"] .fi-sidebar-item-label,
.dark .fi-sidebar-item-button[href*="/admin/previa/"] .fi-sidebar-item-icon { color: #f87171 !important; }

/* 28. Montador da proposta: controles da FOTO dentro do quadro (Dan, 18/09/2026 —
   "quero poder aumentar ou diminuir a altura das imagens e mexer na posição, zoom").
   A pilha de zoom (.foto-zoom) e a alça de altura (.foto-alca) aparecem só com o
   mouse sobre a foto: controle fixo em cada célula de uma grade de seis polui a
   folha que se está montando. Vive aqui porque atributo style não tem :hover e
   classe arbitrária do Tailwind não existe no CSS compilado do Filament. */
.foto-zoom, .foto-alca { opacity: 0; transition: opacity .12s; }
*:hover > .foto-zoom, *:hover > .foto-alca,
.foto-zoom:hover, .foto-alca:hover { opacity: 1; }
.foto-zoom button { border: 0; background: transparent; cursor: pointer; font-size: 11px; line-height: 1; padding: 1px 4px; color: #3D1E66; }

/* ==========================================================================
   29. NOVO ORÇAMENTO (TESTES) — laranja (Dan, 19/09/2026)
   O grupo é o módulo novo em homologação com o cliente. Laranja para não se
   confundir nem com o menu de produção nem com o vermelho das prévias. Casa
   pelo endereço da aba, então item novo do grupo nasce marcado.
   ========================================================================== */
.fi-sidebar-item-button[href*="activeTab=laboratorio"] .fi-sidebar-item-label,
.fi-sidebar-item-button[href*="activeTab=laboratorio"] .fi-sidebar-item-icon,
.fi-sidebar-item-button[href*="activeTab=modelos"] .fi-sidebar-item-label,
.fi-sidebar-item-button[href*="activeTab=modelos"] .fi-sidebar-item-icon { color: #ea580c !important; }
.dark .fi-sidebar-item-button[href*="activeTab=laboratorio"] .fi-sidebar-item-label,
.dark .fi-sidebar-item-button[href*="activeTab=laboratorio"] .fi-sidebar-item-icon,
.dark .fi-sidebar-item-button[href*="activeTab=modelos"] .fi-sidebar-item-label,
.dark .fi-sidebar-item-button[href*="activeTab=modelos"] .fi-sidebar-item-icon { color: #fb923c !important; }

/* ==========================================================================
   30. FORMULÁRIO POR ASSUNTO (Dan, 19/09/2026)
   "Não gosto dos formulários deste sistema, bagunçado, não dá pra saber os
   assuntos." Os campos passaram a viver em seções numeradas com ícone, e o
   resumo do documento acompanha a rolagem à direita. Aqui vai só o arranjo:
   classe utilitária do Tailwind arbitrária não existe no CSS do Filament.
   ========================================================================== */
.mf-resumo { position: sticky; top: 5rem; }

.mf-resumo-corpo { display: grid; gap: 0.7rem; }

.mf-resumo-linha { display: grid; gap: 0.1rem; }

.mf-resumo-rotulo {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgb(107 114 128);
}
.dark .mf-resumo-rotulo { color: rgb(156 163 175); }

.mf-resumo-valor {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(17 24 39);
    overflow-wrap: anywhere;
}
.dark .mf-resumo-valor { color: rgb(243 244 246); }

.mf-resumo-situacao {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgb(229 231 235);
}
.dark .mf-resumo-situacao { border-top-color: rgb(255 255 255 / 0.1); }

.mf-resumo-tag {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgb(243 244 246);
    color: rgb(55 65 81);
}
.mf-resumo-tag-rascunho { background: #f3f4f6; color: #374151; }
.mf-resumo-tag-enviado { background: #ede9fe; color: #5b21b6; }
.mf-resumo-tag-aprovado { background: #dcfce7; color: #166534; }
.mf-resumo-tag-recusado { background: #fee2e2; color: #991b1b; }
.mf-resumo-tag-expirado { background: #fef3c7; color: #92400e; }
.mf-resumo-tag-em_revisao { background: #dbeafe; color: #1e40af; }
.mf-resumo-tag-substituida { background: #f3f4f6; color: #6b7280; }
.mf-resumo-tag-stand_by { background: #fef3c7; color: #92400e; }

.mf-resumo-nota {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: rgb(107 114 128);
}
.dark .mf-resumo-nota { color: rgb(156 163 175); }

.mf-resumo-prazo {
    display: grid;
    gap: 0.1rem;
    border-radius: 0.5rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 0.55rem 0.7rem;
    font-size: 0.8125rem;
    color: #065f46;
}
.dark .mf-resumo-prazo { background: rgb(6 78 59 / 0.35); border-color: rgb(16 185 129 / 0.35); color: #6ee7b7; }
.mf-resumo-prazo span { font-size: 0.6875rem; opacity: 0.85; }

/* Seção numerada: o número e o ícone mandam na leitura, a descrição explica. */
.fi-fo-section .fi-section-header-heading { font-weight: 600; }