/* css/padrao-elabore.css - padrao visual Elabore para tabelas e telas de lancamento.
Carrega depois de components.css/casca.css e antes de print.css/mobile.css: o celular e a impressao continuam mandando.
So usa tokens de base.css (sem cor solta), para a migracao futura ao tema escuro. */
/* ---------- tabelas: table.t e data-table com a mesma cara ---------- */
.tscroll{border-left:0;border-right:0;border-top:1px solid var(--azul-090);border-bottom:1px solid var(--azul-090);border-radius:0;background:var(--panel)}
.tscroll{overflow-x:auto}
table.t{font-size:12px;font-variant-numeric:tabular-nums;width:100%;border-collapse:collapse}
table.t th{background:var(--azul-070)!important;color:var(--azul-650)!important;text-align:left;padding:8px 10px;font-size:11px;font-weight:700;
text-transform:none;letter-spacing:0;border-bottom:1px solid var(--azul-160);border-right:1px solid var(--azul-120)}
table.t th:last-child{border-right:0}
table.t td{padding:8px 10px;border-bottom:1px solid var(--azul-050);background:var(--panel);font-size:12px;color:var(--ink)}
table.t tr:nth-child(even) td{background:var(--panel)}
table.t tbody tr:hover td{background:var(--mint-soft)}
table.t tbody tr:last-child td{border-bottom:0}
table.t tr.tot td{background:var(--azul-040)!important;border-top:1px solid var(--azul-160);font-weight:700}
/* barra acima da tabela: contagem e exportar */
.table-heading{justify-content:space-between;margin-bottom:10px}
/* rodape: total de resultados, paginacao e "por pagina" */
.table-pagination{margin-top:0;padding:12px 6px 4px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink)}
.pagination-info strong{color:var(--ink)}
.pagination-size-wrap{flex-direction:row-reverse}
.pagination-btn{border-radius:var(--rad-s);border-color:var(--line)}
/* menu de acoes da linha (js/ui/lr-menu-acoes.js) */
.lr-acoes{display:inline-block}
.lr-mais{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.lr-mais:hover,.lr-mais[aria-expanded="true"]{background:var(--mint-soft);color:var(--brand-2)}
.lr-mais svg{width:18px;height:18px;fill:currentColor;display:block}
.lr-menu{position:fixed;z-index:80;min-width:150px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad-s);box-shadow:var(--shadow)}
.lr-menu[hidden]{display:none}
.lr-menu-item{display:block;width:100%;text-align:left;padding:8px 12px;border:0;border-radius:6px;background:transparent;font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.lr-menu-item:hover{background:var(--mint-soft);color:var(--brand-2)}
.lr-menu-item.perigo{color:var(--err)}
.lr-menu-item.perigo:hover{background:var(--errbg);color:var(--err)}
/* ---------- botoes: caixa alta, como o Elabore ---------- */
.btn{text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.8px;padding:10px 18px}
.btn.big{font-size:12.5px;padding:11px 22px}
.btn.ghost{background:var(--panel);color:var(--brand);border:1.5px solid var(--brand)}
.btn:hover{transform:none}
/* ---------- telas de lancamento: secao, campo e rodape de acoes ---------- */
.card{border-color:var(--line-soft)}
.card > h3{font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);
padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.card > h3 .h3n{font-size:12px;font-weight:400;color:var(--muted)}
.card.sub{background:var(--panel)!important;border:1px solid var(--line-soft)!important}
.card.sub > h3{font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink)!important;border-bottom:1px solid var(--line-soft);padding-bottom:8px}
/* campo: rotulo em cima, caixa branca de borda fina */
.pfield{background:transparent;border:0;padding:0}
.pfield .pl{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:6px}
.pfield .pl .edit{background:var(--mint-soft);color:var(--brand-2);font-size:9px;font-weight:700;border-radius:4px}
.pfield .pl .opt{border-radius:4px}
.pfield input{height:var(--campo-h);border:1px solid var(--campo-borda);border-radius:var(--rad-s);padding:0 12px;font-size:13px;font-weight:500;color:var(--ink)}
.pfield select{height:var(--campo-h);border:1px solid var(--campo-borda);border-radius:8px;padding:0 32px 0 12px;font-size:13px;font-weight:500;color:var(--ink);
background-color:var(--panel);background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;appearance:none;transition:border-color .15s ease,box-shadow .15s ease}
.pfield input::placeholder{color:var(--muted);font-weight:400}
.pfield input:focus{outline:0;border-color:var(--brand-2);box-shadow:0 0 0 2px var(--mint-soft)}
.pfield select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 2px var(--petroleo-850-a14)}
.pfield input[type=date]{padding:0 10px}
.pfield input:disabled,.pfield select:disabled{background:var(--panel2);color:var(--muted)}
.pfield.calc{background:var(--panel2);border:1px solid var(--line-soft);padding:9px 12px}
.pfield.calc .pl{color:var(--muted)}
.pfield .pb{color:var(--muted)}
.chk{border:1px solid var(--campo-borda);border-radius:var(--rad-s);background:var(--panel)}
.switch{color:var(--ink);font-weight:600}
.switch input[type=checkbox],.chk input{accent-color:var(--brand-2)}
.atvlista{border:1px solid var(--campo-borda);background:var(--panel)}
.novoel,.trava,.edbar{background:var(--warnbg);border:1px solid var(--warnline)}
.edbar b{color:var(--warn)}
.total-strip{background:var(--mint-soft);border:1px solid var(--line-soft)}
.act-row{justify-content:flex-end;padding-top:14px;border-top:1px solid var(--line-soft)}
.pgrid > .pfield:not(.calc),.pgrid > .pfield:has(.pl .opt),.pgrid > .pfield.calc{border-left:0}
.pgrid > .pfield:not(.calc),.card.sub .pfield:not(.calc){padding:0}
.pgrid > .pfield.calc{border:1px solid var(--line-soft)}
/* ---------- Painel de Resultados (.pn-bloco / .pn-tab) no padrao Elabore ---------- */
.pn-bloco{border-color:var(--line-soft)}
.pn-bloco .pn-bt{background:var(--panel);color:var(--ink);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;
padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.pn-bloco .pn-tab thead th{background:var(--tab-cab-bg);color:var(--tab-cab-ink);font-size:11.5px;font-weight:700;letter-spacing:0;
text-transform:none;white-space:normal;overflow-wrap:break-word;line-height:1.25;vertical-align:middle;padding:9px 4px;hyphens:none;
border-bottom:1px solid var(--line);border-left:1px solid var(--line-soft)}
.pn-bloco .pn-tab thead th:first-child{border-left:0;padding-left:14px}
.pn-bloco .pn-tab thead th.num{text-align:center;border-left-color:var(--line-soft)}
.pn-bloco .pn-tab td{border-bottom:1px solid var(--line-soft)}
.pn-bloco .pn-tab td:first-child{padding-left:14px}
.pn-bloco .pn-tab tbody tr:last-child td{border-bottom:0}
.pn-bloco .pn-tab tbody tr:nth-child(even){background:transparent}
.pn-bloco .pn-tab tbody tr:hover{background:var(--mint-soft)}
.pn-bloco .pn-tab td.num{border-left-color:var(--line-soft)}
.pn-bloco .pn-tab .pn-rot{font-weight:600}
.pn-bloco .pn-tab .pn-v{font-size:13.5px;color:var(--ink)}
/* campos opcionais: mesmo visual dos demais (sem fundo/rotulo dourado) */
.pfield:has(.pl .opt){background:transparent;border:0}
.pfield:has(.pl .opt) .pl{color:var(--ink)}
.ulin select,.atvlin input[type=number]{color:var(--ink)}
.pfield select{font-size:13px;font-weight:500}
/* a regra antiga (16px) tem mais peso por causa do [type=]; no celular continua 16px para o iOS nao dar zoom */
@media(min-width:641px){
.pfield input[type=text],.pfield input[type=date],.pfield input[type=number],.pfield input[type=email],.pfield select{font-size:13px;font-weight:500}
}
/* ==========================================================================
PADRAO ELABORE - LISTAGENS DE CADASTRO (.lista-elabore)
Reproduz fielmente o visual da tela Empresários(as) do Elabore:
- Titulo direto, sem subtitulo ou knum
- Sem card ao redor da tabela
- Barra de acoes: Exportar com seta a esquerda; Busca com lupa + Botao de cadastrar a direita
- Cabecalho cinza (#e9ebee/#f1f3f5) com divisoria sutil e icones de ordenacao
- Area vazia alta e centralizada em negrito escuro
- Paginacao presa no rodape inferior (total a esquerda, paginador no meio, por pagina a direita)
/* Titulos de todas as secoes no padrao oficial Elabore (sem sublinhado verde pesado, sem knum) */
.block-head {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
border-bottom: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 18px !important;
}
.block-head .knum {
display: none !important;
}
.block-head h2 {
font-family: var(--font-d) !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--brand-deep) !important;
letter-spacing: -0.2px !important;
}
.block-head .bh-note {
display: none !important;
}
section.lista-elabore.on {
display: flex !important;
flex-direction: column;
/* ocupa a tela até o rodapé sem passar dela: desconta a margem de cima (6px) e o respiro de baixo do .wrap
(--wrap-pb), senão a página ganha barra de rolagem mesmo com a lista vazia */
min-height: calc(100vh / var(--zoom-app) - var(--hd-h) - var(--ft-h) - 6px - var(--wrap-pb, 40px));
margin-top: 6px;
}
.table-heading {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
/* celular: Exportar + Buscar numa linha, botão de cadastrar na linha de baixo, largura toda (nunca fora da tela) */
@media (max-width: 860px) {
.table-heading .esp { display: none; }
.table-heading .table-search-wrap { flex: 1 1 140px; }
.table-heading .table-search-input { width: 100%; }
.table-heading .btn-elabore-novo { flex: 1 1 100%; height: 40px; }
}
.lr-export-wrap {
position: relative;
display: inline-flex;
}
.btn-table-export {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--panel, var(--panel));
border: 1px solid var(--line, var(--azul-160b));
border-radius: 4px;
padding: 5px 12px;
color: var(--ink, var(--azul-830));
font-family: var(--font-b, "Open Sans", sans-serif);
font-size: 12.5px;
font-weight: 600;
box-shadow: 0 1px 2px var(--sombra-a03);
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
user-select: none;
}
.btn-table-export:hover,
.btn-table-export[aria-expanded="true"] {
background: var(--panel2, var(--azul-020));
border-color: var(--azul-350);
color: var(--azul-890);
}
.btn-table-export svg:not(.ic-exp-arrow):not(.ic-seta-exp) {
width: 14px;
height: 14px;
stroke-width: 2;
color: currentColor;
}
.btn-table-export svg.ic-exp-arrow {
width: 11px;
height: 11px;
stroke-width: 2.2;
color: var(--azul-530);
margin-left: 2px;
transition: transform .15s ease;
}
.btn-table-export[aria-expanded="true"] svg.ic-exp-arrow {
transform: rotate(180deg);
}
.ic-seta-exp {
width: 8px;
height: 5px;
fill: currentColor;
margin-left: 2px;
}
/* Menu Dropdown Principal de Exportação */
.lr-export-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 1050;
min-width: 165px;
background: var(--panel);
border: 1px solid var(--azul-090);
border-radius: 6px;
box-shadow: 0 4px 16px -2px var(--sombra-a12), 0 2px 4px -2px var(--sombra-a06);
padding: 4px;
display: flex;
flex-direction: column;
gap: 1px;
animation: lrExportFadeIn .12s ease-out;
}
.lr-export-menu[hidden] {
display: none !important;
}
@keyframes lrExportFadeIn {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
/* Itens de Exportação */
.lr-export-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--tab-cab-ink);
font-family: var(--font-b, "Open Sans", sans-serif);
font-size: 12.5px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background .12s ease, color .12s ease;
user-select: none;
white-space: nowrap;
box-sizing: border-box;
}
.lr-export-item:hover,
.lr-export-item:focus-visible,
.lr-export-sub-wrap:hover > .lr-export-item,
.lr-export-item[aria-expanded="true"] {
background: var(--azul-040);
color: var(--azul-890);
outline: none;
}
.lr-export-item svg.ic-exp-dl,
.lr-export-item svg.ic-exp-pdf {
width: 15px;
height: 15px;
flex-shrink: 0;
color: var(--azul-650b);
}
.lr-export-item:hover svg.ic-exp-dl,
.lr-export-item:hover svg.ic-exp-pdf,
.lr-export-sub-wrap:hover > .lr-export-item svg.ic-exp-pdf {
color: var(--azul-890);
}
.lr-export-item svg.ic-exp-chevron {
width: 11px;
height: 11px;
margin-left: auto;
stroke-width: 2.2;
color: var(--azul-350);
flex-shrink: 0;
}
.lr-export-item:hover svg.ic-exp-chevron,
.lr-export-sub-wrap:hover > .lr-export-item svg.ic-exp-chevron {
color: var(--azul-650b);
}
/* Wrapper do Submenu */
.lr-export-sub-wrap {
position: relative;
width: 100%;
}
/* Submenu de PDF (Resumido / Expandido) */
.lr-export-submenu {
position: absolute;
top: 0;
left: calc(100% + 4px);
z-index: 1060;
min-width: 150px;
background: var(--panel);
border: 1px solid var(--azul-090);
border-radius: 6px;
box-shadow: 0 4px 16px -2px var(--sombra-a12), 0 2px 4px -2px var(--sombra-a06);
padding: 4px;
display: flex;
flex-direction: column;
gap: 1px;
animation: lrExportFadeIn .12s ease-out;
}
.lr-export-submenu[hidden] {
display: none !important;
}
@media (hover: hover) and (pointer: fine) {
.lr-export-sub-wrap:hover > .lr-export-submenu {
display: flex !important;
}
}
.table-search-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.table-search-input {
width: 190px;
height: 31px;
padding: 0 30px 0 10px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 4px;
font-family: var(--font-b);
font-size: 12px;
color: var(--ink);
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.table-search-input::placeholder {
color: var(--azul-310);
font-size: 11.5px;
}
.table-search-input:focus {
border-color: var(--brand-2);
box-shadow: 0 0 0 2px var(--mint-soft);
}
.table-search-icon {
position: absolute;
right: 9px;
width: 13px;
height: 13px;
color: var(--azul-310);
pointer-events: none;
}
.btn-elabore-novo {
background: var(--brand-deep-fundo);
color: var(--on-brand);
border: 0;
border-radius: 4px;
height: 31px;
padding: 0 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
cursor: pointer;
box-shadow: none;
}
.btn-elabore-novo:hover {
background: var(--brand-2-fundo);
}
/* ==========================================================================
TABELAS E PAGINAÇÃO NO PADRÃO ELABORE (data-table e lista-elabore)
========================================================================== */
.table-scroll {
border-left: 0;
border-right: 0;
border-top: 1px solid var(--azul-090);
border-bottom: 1px solid var(--azul-090);
border-radius: 0;
background: var(--panel);
max-height: none;
overflow-x: auto;
}
table.data-table {
width: 100%;
border-collapse: collapse;
}
#tInv {
min-width: 1040px;
}
table.data-table th {
text-align: left;
background: var(--panel2) !important;
color: var(--azul-650) !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 8px 10px !important;
border-bottom: 1px solid var(--azul-160) !important;
border-right: 0 !important;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
}
table.data-table th.col-left {
text-align: left !important;
}
table.data-table th.col-right {
text-align: right !important;
}
table.data-table th.col-center {
text-align: center !important;
}
table.data-table th:last-child {
border-right: 0 !important;
}
table.data-table th .th-content {
display: inline-flex;
align-items: center;
gap: 5px;
}
table.data-table th.col-left .th-content {
justify-content: flex-start;
width: 100%;
}
table.data-table th.col-right .th-content {
justify-content: flex-end;
width: 100%;
}
table.data-table th.col-center .th-content {
justify-content: center;
width: 100%;
}
table.data-table th.sortable .th-sort-icon {
display: inline-block;
width: 11px;
height: 11px;
opacity: 0.35;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,");
}
table.data-table th.sort-asc .th-sort-icon {
opacity: 1;
background-image: url("data:image/svg+xml;utf8,");
}
table.data-table th.sort-desc .th-sort-icon {
opacity: 1;
background-image: url("data:image/svg+xml;utf8,");
}
table.data-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--azul-050);
font-size: 12px;
color: var(--ink);
}
table.data-table td.col-right {
text-align: right;
}
table.data-table td.empty-cell {
padding: 105px 20px !important;
font-weight: 700;
font-size: 13.5px;
color: var(--azul-830) !important;
text-align: center;
background: var(--panel);
}
.table-pagination {
margin-top: auto;
padding: 14px 6px 12px;
border-top: 1px solid var(--azul-090);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--azul-650);
width: 100%;
box-sizing: border-box;
}
.pagination-info {
font-size: 12px;
color: var(--azul-650);
flex: 1 1 0%;
}
.pagination-info strong {
color: var(--azul-770);
font-weight: 700;
}
.pagination-nav-elabore {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.pagination-nav-elabore .pagination-btn {
width: 24px;
height: 24px;
border: 1px solid var(--azul-090);
border-radius: 50%;
background: var(--panel);
color: var(--azul-480);
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: all .15s ease;
}
.pagination-nav-elabore .pagination-btn:hover:not(:disabled) {
background: var(--azul-050);
color: var(--ink);
border-color: var(--azul-160);
}
.pagination-nav-elabore .pagination-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
border-color: var(--azul-050);
}
.pagination-page-label {
margin-left: 6px;
font-size: 12px;
color: var(--azul-650);
}
.pagination-page-input {
width: 32px;
height: 24px;
border: 1px solid var(--azul-090);
border-radius: 4px;
background: var(--panel);
text-align: center;
font-size: 12px;
color: var(--azul-770);
padding: 0 2px;
outline: none;
-moz-appearance: textfield;
}
.pagination-page-input::-webkit-outer-spin-button,
.pagination-page-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pagination-page-total {
margin-right: 6px;
font-size: 12px;
color: var(--azul-650);
}
.pagination-controls {
flex: 1 1 0%;
display: flex;
justify-content: flex-end;
}
.pagination-size-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pagination-size-wrap label {
font-size: 12px;
color: var(--azul-650);
font-weight: 500;
}
.pagination-size-select {
height: 25px;
border: 1px solid var(--azul-090);
border-radius: 4px;
padding: 0 18px 0 8px;
background-color: var(--panel);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 8px 5px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 12px;
color: var(--azul-770);
cursor: pointer;
outline: none;
}
.pagination-size-select:focus {
border-color: var(--brand-2);
}
/* ==========================================================================
DASHBOARD TELA INÍCIO (PADRÃO ELABORE - IMAGEM 1)
========================================================================== */
.inicio-hdr { margin-bottom: 18px; }
.inicio-boas-vindas { font-family: var(--font-d); font-size: 19.5px; font-weight: 750; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.3px; }
.inicio-boas-vindas .inicio-bv-nome { color: var(--brand-deep); font-weight: 750; }
.inicio-sub { font-family: var(--font-b); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2px; }
.inicio-secao-tit { font-family: var(--font-b); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--brand-deep); margin-bottom: 10px; }
.inicio-avisos-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.inicio-aviso-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 10px; background: var(--vermelho-020); border: 1px solid var(--vermelho-080b); color: var(--vermelho-610b); }
.inicio-aviso-card.warn { background: var(--laranja-030); border-color: var(--laranja-110); color: var(--vermelho-700); }
.inicio-aviso-card .ic { font-size: 22px; flex: 0 0 auto; color: var(--laranja-500); }
.inicio-aviso-card .av-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.inicio-aviso-card .av-txt b { font-weight: 700; color: var(--azul-770); }
.inicio-aviso-card .btn-link { font-family: var(--font-b); font-size: 12px; font-weight: 700; color: var(--brand-2); background: none; border: 0; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 0; }
.inicio-aviso-card .btn-link:hover { text-decoration: underline; }
/* KPIs da inicio no mesmo padrao do metric-card: verde var(--petroleo-750), circulo var(--petroleo-710), sem efeito ao passar o mouse */
.inicio-kpis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.in-kpi-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
position: relative; overflow: hidden; box-sizing: border-box; min-height: 98px;
background: var(--petroleo-750); border: 1px solid var(--petroleo-750); border-radius: 18px; padding: 14px 16px;
box-shadow: var(--petroleo-680-a22) 0px 12px 26px; color: var(--on-brand);
cursor: default; transform: none !important; transition: none !important;
-webkit-font-smoothing: antialiased; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.in-kpi-card:hover {
transform: none !important;
box-shadow: var(--petroleo-680-a22) 0px 12px 26px !important;
}
.in-kpi-card::after {
content: ""; position: absolute; z-index: 0; right: -25px; top: 50%; transform: translateY(-50%);
width: 88px; height: 88px; border-radius: 50%; background: var(--petroleo-710); pointer-events: none;
}
.in-kpi-icon-wrap {
position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 10px;
background: var(--brilho-a16); display: flex; align-items: center; justify-content: center;
color: var(--on-brand); margin-bottom: 2px;
}
.in-kpi-icon { font-size: 18px; color: var(--on-brand); display: block; }
.in-kpi-label { position: relative; z-index: 1; font-family:var(--font-b); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-brand); line-height: 1.25; }
.in-kpi-val { position: relative; z-index: 1; font-family: var(--font-d); font-size: 22px; font-weight: 750; color: var(--on-brand); line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; }
.in-kpi-sub { position: relative; z-index: 1; font-family:var(--font-b); font-size: 11px; font-weight: 500; color: var(--on-brand); opacity: .9; line-height: 1.2; }
.in-kpi-desc { position: relative; z-index: 1; width: 100%; border-top: 1px solid var(--brilho-a18); padding-top: 8px; margin-top: 4px; font-family:var(--font-b); font-size: 11px; font-weight: 600; color: var(--on-brand); line-height: 1.35; }
/* Painéis de atalhos rápidos */
.inicio-paineis-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 6px; }
.in-painel-card { margin: 0; }
.in-atalhos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.in-btn-atalho { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--azul-020); border: 1px solid var(--azul-090); border-radius: 8px; font-family: var(--font-b); font-size: 12.5px; font-weight: 650; color: var(--ink); cursor: pointer; text-align: left; transition: all 0.12s ease; }
.in-btn-atalho:hover { background: var(--mint-soft); border-color: var(--mint); color: var(--brand-2); }
.in-btn-atalho .material-symbols-rounded { font-size: 20px; color: var(--brand-2); }
/* ==========================================================================
PADRÃO ELABORE - TELAS DE LANÇAMENTOS (RECEITAS / CUSTOS / COLHEITA / TALHÕES / INVENTÁRIO)
- Barra superior com KPIs resumidos da safra em verde petróleo arredondado
- Barra de ações compacta: Exportar (esquerda), Filtros Ano/Mês/Busca e botão "+ NOVO ..." (direita)
- Formulário em gaveta/card destacada acionado pelo botão cadastrar
========================================================================== */
.lancamentos-kpis-bar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 100%;
margin-bottom: 18px;
box-sizing: border-box;
}
.lancamentos-kpis-bar.kpis-3 {
grid-template-columns: repeat(3, 1fr);
}
.lanc-kpi-card {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: none;
background: var(--petroleo-750);
border: 1px solid var(--petroleo-750);
border-radius: 18px;
padding: 14px 18px;
color: var(--on-brand);
position: relative;
overflow: hidden;
box-shadow: 0 12px 26px var(--petroleo-680-a22);
box-sizing: border-box;
min-height: 64px;
}
.lanc-kpi-card::after {
content: "";
position: absolute;
right: -22px;
top: 50%;
transform: translateY(-50%);
width: 90px;
height: 90px;
border-radius: 50%;
background: var(--petroleo-710);
pointer-events: none;
z-index: 1;
}
.lanc-kpi-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--brilho-a14);
border: 1px solid var(--brilho-a22);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 2;
color: var(--on-brand);
}
.lanc-kpi-icon svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
}
.lanc-kpi-body {
display: flex;
flex-direction: column;
gap: 2px;
position: relative;
z-index: 2;
min-width: 0;
}
.lanc-kpi-label {
font-family:var(--font-b);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--brilho-a88);
white-space: normal;
line-height: 1.25;
margin-bottom: 2px;
}
.lanc-kpi-val {
font-family: var(--font-d);
font-size: 18px;
font-weight: 600;
color: var(--on-brand);
letter-spacing: -0.01em;
line-height: 1.15;
white-space: nowrap;
}
@media (max-width: 860px) {
.lancamentos-kpis-bar {
gap: 10px;
margin-bottom: 14px;
}
.lanc-kpi-card {
padding: 10px 12px;
gap: 10px;
border-radius: var(--esp-3);
}
.lanc-kpi-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 8px;
}
.lanc-kpi-icon svg {
width: 18px;
height: 18px;
}
.lanc-kpi-label {
font-size: 10px;
letter-spacing: 0.02em;
}
.lanc-kpi-val {
font-size: 16px;
}
.lancamentos-kpis-bar.kpis-3 {
grid-template-columns: repeat(2, 1fr);
}
.lancamentos-kpis-bar.kpis-3 .lanc-kpi-card:last-child:nth-child(odd) {
grid-column: span 2;
}
}
@media (max-width: 420px) {
.lancamentos-kpis-bar {
gap: 8px;
}
.lanc-kpi-card {
padding: 8px 10px;
gap: 8px;
}
.lanc-kpi-icon {
width: 28px;
height: 28px;
flex: 0 0 28px;
}
.lanc-kpi-icon svg {
width: 16px;
height: 16px;
}
.lanc-kpi-label {
font-size: 9.5px;
line-height: 1.2;
}
.lanc-kpi-val {
font-size: 15px;
}
}
/* ==========================================================================
CARDS DE KPI DE CONSISTÊNCIA / SITUAÇÃO DA SAFRA (VERDE, AMARELO, VERMELHO)
========================================================================== */
.cs-kpis-grid, #csResumo {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
width: 100%;
margin-bottom: 18px;
box-sizing: border-box;
}
@media (max-width: 1100px) {
.cs-kpis-grid, #csResumo {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
@media (max-width: 580px) {
.cs-kpis-grid, #csResumo {
grid-template-columns: 1fr;
gap: 10px;
}
}
.cs-kpi-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: 20px;
border: 1px solid transparent;
box-shadow: 0 1px 3px var(--sombra-a04);
min-height: 76px;
box-sizing: border-box;
transition: transform 0.15s ease, box-shadow 0.15s ease;
position: relative;
overflow: hidden;
}
.cs-kpi-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--sombra-a07);
}
/* 1. Variante Vermelha (Inconsistência Grave / Divergências) */
.cs-kpi-card--danger {
background: var(--vermelho-020);
border-color: var(--vermelho-110);
border-top: 4px solid var(--vermelho-490);
}
.cs-kpi-card--danger .cs-kpi-icon-wrap {
background: var(--vermelho-060);
color: var(--vermelho-650);
}
.cs-kpi-card--danger .cs-kpi-label {
color: var(--vermelho-690);
}
.cs-kpi-card--danger .cs-kpi-val {
color: var(--vermelho-690);
}
.cs-kpi-card--danger .cs-kpi-sub {
color: var(--vermelho-650);
}
.cs-kpi-card--danger .cs-kpi-info {
color: var(--vermelho-650);
}
/* 2. Variante Amarela (Atenção / Revisão Recomendada / Observação) */
.cs-kpi-card--warning {
background: var(--ambar-030);
border-color: var(--ambar-230);
border-top: 4px solid var(--laranja-560);
}
.cs-kpi-card--warning .cs-kpi-icon-wrap {
background: var(--ambar-110b);
color: var(--laranja-710b);
}
.cs-kpi-card--warning .cs-kpi-label {
color: var(--laranja-740);
}
.cs-kpi-card--warning .cs-kpi-val {
color: var(--laranja-740b);
}
.cs-kpi-card--warning .cs-kpi-sub {
color: var(--laranja-710b);
}
.cs-kpi-card--warning .cs-kpi-info {
color: var(--laranja-710b);
}
/* 3. Variante Verde (Regular / Sem Divergências / Validado) */
.cs-kpi-card--success {
background: var(--verde-030);
border-color: var(--verde-150);
border-top: 4px solid var(--verde-640);
}
.cs-kpi-card--success .cs-kpi-icon-wrap {
background: var(--verde-070);
color: var(--verde-760);
}
.cs-kpi-card--success .cs-kpi-label {
color: var(--verde-800);
}
.cs-kpi-card--success .cs-kpi-val {
color: var(--verde-800);
}
.cs-kpi-card--success .cs-kpi-sub {
color: var(--verde-760);
}
.cs-kpi-card--success .cs-kpi-info {
color: var(--verde-760);
}
/* Ícone na caixa arredondada à esquerda */
.cs-kpi-icon-wrap {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cs-kpi-icon-wrap svg {
width: 22px;
height: 22px;
display: block;
}
/* Corpo de textos à direita */
.cs-kpi-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.cs-kpi-label-row {
display: flex;
align-items: center;
gap: 6px;
}
.cs-kpi-label {
font-family:var(--font-b);
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-kpi-info {
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.8;
cursor: help;
transition: opacity 0.15s ease;
line-height: 1;
}
.cs-kpi-info:hover {
opacity: 1;
}
.cs-kpi-info svg {
width: 14px;
height: 14px;
display: block;
}
.cs-kpi-val {
font-family: var(--font-d);
font-size: 26px;
font-weight: 750;
line-height: 1.15;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
margin: 1px 0;
}
.cs-kpi-sub {
font-family:var(--font-b);
font-size: 11.5px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Topo do card de apontamentos para alinhar título e ações */
.cs-topo-apontamentos {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.cs-topo-apontamentos h3 {
margin: 0;
}
.cs-topo-apontamentos .act-row {
margin: 0;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* ==========================================================================
TABELA COM LINHAS EXPANSÍVEIS (ACCORDION POR TALHÃO - IMAGEM 3)
========================================================================== */
.tr-grupo-mestre {
cursor: pointer;
transition: background-color 0.15s ease;
}
.tr-grupo-mestre:hover td {
background-color: var(--azul-020);
}
.tr-grupo-mestre.aberto td {
background-color: var(--petroleo-040);
border-bottom: 1px solid var(--verde-100);
}
.tr-grupo-mestre.aberto td:first-child {
box-shadow: inset 4px 0 0 var(--brand-deep);
}
.btn-add-grupo {
width: 26px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--brand-2);
border-radius: 6px;
background: var(--panel);
color: var(--brand-2);
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.btn-add-grupo:hover {
background: var(--brand-2-fundo);
color: var(--on-brand);
}
.btn-add-grupo .material-symbols-rounded {
font-size: 18px;
}
.btn-add-mais { font-size: 20px; font-weight: 700; line-height: 1; }
.td-grupo-titulo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--ink);
}
.chevron-exp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--azul-530);
transition: transform 0.2s ease, color 0.15s ease;
font-size: 15px;
font-weight: 700;
user-select: none;
}
.tr-grupo-mestre.aberto .chevron-exp-btn {
transform: rotate(90deg);
color: var(--brand-deep);
}
.badge-talhao-area {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--azul-650b);
background: var(--azul-050);
padding: 2px 8px;
border-radius: 12px;
margin-left: 6px;
}
.tr-detalhe-expansivel td {
padding: 0 !important;
background: var(--panel);
}
.tr-detalhe-expansivel[hidden] {
display: none;
}
.sub-tabela-wrap {
padding: 0;
background: var(--panel);
border-bottom: 10px solid var(--line-soft);
}
.sub-tabela-elabore {
width: 100%;
border-collapse: collapse;
background: var(--panel);
border: 0;
border-radius: 0;
overflow: hidden;
}
.sub-tabela-elabore th {
background: var(--azul-040);
color: var(--azul-650b);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 8px 12px;
border-bottom: 1px solid var(--azul-160b);
}
.sub-tabela-elabore td {
padding: 9px 12px;
font-size: 12.5px;
color: var(--azul-830);
border-bottom: 1px solid var(--azul-040);
}
.sub-tabela-elabore tr:last-child td {
border-bottom: none;
}
.sub-tabela-elabore tr:hover td {
background-color: var(--azul-020);
}
/* Barra inferior de total de resultados e paginação (Imagem 2) */
.tabela-rodape-elabore {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 4px 8px 4px;
margin-top: 14px;
width: 100%;
box-sizing: border-box;
}
.tabela-rodape-total {
font-size: 12.5px;
font-weight: 600;
color: var(--azul-650b);
}
.tabela-rodape-porpagina {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--azul-530);
}
.tabela-rodape-porpagina select {
height: 28px;
padding: 0 8px;
border: 1px solid var(--azul-160b);
border-radius: 4px;
font-size: 12px;
background: var(--panel);
color: var(--tab-cab-ink);
outline: none;
}
.lancamentos-filtro-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.lanc-filtro-esq {
display: flex;
align-items: center;
gap: 8px;
}
.lanc-filtro-dir {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.lanc-filtro-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lanc-filtro-rotulo {
font-family: var(--font-b);
font-size: 11.5px;
font-weight: 600;
color: var(--azul-650);
white-space: nowrap;
}
.lanc-select-compacto {
height: 31px;
border: 1px solid var(--line);
border-radius: 4px;
padding: 0 24px 0 8px;
background-color: var(--panel);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 8px 5px;
appearance: none;
-webkit-appearance: none;
font-size: 12px;
color: var(--ink);
cursor: pointer;
outline: none;
min-width: 95px;
}
.lanc-select-compacto:focus {
border-color: var(--brand-2);
}
@media (max-width: 860px) {
.lancamentos-filtro-bar {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
margin-bottom: 14px;
width: 100%;
}
.lanc-filtro-dir {
display: contents;
}
.lanc-filtro-dir .btn-elabore-novo {
order: 1;
width: 100%;
flex: 1 1 100%;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.8px;
}
.lanc-filtro-dir .table-search-wrap {
order: 2;
flex: 1 1 calc(100% - 130px);
min-width: 130px;
}
.lanc-filtro-dir .table-search-input {
width: 100%;
height: 38px;
box-sizing: border-box;
}
.lanc-filtro-esq {
order: 3;
flex: 0 0 auto;
display: flex;
align-items: center;
}
.btn-table-export {
height: 38px;
min-height: 38px;
padding: 0 12px;
white-space: nowrap;
}
.lanc-filtro-dir .lanc-filtro-item {
order: 4;
flex: 1 1 auto;
}
}
.lanc-card-cadastro {
background: var(--panel);
border: 1px solid var(--azul-160);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 4px 12px var(--sombra-a05);
animation: fadeInDown 0.2s ease;
}
.lanc-card-cadastro-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line-soft);
}
.lanc-card-cadastro-head h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
font-weight: 700;
color: var(--brand-deep);
}
.lanc-card-fechar {
background: none;
border: 0;
color: var(--muted);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.lanc-card-fechar:hover {
color: var(--ink);
background: var(--panel2);
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
PADRÃO ELABORE - ABAS DE ATIVIDADES E MODAL DE LANÇAMENTOS (DESPESAS)
Fiel à referência visual institucional Labor Rural
========================================================================== */
/* --------------------------------------------------------------------------
MODAL DE DESPESA (PADRÃO ELABORE)
-------------------------------------------------------------------------- */
.modal-despesa-wrap {
position: fixed;
inset: 0;
z-index: 9550;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.modal-despesa-wrap[hidden] {
display: none !important;
}
.modal-despesa-backdrop {
position: absolute;
inset: 0;
background: var(--petroleo-950-a50);
backdrop-filter: blur(2px);
animation: fadeInBackdrop .18s ease;
}
.modal-despesa-card {
position: relative;
width: 100%;
max-width: 820px;
max-height: calc(92vh / var(--zoom-app));
background: var(--panel);
border-radius: 14px;
box-shadow: 0 20px 60px var(--petroleo-920-a28);
display: flex;
flex-direction: column;
overflow: hidden;
animation: zoomInModal .2s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
/* Cabeçalho */
.md-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--line-soft);
background: var(--panel);
flex-shrink: 0;
}
.md-header-esq {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.md-ico-box {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--mint-soft);
color: var(--brand-2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.md-ico-box .material-symbols-rounded {
font-size: 24px;
}
.md-tit-wrap {
display: flex;
flex-direction: column;
min-width: 0;
}
.md-tit-wrap h3 {
margin: 0;
white-space: nowrap;
font-family: var(--font-d);
font-size: 16.5px;
font-weight: 700;
color: var(--ink);
line-height: 1.25;
}
.md-sub {
white-space: nowrap;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
line-height: 1.3;
}
.md-header-dir {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.btn-md-copiar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--azul-160);
background: var(--panel);
color: var(--azul-650);
font-family: var(--font-b);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s ease;
white-space: nowrap;
}
.btn-md-copiar:hover {
background: var(--azul-020);
border-color: var(--azul-350);
color: var(--ink);
}
.btn-md-copiar .material-symbols-rounded {
font-size: 16px;
color: var(--azul-480);
}
.md-mes-ref-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--okbg);
border: 1px solid var(--okline);
border-radius: 8px;
padding: 4px 14px;
cursor: pointer;
position: relative;
min-width: 124px;
transition: border-color .15s ease, background .15s ease;
}
.md-mes-ref-box:hover {
background: var(--verde-070);
border-color: var(--verde-150);
}
.md-mes-ref-label {
font-size: 9px;
font-weight: 800;
color: var(--verde-760);
text-transform: uppercase;
letter-spacing: 0.6px;
line-height: 1.1;
margin-bottom: 2px;
}
.md-mes-ref-sel {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 700;
color: var(--verde-760);
}
.md-mes-ref-sel .material-symbols-rounded {
font-size: 15px;
color: var(--verde-760);
}
.md-input-mes-oculto {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.md-ctrl-bts {
display: flex;
align-items: center;
gap: 2px;
margin-left: 4px;
}
.btn-md-ctrl {
width: 28px;
height: 28px;
border-radius: 6px;
border: 0;
background: transparent;
color: var(--azul-480);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
font-weight: 700;
transition: all .15s ease;
}
.btn-md-ctrl:hover {
background: var(--azul-050);
color: var(--ink);
}
/* Corpo do Modal - Formulário Direto */
.md-body {
padding: 16px 22px 20px;
overflow-y: auto;
flex: 1 1 auto;
max-height: calc(92vh / var(--zoom-app) - 140px);
}
.md-body .pgrid {
margin-top: 4px;
}
.md-body .card.sub {
border: 1px solid var(--azul-090);
border-radius: 8px;
padding: 12px 14px;
background: var(--azul-020);
}
.md-body .card.sub h3 {
font-size: 13px;
font-weight: 700;
color: var(--azul-830);
margin-bottom: 6px;
}
/* Rodapé */
.md-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 20px;
border-top: 1px solid var(--line-soft);
background: var(--panel);
flex-shrink: 0;
}
.md-footer-total {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 12.5px;
color: var(--azul-650);
}
.md-ft-lbl {
font-weight: 600;
}
.md-ft-val {
font-size: 16.5px;
font-weight: 750;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
.md-footer-bts {
display: flex;
align-items: center;
gap: 10px;
}
.md-footer-bts .btn.ghost {
border: 1.5px solid var(--brand);
color: var(--brand);
background: var(--panel);
border-radius: 999px;
padding: 8px 20px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.8px;
}
.md-footer-bts .btn:not(.ghost) {
border: 0;
background: var(--brand-fundo);
color: var(--panel);
border-radius: 999px;
padding: 9px 24px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.8px;
box-shadow: 0 2px 6px var(--petroleo-850-a18);
}
.md-footer-bts .btn:not(.ghost):hover {
background: var(--brand-deep-fundo);
}
@keyframes fadeInBackdrop {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zoomInModal {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Adaptação Mobile para o Modal */
@media (max-width: 640px) {
.modal-despesa-wrap {
padding: 8px;
align-items: flex-end;
}
.modal-despesa-card {
max-height: 94vh;
border-radius: 16px 16px 0 0;
}
.md-header {
padding: 12px 14px;
flex-wrap: wrap;
gap: 8px;
}
.md-header-dir {
width: 100%;
justify-content: space-between;
margin-top: 4px;
}
.md-drawer-grid {
grid-template-columns: 1fr 1fr;
}
.md-footer {
padding: 12px 14px;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.md-footer-total {
justify-content: space-between;
}
.md-footer-bts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.md-footer-bts .btn {
width: 100%;
text-align: center;
justify-content: center;
}
}
/* --------------------------------------------------------------------------
MODAL DE DESPESA: campos compactos, rotulos sem quebra de linha
-------------------------------------------------------------------------- */
.md-body { padding: 12px 18px 14px; }
.md-body .pgrid.c6 {
grid-template-columns: 1.35fr 1.7fr 1.7fr 1fr 1.1fr 1.4fr;
gap: 8px;
align-items: start;
}
.md-body .pgrid.c6 > .pf-w2 { grid-column: auto; }
.md-body .pgrid.c6 > .pfield { order: 0; padding: 6px 9px; }
.md-body .pgrid.c6 > .card.linha-toda { order: 1; grid-column: 1 / -1; }
.md-body .pfield .pl {
font-size: 10.5px;
letter-spacing: .5px;
margin-bottom: 4px;
min-height: 12px;
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
}
.md-body .pfield input,
.md-body .pfield select,
.md-body .pfield input[type=text],
.md-body .pfield input[type=date] {
font-size: 13px;
height: 30px;
padding: 0 8px;
}
.md-body .pfield select { padding-right: 26px; background-position: right 8px center; }
.md-body .pdica { font-size: 10.5px; margin-top: 2px; min-height: 0; }
.md-body .card.sub { padding: 8px 12px; }
.md-body .card.sub h3 { font-size: 12.5px; margin-bottom: 4px; }
@media (max-width: 640px) {
.md-body .pgrid.c6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-body .pgrid.c6 > .pf-w2 { grid-column: 1 / -1; }
}
/* Modal de despesa: escala geral reduzida (mesmo porte do Elabore) */
.modal-despesa-card { max-width: 880px; border-radius: 10px; }
.md-header { padding: 10px 16px; gap: 8px; }
.md-header-esq { gap: 10px; }
.md-ico-box { width: 32px; height: 32px; border-radius: 8px; }
.md-ico-box .material-symbols-rounded { font-size: 19px; }
.md-tit-wrap h3 { font-size: 13.5px; }
.md-sub { font-size: 11px; }
.md-header-dir { gap: 8px; }
.btn-md-copiar { padding: 4px 10px; font-size: 11px; gap: 5px; }
.btn-md-copiar .material-symbols-rounded { font-size: 14px; }
.md-mes-ref-box { min-width: 96px; padding: 3px 10px; }
.md-mes-ref-label { font-size: 8px; }
.md-mes-ref-sel { font-size: 12px; gap: 5px; }
.md-mes-ref-sel .material-symbols-rounded { font-size: 13px; }
.btn-md-ctrl { width: 24px; height: 24px; font-size: 12px; }
.md-body { max-height: calc(92vh / var(--zoom-app) - 110px); }
.md-body .card.sub { padding: 7px 10px; border-radius: 6px; }
.md-body .card.sub h3 { font-size: 11.5px; margin-bottom: 4px; padding-bottom: 4px; }
.md-body .switch { font-size: 11.5px; padding: 3px 9px 3px 7px; gap: 7px; margin-top: 2px; }
.md-body .switch input[type=checkbox] { width: 14px; height: 14px; }
.md-body .btn { font-size: 10.5px; padding: 4px 12px; letter-spacing: .5px; }
.md-body .act-row { gap: 6px; }
.md-body #btnObs { padding: 3px 10px; flex: 0 0 auto; width: auto; }
.md-body .pfield input[type=date] { padding: 0 4px; font-size: 12px; }
.md-body .grid.g-2 { gap: 8px; }
.md-body .pfield .pl, .md-body .card.sub .pl { font-size: 10.5px; }
.md-footer { padding: 8px 16px; gap: 10px; }
.md-footer-total { font-size: 11px; }
.md-ft-val { font-size: 13.5px; }
.md-footer-bts { gap: 8px; }
.md-footer-bts .btn.ghost { padding: 5px 14px; font-size: 10px; letter-spacing: .5px; }
.md-footer-bts .btn:not(.ghost) { padding: 6px 18px; font-size: 10px; letter-spacing: .5px; }
/* ==========================================================================
TELA DE PERFIL E ALTERAR PERFIL (PADRAO ELABORE)
========================================================================== */
.btn-voltar-perfil {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brand-3-fundo);
color: var(--on-brand);
font-family: var(--font-b);
font-size: 12px;
font-weight: 700;
padding: 6px 16px;
border: 0;
border-radius: var(--rad-s);
cursor: pointer;
margin-bottom: 20px;
transition: opacity .15s ease;
}
.btn-voltar-perfil:hover {
opacity: .9;
}
/* 1. Visualizacao de Perfil (#bPerfil) */
.pf-view-layout {
display: flex;
align-items: flex-start;
gap: 40px;
margin-top: 4px;
}
.pf-avatar-col {
flex: 0 0 auto;
}
.pf-avatar-circle {
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--mint-soft);
color: var(--brand-2);
display: flex;
align-items: center;
justify-content: center;
font-size: 42px;
font-weight: 700;
position: relative;
box-shadow: var(--shadow);
user-select: none;
}
.pf-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.pf-avatar-badge {
position: absolute;
right: 2px;
bottom: 4px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--panel);
border: 1px solid var(--line);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow);
transition: transform .15s ease, background-color .15s ease;
}
.pf-avatar-badge:hover {
background: var(--mint-soft);
transform: scale(1.06);
}
.pf-avatar-badge .material-symbols-rounded {
font-size: 16px;
}
.pf-info-col {
flex: 1 1 auto;
max-width: 800px;
}
.pf-secao-tit {
font-size: 14px;
font-weight: 700;
color: var(--ink);
margin: 0 0 16px;
}
.pf-grid-seus-dados {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
gap: 16px 36px;
}
.pf-campo-rot {
font-size: 11px;
font-weight: 600;
color: var(--muted);
margin-bottom: 4px;
}
.pf-campo-val {
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.pf-divisor {
height: 1px;
background: var(--line-soft);
margin: 22px 0;
}
.pf-btn-alterar {
background: var(--brand-fundo);
color: var(--on-brand);
border: 0;
}
/* 2. Alteracao de Perfil (#bPerfilEdit) */
.pf-edit-card {
background: var(--panel);
border: 1px solid var(--line-soft);
border-radius: var(--rad);
padding: 22px 24px;
box-shadow: var(--shadow);
}
.pf-foto-bloco {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line-soft);
}
.pf-edit-avatar-prev {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--mint-soft);
color: var(--brand-2);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 700;
overflow: hidden;
flex: 0 0 auto;
border: 1px solid var(--line-soft);
}
.pf-foto-info {
flex: 1 1 auto;
}
.pf-foto-tit {
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
margin-bottom: 4px;
}
.pf-foto-desc {
font-size: 12px;
color: var(--muted);
line-height: 1.45;
margin-bottom: 12px;
max-width: 640px;
}
.pf-foto-acoes {
display: flex;
gap: 10px;
margin-bottom: 8px;
}
.pf-foto-acoes .btn.ghost {
border-radius: var(--rad-s);
padding: 8px 16px;
font-size: 11px;
}
.pf-foto-hint {
font-size: 11px;
color: var(--muted);
}
.pf-form-row {
display: grid;
gap: 12px;
margin-bottom: 14px;
}
.pf-form-row.r1 { grid-template-columns: 2fr 1.5fr 1.5fr; }
.pf-form-row.r2 { grid-template-columns: 1fr 1.2fr 1.8fr 1.3fr; }
.pf-form-row.r3 { grid-template-columns: 1.3fr 2fr; }
.pf-form-row.r4 { grid-template-columns: 1.2fr 0.8fr 2fr 1fr; }
.pf-form-row.r5 { grid-template-columns: 1.5fr 2fr 0.8fr 1.2fr; }
.pf-pl-dica {
font-size: 10.5px;
font-weight: 400;
color: var(--muted);
margin-left: auto;
}
.pf-acoes-rodape {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid var(--line-soft);
}
.pf-acoes-rodape .btn-voltar-perfil {
margin-bottom: 0;
}
.pf-acoes-rodape #pfBtnSalvar {
background: var(--brand-fundo);
color: var(--on-brand);
border: 0;
}
/* Avatar no cabecalho */
.hd-avatar.com-foto {
padding: 0;
background: transparent;
}
.hd-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
@media (max-width: 860px) {
.pf-view-layout { flex-direction: column; gap: 20px; }
.pf-form-row.r1, .pf-form-row.r2, .pf-form-row.r3, .pf-form-row.r4, .pf-form-row.r5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.pf-grid-seus-dados { grid-template-columns: 1fr; }
.pf-form-row.r1, .pf-form-row.r2, .pf-form-row.r3, .pf-form-row.r4, .pf-form-row.r5 {
grid-template-columns: 1fr;
}
.pf-foto-bloco { flex-direction: column; align-items: flex-start; }
}
/* --------------------------------------------------------------------------
FORMULÁRIOS DE LANÇAMENTO (Talhão, Inventário, Custos, Colheita/Venda):
Modais flutuantes no padrão Elabore, organizados em blocos semânticos
e totalmente responsivos para uso em campo no celular ou computador.
-------------------------------------------------------------------------- */
body.modal-aberto {
overflow: hidden !important;
}
.lanc-modal-fundo {
position: fixed;
inset: 0;
background: var(--petroleo-950-a50);
z-index: 9460;
animation: modalBackdropFadeIn var(--dur-rapida) var(--ease-elabore);
}
.lanc-modal-fundo.fechando {
animation: modalBackdropFadeOut 90ms var(--ease-saida) forwards;
}
@keyframes modalBackdropFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalBackdropFadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
.lanc-card-cadastro {
background: var(--panel);
border: 1px solid var(--line-soft);
border-radius: var(--esp-3);
padding: var(--esp-5) var(--esp-6);
box-shadow: 0 1.125rem 3.75rem var(--sombra-a35);
position: fixed !important;
inset: 0 !important;
margin: auto !important;
max-width: 56.25rem !important;
width: calc(100vw - var(--esp-8)) !important;
max-height: calc(100vh - var(--esp-10)) !important;
/* altura visível: no Safari do iPhone, 100vh conta a tela sem as barras do navegador e os botões do pé
da janela ficavam atrás da barra de baixo (retorno dos usuários, 2026-10-28) */
max-height: calc(100dvh - var(--esp-10)) !important;
height: -moz-fit-content !important;
height: fit-content !important;
overflow-y: auto !important;
z-index: 9470 !important;
box-sizing: border-box !important;
animation: modalFadeIn var(--dur-normal) var(--ease-elabore);
}
.lanc-card-cadastro.fechando {
animation: modalFadeOut 90ms var(--ease-saida) forwards;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: scale(0.985) translateY(calc(-1 * var(--esp-1))); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalFadeOut {
from { opacity: 1; transform: scale(1) translateY(0); }
to { opacity: 0; transform: scale(0.99) translateY(calc(-0.5 * var(--esp-1))); }
}
.lanc-card-cadastro-head {
display: flex;
align-items: center;
justify-content: space-between;
margin: calc(-1 * var(--esp-5)) calc(-1 * var(--esp-6)) var(--esp-4) calc(-1 * var(--esp-6));
padding: 0.875rem var(--esp-6);
border-bottom: 1px solid var(--line-soft);
background: var(--panel);
position: sticky;
top: calc(-1 * var(--esp-5));
z-index: 10;
}
.lanc-card-cadastro-head h3 {
font-size: 0.875rem;
font-weight: 700;
color: var(--brand-deep);
margin: 0;
display: flex;
align-items: center;
gap: var(--esp-2);
}
.lanc-card-fechar {
background: none;
border: 0;
color: var(--muted);
cursor: pointer;
padding: 0.375rem;
border-radius: var(--esp-1);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 36px;
min-height: 36px;
transition: color var(--dur-rapida) var(--ease-elabore), background-color var(--dur-rapida) var(--ease-elabore);
}
.lanc-card-fechar:hover {
color: var(--ink);
background: var(--mint-soft);
}
/* Blocos semânticos de formulário (Opção 2.A) */
.lanc-form-secao {
margin-bottom: var(--esp-4);
padding-bottom: 0.875rem;
border-bottom: 1px dashed var(--line-soft);
}
.lanc-form-secao:last-of-type {
border-bottom: 0;
margin-bottom: var(--esp-2);
padding-bottom: 0;
}
.lanc-secao-tit {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05rem;
color: var(--brand);
margin-bottom: 0.625rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.lanc-secao-tit svg, .lanc-secao-tit .material-symbols-rounded {
font-size: 1rem;
line-height: 1;
}
/* Grids responsivos dos campos */
.lanc-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 14px;
align-items: start;
}
.lanc-grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 14px;
align-items: start;
}
.lanc-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 14px;
align-items: start;
}
.lanc-col-span-2 { grid-column: span 2; }
.lanc-col-span-3 { grid-column: span 3; }
.lanc-col-full { grid-column: 1 / -1; }
/* Rótulos e asterisco obrigatório */
.lanc-card-cadastro .pfield {
background: transparent;
border: 0;
padding: 0;
}
.lanc-card-cadastro .pfield .pl {
font-size: 11.5px;
font-weight: 600;
color: var(--ink);
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 4px;
}
.lanc-card-cadastro .pfield .pl .req {
color: var(--err);
font-weight: 700;
}
.lanc-card-cadastro .pfield input,
.lanc-card-cadastro .pfield select {
height: 36px;
border: 1px solid var(--campo-borda);
border-radius: var(--rad-s);
padding: 0 10px;
font-size: 13px;
color: var(--ink);
background: var(--panel);
}
.lanc-card-cadastro .pfield input:focus,
.lanc-card-cadastro .pfield select:focus {
border-color: var(--brand-2);
outline: none;
}
/* Seletor Segmentado / Pills (Opção 1.A e Opção 3.A) */
.lanc-pills-bar {
display: inline-flex;
border: 1px solid var(--line);
border-radius: 0.375rem;
padding: 0.1875rem;
gap: var(--esp-1);
background: var(--panel);
margin-bottom: 0.875rem;
}
.lanc-pill-btn {
border: 0;
border-radius: var(--esp-1);
background: transparent;
color: var(--ink);
font-family: var(--font-b);
font-size: 0.75rem;
font-weight: 600;
padding: 0.4375rem 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.375rem;
transition: background-color var(--dur-rapida) var(--ease-elabore),
color var(--dur-rapida) var(--ease-elabore),
transform var(--dur-instant) var(--ease-tatil);
}
.lanc-pill-btn:hover {
background: var(--green-100);
}
.lanc-pill-btn:active {
transform: scale(0.985);
}
.lanc-pill-btn.ativo,
.lanc-pill-btn.on {
background: var(--brand-fundo);
color: var(--on-brand);
font-weight: 700;
}
/* Destaque de cálculo / totais */
.lanc-total-box {
background: var(--azul-040);
border: 1px solid var(--azul-120);
border-radius: 6px;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.lanc-total-lbl {
font-size: 12px;
font-weight: 600;
color: var(--ink);
}
.lanc-total-val {
font-size: 16px;
font-weight: 700;
color: var(--brand-deep);
}
.lanc-estoque-box {
background: var(--mint-soft);
border: 1px solid var(--line-soft);
border-radius: 6px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.lanc-estoque-box .material-symbols-rounded {
color: var(--brand);
font-size: 24px;
}
.lanc-estoque-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.lanc-estoque-info .lbl {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: var(--muted);
}
.lanc-estoque-info .val {
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
.lanc-estoque-info .sub {
font-size: 11px;
color: var(--muted);
}
/* Tabela: link destacado no nome do talhão e botão direto de visualizar */
.btn-talhao-link {
background: none;
border: none;
padding: 0;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: 700;
color: var(--brand-deep);
cursor: pointer;
text-align: left;
display: inline-flex;
align-items: center;
gap: var(--esp-1);
border-radius: var(--rad-s);
transition: color var(--dur-rapida) var(--ease-elabore);
}
.btn-talhao-link:hover {
color: var(--brand-2);
text-decoration: underline;
}
.t-acoes-cell {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-2);
}
.btn-acao-ver {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
background: var(--mint-soft);
border: 1px solid var(--mint);
color: var(--brand-deep);
font-family: var(--font-b);
font-size: 0.71875rem;
font-weight: 700;
padding: 0.1875rem 0.5rem;
border-radius: 0.3125rem;
cursor: pointer;
transition: all var(--dur-rapida) var(--ease-elabore);
white-space: nowrap;
line-height: 1.2;
}
.btn-acao-ver:hover {
background: var(--brand-fundo);
border-color: var(--brand-deep);
color: var(--on-brand);
}
.btn-acao-ver svg {
width: 0.8125rem;
height: 0.8125rem;
stroke-width: 2.2;
}
/* Header aprimorado dos modais de cadastro e visualização */
.lanc-head-tit-wrap {
display: flex;
flex-direction: column;
gap: 0.1875rem;
flex: 1 1 auto;
min-width: 0;
}
.lanc-card-cadastro-head .md-sub {
white-space: normal;
font-size: 11.5px;
line-height: 1.35;
}
.lanc-head-tit-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--esp-2);
}
.lanc-head-tag {
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.05rem;
text-transform: uppercase;
background: var(--panel2);
border: 1px solid var(--line);
color: var(--brand);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
}
/* Hero de Métricas Principais da Ficha Técnica (Visualização) */
.lanc-hero-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--esp-3);
margin-bottom: var(--esp-4);
background: var(--panel2);
border: 1px solid var(--line);
border-radius: var(--rad-s);
padding: var(--esp-3) var(--esp-4);
}
@media (max-width: 768px) {
.lanc-hero-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lanc-hero-metric-item {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.lanc-hero-metric-item .m-lbl {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
display: flex;
align-items: center;
gap: 0.25rem;
}
.lanc-hero-metric-item .m-val {
font-size: 1.0625rem;
font-weight: 700;
color: var(--brand-deep);
}
/* Campos de visualização que dialogam diretamente com os .pfield do formulário */
.pfield.pfield-view {
display: flex;
flex-direction: column;
gap: 0.125rem;
background: var(--panel2);
border: 1px solid var(--line-soft);
border-radius: 0.375rem;
padding: 0.375rem 0.625rem;
min-height: 3rem;
box-sizing: border-box;
}
.pfield.pfield-view .pl {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted);
margin: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.pfield.pfield-view .pv {
font-size: 0.84375rem;
font-weight: 600;
color: var(--ink);
margin: 0;
word-break: break-word;
}
.pfield.pfield-view.pfield-destaque {
background: var(--mint-soft);
border-color: var(--mint);
}
.pfield.pfield-view.pfield-destaque .pv {
color: var(--brand-deep);
font-weight: 700;
}
/* Barra de ações inferior */
.lanc-card-cadastro .act-row {
margin: 1.125rem calc(-1 * var(--esp-6)) calc(-1 * var(--esp-5)) calc(-1 * var(--esp-6));
padding: 0.875rem var(--esp-6);
border-top: 1px solid var(--line-soft);
background: var(--panel);
position: sticky;
bottom: calc(-1 * var(--esp-5));
z-index: 10;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.625rem;
}
@media (max-width: 860px) {
.lanc-grid-3, .lanc-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.lanc-card-cadastro {
width: calc(100vw - 1.5rem) !important;
max-width: calc(100vw - 1.5rem) !important;
max-height: calc(100vh - 2.5rem) !important;
max-height: calc(100dvh - 2.5rem) !important;
height: -moz-fit-content !important;
height: fit-content !important;
border-radius: var(--esp-3) !important;
border: 1px solid var(--line-soft) !important;
box-shadow: 0 0.75rem 2.5rem var(--sombra-a35) !important;
padding: var(--esp-4) var(--esp-4) !important;
inset: 0 !important;
margin: auto !important;
}
.lanc-card-cadastro-head {
margin: calc(-1 * var(--esp-4)) calc(-1 * var(--esp-4)) var(--esp-3) calc(-1 * var(--esp-4));
padding: 0.75rem var(--esp-4);
top: calc(-1 * var(--esp-4));
border-top-left-radius: var(--esp-3);
border-top-right-radius: var(--esp-3);
}
.lanc-card-cadastro .act-row {
margin: var(--esp-4) calc(-1 * var(--esp-4)) calc(-1 * var(--esp-4)) calc(-1 * var(--esp-4));
padding: 0.75rem var(--esp-4);
bottom: calc(-1 * var(--esp-4));
border-bottom-left-radius: var(--esp-3);
border-bottom-right-radius: var(--esp-3);
}
.lanc-grid-3, .lanc-grid-4, .lanc-grid-2 {
grid-template-columns: 1fr;
}
.lanc-col-span-2, .lanc-col-span-3 {
grid-column: span 1;
}
.lanc-pills-bar {
width: 100%;
}
.lanc-pill-btn {
flex: 1 1 0;
justify-content: center;
padding: 0.5rem 0.625rem;
font-size: 0.71875rem;
}
.lanc-card-cadastro-head {
gap: 8px;
}
.btn-adm-filtros {
height: 38px;
min-height: 38px;
padding: 0 14px;
font-size: 13px;
}
.adm-estilo-cadastro .btn-table-export {
height: 38px;
min-height: 38px;
}
table.data-table td .td-val-wrap,
table.sub-tabela-elabore td .td-val-wrap {
align-items: flex-end;
text-align: right;
}
}
.td-val-wrap {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.td-sub-val {
color: var(--muted);
font-size: 11.5px;
font-weight: 500;
line-height: 1.25;
}
/* ==========================================================================
ADMINISTRAÇÃO (v0.13.0): abas sublinhadas, painéis, botão Filtros e janela de cadastro
no padrão das telas de Administração do Elabore
========================================================================== */
.adm-abas{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.adm-abas::-webkit-scrollbar{display:none}
.adm-aba{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 13px;cursor:pointer;
font-family:var(--font-b);font-size:12px;font-weight:400;color:var(--azul-650);white-space:nowrap}
.adm-aba:hover{color:var(--ink)}
.adm-aba.on{border-bottom-color:var(--menu-txt);color:var(--ink);font-weight:600}
.lista-elabore .adm-painel:not([hidden]){display:flex;flex-direction:column;flex:1 1 auto}
.adm-ajuda{font-size:12.5px;color:var(--ink);margin:0 0 12px;line-height:1.5}
.adm-sem-filtros .table-filter-row{display:none}
.btn-adm-filtros{display:inline-flex;align-items:center;gap:8px;height:31px;padding:0 14px;border:1px solid var(--menu-txt);
border-radius:4px;background:var(--panel);color:var(--menu-txt);font-family:var(--font-b);font-size:12px;font-weight:700;cursor:pointer}
.btn-adm-filtros svg{width:14px;height:14px}
.btn-adm-filtros b{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
border-radius:9px;background:var(--brand-deep-fundo);color:var(--on-brand);font-size:10px}
.btn-adm-filtros[aria-pressed="true"]{background:var(--green-100)}
.adm-link{color:var(--menu-txt);font-weight:600}
.adm-alerta{color:var(--warn);font-weight:700}
.adm-modal .pn-cx{width:min(640px,100%)}
.adm-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.adm-form .adm-larg{grid-column:1/-1}
@media (max-width:640px){ .adm-form{grid-template-columns:1fr} }
/* menu lateral: subgrupo dentro de grupo (Administração › Cadastros / Lançamentos) */
.sn-itens .sn-grupo{margin-left:-34px}
.sn-itens .sn-grupo>.sn-tit{min-height:30px;padding:5px 10px 5px 34px;font-size:11.2px;font-weight:600}
.sn-itens .sn-grupo>.sn-tit .sn-nome{font-weight:600}
.sn-itens .sn-grupo>.sn-itens{padding-left:44px}
/* --- telas de cadastro no padrão Elabore (Perfis e permissões, Agroindústrias): sem abas, EXPORTAR contornado,
busca larga e botão de cadastrar à direita, Ações centralizada --- */
.adm-abas-unica{display:none}
.adm-estilo-cadastro .table-heading{margin-bottom:14px}
.adm-estilo-cadastro .btn-table-export{height:32px;padding:0 26px;border:1px solid var(--menu-txt);border-radius:4px;background:var(--panel);
color:var(--menu-txt);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;box-shadow:none;gap:10px}
.adm-estilo-cadastro .btn-table-export svg:not(.ic-exp-arrow):not(.ic-seta-exp){color:var(--menu-txt)}
.adm-estilo-cadastro .btn-table-export .ic-exp-arrow{display:none}
.adm-estilo-cadastro .btn-table-export:hover,.adm-estilo-cadastro .btn-table-export[aria-expanded="true"]{background:var(--green-100);color:var(--menu-txt);border-color:var(--menu-txt)}
.adm-estilo-cadastro .table-search-wrap{width:280px}
.adm-estilo-cadastro .table-search-input{width:100%;height:32px}
.adm-estilo-cadastro .btn-elabore-novo{height:32px;padding:0 26px;letter-spacing:1.8px}
.adm-estilo-cadastro .data-table th:last-child,.adm-estilo-cadastro .data-table td:last-child{text-align:center}
.adm-estilo-cadastro .data-table td:last-child .lr-acoes{justify-content:center}
@media (max-width:860px){ .adm-estilo-cadastro .table-search-wrap{width:auto} }
/* alerta "nenhum" (perfil sem usuário ou sem permissão) */
svg.adm-alerta{width:14px;height:14px;vertical-align:-2px;color:var(--warn)}
/* menu ⋮ com ícone e separador */
.lr-menu-item svg{width:14px;height:14px;margin-right:8px;vertical-align:-2px;flex:none}
.lr-menu-sep{height:1px;background:var(--line-soft);margin:4px 0}
/* aviso de sucesso (senha provisória) aparece dentro das janelas de Administração */
.adm-modal .note.info{display:block!important}
/* --- janela de permissões do perfil --- */
.adm-modal-perm .pn-cx{width:min(720px,100%);max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;padding-bottom:16px}
.pp-cab{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pp-cab h3{flex:1 1 auto;margin:0;font-size:14px;font-weight:700;color:var(--brand-deep)}
.pp-x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;padding:2px 6px;border-radius:4px}
.pp-x:hover{background:var(--green-100)}
.pp-corpo{flex:1 1 auto;overflow-y:auto;padding-right:4px;min-height:200px}
.pp-rodape{display:flex;justify-content:flex-end;padding-top:12px}
.pp-busca{width:100%;margin:0 0 12px}
.pp-busca .table-search-input{width:100%;height:32px}
.pp-grupo{border:1px solid var(--line);border-radius:4px;margin-bottom:8px;background:var(--panel)}
.pp-grupo-tit{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:10px 12px;cursor:pointer;
font-family:var(--font-b);font-size:12.5px;color:var(--ink);text-align:left}
.pp-grupo-tit .material-symbols-rounded{font-size:18px;color:var(--muted);transform:rotate(-90deg);transition:transform .15s ease}
.pp-grupo.aberto .pp-grupo-tit .material-symbols-rounded{transform:none}
.pp-conta{margin-left:auto;font-size:11.5px;color:var(--muted)}
.pp-tab{width:100%;border-collapse:collapse;margin:0 0 8px}
.pp-tab th{font-size:12px;font-weight:700;color:var(--ink);padding:6px 12px;text-align:center;white-space:nowrap}
.pp-tab th:first-child,.pp-tab td:first-child{text-align:left;width:40%}
.pp-tab td{font-size:12px;color:var(--ink);padding:4px 12px;text-align:center}
.pp-tab input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.pp-tab input.pp-na{opacity:.25;cursor:default}
.pp-resumo{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 12px;font-size:12.5px}
.pp-resumo dt{color:var(--muted)}
.pp-resumo dd{margin:0;color:var(--ink);font-weight:600}
.pp-resumo-g{font-size:12px;color:var(--ink);margin-bottom:8px}
.pp-resumo-g ul{margin:4px 0 0 18px;padding:0}
@media (max-width:640px){ .pp-tab th,.pp-tab td{padding:4px 4px} .pp-tab th{font-size:10.5px} }
.adm-modal-perm .pp-cab,.adm-modal-perm .adm-abas,.adm-modal-perm .pp-rodape,.adm-modal-perm #ppErro{flex:none}
/* linhas das tabelas na altura do Elabore (~39px): o botão ⋮ não estica a linha. No celular (cartões) o toque continua com 30px. */
@media (min-width:641px){
table.data-table td{padding-top:7px;padding-bottom:7px}
table.data-table td .lr-mais{width:24px;height:24px}
table.data-table td .lr-mais svg{width:16px;height:16px}
}
/* --- menu ⋮ de ações no padrão Elabore: caixa branca com sombra suave, itens com ícone de linha,
linha antes da ação destrutiva (vermelha), botão quadrado arredondado que fica verde-claro aberto --- */
.lr-mais{border-radius:4px;color:var(--ink)}
.lr-mais:hover{background:var(--azul-040);color:var(--ink)}
.lr-mais[aria-expanded="true"]{background:var(--mint-soft);color:var(--menu-txt)}
.lr-menu{min-width:220px;padding:6px 0;border:1px solid var(--line-soft);border-radius:6px;box-shadow:0 4px 16px var(--sombra-a12)}
.lr-menu-item{display:flex;align-items:center;gap:12px;padding:9px 16px;border-radius:0;font-size:13px;font-weight:400;color:var(--ink);white-space:nowrap}
.lr-menu-item svg{width:16px;height:16px;margin:0;flex:none;color:var(--ink)}
.lr-menu-item:hover{background:var(--azul-040);color:var(--ink)}
.lr-menu-item.perigo,.lr-menu-item.perigo svg{color:var(--err)}
.lr-menu-item.perigo:hover{background:var(--errbg);color:var(--err)}
.lr-menu-sep{height:1px;background:var(--line);margin:6px 0}
/* celular (≤860px): a lista vira cartões e o rodapé entra no fluxo; encher a tela só criaria rolagem sem conteúdo */
@media (max-width:860px){ section.lista-elabore.on{min-height:0} }
/* ==========================================================================
RELATÓRIOS (0.13.1): Painel de Resultados + Importar/Exportar numa tela só, no padrão do Elabore:
título, subtítulo, abas sublinhadas, barra de controles (critério, Filtros com contador, Exportar) e chips do recorte
========================================================================== */
.rel-sub{font-size:13px;color:var(--ink);margin:0 0 14px;line-height:1.5}
.rel-cab .block-head{margin-bottom:6px}
.rel-ctl{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--rad);padding:12px 14px;margin:0 0 14px;overflow:visible}
.rel-ctl-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rel-ctl-linha .esp{flex:1 1 auto}
.rel-seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;padding:3px;gap:3px;background:var(--panel)}
.rel-seg button{border:0;border-radius:4px;background:transparent;color:var(--ink);font-family:var(--font-b);font-size:12px;
font-weight:500;padding:6px 14px;cursor:pointer;white-space:nowrap}
.rel-seg button:hover{background:var(--green-100)}
.rel-seg button.on{background:var(--brand-fundo);color:var(--on-brand);font-weight:700}
.rel-filtros-wrap{position:relative}
.rel-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(340px,calc(100vw - 32px));background:var(--panel);
border:1px solid var(--line);border-radius:10px;padding:14px;box-shadow:0 10px 28px var(--petroleo-850-a18)}
.rel-pop[hidden]{display:none}
.rel-pop-grid{display:grid;grid-template-columns:1fr;gap:10px}
.rel-pop-acoes{display:flex;justify-content:flex-end;margin-top:12px}
.rel-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.rel-chip{display:inline-flex;align-items:center;height:24px;padding:0 12px;border:1px solid var(--line);border-radius:12px;
font-size:11.5px;color:var(--ink);background:var(--panel);white-space:nowrap}
/* painéis no mesmo molde dos do Elabore: borda fina, sem sombra, título em negrito */
#bP1 .card,#bP2 .card,#bP3 .card,#bP4 .card{border-color:var(--line-soft);box-shadow:none}
#bP1 .card>h3,#bP2 .card>h3,#bP3 .card>h3,#bP4 .card>h3{font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
#bP1 .card>h3 .h3n,#bP2 .card>h3 .h3n,#bP3 .card>h3 .h3n,#bP4 .card>h3 .h3n{font-weight:400;color:var(--muted)}
@media(max-width:860px){
.rel-ctl-linha{gap:0.5rem}
.rel-seg{width:100%}
.rel-seg button{flex:1 1 0;padding:0.4375rem 0.375rem;white-space:normal}
.rel-pop{
position:fixed;
left:1rem;
right:1rem;
bottom:calc(var(--bnav-h, 3.5rem) + 0.75rem + env(safe-area-inset-bottom, 0rem));
top:auto;
width:auto;
max-height:calc(100dvh - var(--hd-h, 3.5rem) - var(--bnav-h, 3.5rem) - 2rem);
overflow-y:auto;
z-index:80;
}
}
/* tabelas do painel no padrão do Elabore: cabeçalho cinza, números à direita sem divisórias verticais,
linhas finas e texto de 12,5px (sem negrito nos valores). O celular (cartões) segue o mobile.css. */
@media screen and (min-width:641px){
.pn-bloco{border-radius:var(--rad-s);background:var(--panel)}
.pn-bloco .pn-bt{font-size:13px;padding:11px 14px}
.pn-bloco .pn-tab{border-collapse:collapse;font-variant-numeric:tabular-nums}
.pn-bloco .pn-tab thead th{font-size:11.5px;padding:9px 12px;text-align:right;border-left:0;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.pn-bloco .pn-tab thead th:first-child{text-align:left;padding-left:14px}
.pn-bloco .pn-tab thead th.num{text-align:right}
.pn-bloco .pn-tab td{padding:7px 12px;font-size:12.5px;border-bottom:1px solid var(--line-soft)}
.pn-bloco .pn-tab td.num{border-left:0;text-align:right;padding-left:12px;padding-right:12px}
.pn-bloco .pn-tab.var td.num,.pn-bloco .pn-tab.var td.num .pn-cel{padding-left:12px}
.pn-bloco .pn-tab td.pn-rot{font-weight:400;color:var(--ink)}
.pn-bloco .pn-tab .pn-v{font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--ink)}
.pn-bloco .pn-tab .pn-v.neg{color:var(--err)}
.pn-bloco .pn-tab .pn-uni{font-size:10.5px;margin-top:0}
.pn-bloco .pn-tab .pn-var{font-size:10.5px;min-width:40px}
.pn-bloco .pn-nota{font-size:11px;border-top:1px solid var(--line-soft)}
/* com variação, o cabeçalho alinha com o valor (a faixa da variação fica à direita dele) */
.pn-bloco .pn-tab.var thead th.num{padding-right:60px}
}