/* =====================================================================
   Form2026 - padrão visual das telas de cadastro/pesquisa (SEGSYS)
   Uso: <div class="frm"> ... </div>  +  Style2026.css
   Cartões: painel-moderno frm-card tema-azul | tema-verde | tema-roxo | tema-laranja
   ===================================================================== */

.frm {
    --frm-line: #e3e6f0;
    --frm-text: #2d3436;
    --frm-muted: #6b7280;
    --frm-title: #000066;
    --frm-accent: #4a90e2;
    --frm-soft: #eef4fc;
    font-family: "Segoe UI", Calibri, Arial, sans-serif;
    color: var(--frm-text);
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 8px 0 24px;
}
.frm-stack { display: flex; flex-direction: column; gap: 18px; }

/* Cabeçalho da página */
.frm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(120deg, #1f5fbf 0%, #2f6fd6 45%, #0e9e86 100%);
    box-shadow: 0 4px 12px rgba(31, 95, 191, .18);
}
.frm-header h3 {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 22px;
}
.frm-header p { margin: 2px 0 0; color: rgba(255,255,255,.85); font-size: 13px; }
.frm .frm-header .btn-modern {
    background: #fff;
    color: #1f5fbf;
    border: 1px solid #fff;
}
.frm .frm-header .btn-modern.secundario {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.55);
}
.frm .frm-header .btn-modern.secundario:hover { background: rgba(255,255,255,.28); }

/* Temas de cor dos cartões */
.tema-azul    { --c: #2f6fd6; --c-esc: #1f5fbf; --c-soft: #e8f0fc; }
.tema-verde   { --c: #0e9e86; --c-esc: #0b8370; --c-soft: #e2f5f1; }
.tema-roxo    { --c: #7c4dcc; --c-esc: #6639b5; --c-soft: #f0eafb; }
.tema-laranja { --c: #e5761f; --c-esc: #c25e10; --c-soft: #fdeedf; }

/* Cartões */
.frm-busca {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 430px));
    gap: 18px;
}
.frm-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border-top: 4px solid var(--c, #4a90e2);
}
.frm-card-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--frm-line);
    font-size: 16px;
    font-weight: 600;
    color: var(--c-esc, var(--frm-title));
}
.frm-card-titulo .frm-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--c-soft, var(--frm-soft));
    color: var(--c, var(--frm-accent));
}
.frm-card-titulo svg { width: 17px; height: 17px; }

/* Formulários */
.frm-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}
.frm-form.tres { grid-template-columns: repeat(3, minmax(0, 190px)); }
.frm-form.quatro { grid-template-columns: repeat(4, minmax(0, 190px)); }
/* grade de colunas fixas de 190px; use duplo/triplo para campos maiores */
.frm-form.colunas { grid-template-columns: repeat(auto-fill, 190px); }
.frm-campo.duplo { grid-column: span 2; }
.frm-campo.triplo { grid-column: span 3; }
.frm-campo.obs { max-width: 808px; }
.frm-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.frm-campo.largo { grid-column: 1 / -1; }
.frm-campo label,
.frm-rotulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--frm-muted);
}
/* rótulo com checkbox "filtrar por" */
.frm-ck { display: flex; align-items: center; gap: 6px; }
.frm-ck input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--c, var(--frm-accent));
    cursor: pointer;
}
.frm-dica { font-size: 12px; color: var(--frm-muted); }

.frm .roundedTextBox,
.frm .roundedDropdown {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    font-size: 13px;
    padding: 5px 10px;
    border: 1px solid #cfd6e2;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.frm .roundedTextBox:focus,
.frm .roundedDropdown:focus {
    outline: none;
    border-color: var(--c, var(--frm-accent));
    box-shadow: 0 0 0 3px var(--c-soft, rgba(74, 144, 226, .18));
}
.frm .roundedTextBox[disabled] { background: #f1f3f7; color: var(--frm-muted); }
.frm textarea.roundedTextBox { height: auto; min-height: 64px; resize: vertical; }
.frm-inline { display: flex; align-items: center; gap: 8px; }
.frm-inline .roundedTextBox, .frm-inline .roundedDropdown { flex: 1; min-width: 0; }
.frm-sufixo { color: var(--frm-muted); font-weight: 600; }
.frm-calc { border-radius: 6px; cursor: pointer; transition: transform .15s; }
.frm-calc:hover { transform: scale(1.08); }
/* botão de ícone (ImageButton) ao lado de um campo */
.frm .frm-icone {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 5px;
    box-sizing: border-box;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--c, #cfd6e2);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.frm .frm-icone:hover { background: var(--c-soft, var(--frm-soft)); transform: translateY(-1px); }

/* CheckBoxList / RadioButtonList (Flow ou Table) */
.frm .frm-checklist { font-size: 13px; }
.frm .frm-checklist td { padding: 3px 18px 3px 0; border: 0; }
.frm .frm-checklist input {
    width: 15px;
    height: 15px;
    margin: 0 6px 0 0;
    vertical-align: middle;
    accent-color: var(--c, var(--frm-accent));
    cursor: pointer;
}
.frm .frm-checklist label {
    margin-right: 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--frm-text);
    vertical-align: middle;
    cursor: pointer;
}

/* Listas de seleção (ListBox) lado a lado */
.frm-listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 12px 16px; }
.frm select.frm-lista { height: 240px; padding: 6px; }
.frm select.frm-lista option { padding: 4px 6px; border-radius: 4px; }
/* variante: duas listas lado a lado ocupando a altura da tela (deixa espaço para os botões abaixo) */
.frm-listas.alta { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.frm-listas.alta select.frm-lista { height: calc(100vh - 540px); min-height: 260px; }
@media (max-width: 640px) {
    .frm-listas.alta { grid-template-columns: 1fr; }
    .frm-listas.alta select.frm-lista { height: 260px; }
}

/* Campo de arquivo (FileUpload) */
.frm .frm-arquivo {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px dashed #cfd6e2;
    border-radius: 8px;
    background: #fff;
}

/* grade de campos curtos (ex.: letra da coluna da planilha) */
.frm-form.curtos { grid-template-columns: repeat(auto-fill, 200px); align-items: end; }
.frm-form.curtos .roundedTextBox { width: 70px; text-align: center; }

/* Botões */
.frm-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.frm-acoes.fim { justify-content: flex-end; }
.frm-acoes .frm-sep { flex: 1; }
.frm .btn-modern { width: auto; min-width: 110px; height: 36px; padding: 0 20px; font-size: 14px; }
.frm .frm-card .btn-modern { background: linear-gradient(135deg, var(--c), var(--c-esc)); }
.frm .frm-card .btn-modern:hover { filter: brightness(1.08); }
.frm .btn-modern.secundario,
.frm .frm-card .btn-modern.secundario {
    background: #fff;
    color: var(--c-esc, #357abd);
    border: 1px solid var(--c, #cfd6e2);
    box-shadow: none;
}
.frm .btn-modern.secundario:hover { background: var(--c-soft, var(--frm-soft)); box-shadow: 0 3px 8px rgba(0,0,0,.08); }
/* LinkButton (<a>) com aparência de botão */
.frm a.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}
/* grupo de opções (checkbox/radio com texto) lado a lado */
.frm-opcoes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 34px; }
.frm-opcoes span { display: inline-flex; align-items: center; gap: 6px; }
.frm-opcoes input { width: 15px; height: 15px; margin: 0; accent-color: var(--c, var(--frm-accent)); cursor: pointer; }
.frm .frm-opcoes label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--frm-text);
    cursor: pointer;
}
.frm .btn-modern.perigo,
.frm .frm-card .btn-modern.perigo { background: linear-gradient(135deg, #d9534f, #b52b27); }
.frm-link {
    align-self: center;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-esc, #357abd);
    text-decoration: none;
}
.frm-link:hover { text-decoration: underline; }

/* Barra acima de um grid (classificação, contador, download) */
.frm-barra {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
}
.frm-barra .roundedDropdown { width: 210px; }
.frm-contador {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: #e8f0fc;
    color: #1f5fbf;
    font-size: 12px;
    font-weight: 700;
}
.frm-contador:empty { display: none; }

/* Grids */
.frm-scroll { overflow-x: auto; border-radius: 12px; }
.frm-scroll:empty { display: none; }
.frm .roundedGridView {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--frm-line);
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    margin: 0;
}
.frm .roundedGridView th {
    background: linear-gradient(180deg, var(--c, #2f6fd6), var(--c-esc, #1f5fbf));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 10px;
    border: 0;
    white-space: nowrap;
}
.frm .roundedGridView td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #f0f2f6;
}
.frm .frm-row td { background: #fff; }
.frm .frm-row-alt td { background: #f5f8fe; }
.frm .frm-row:hover td,
.frm .frm-row-alt:hover td { background: #e8f0fc; }
.frm .frm-row-sel td { background: #d4e4fb !important; font-weight: 600; }
.frm .frm-row-sel td:first-child { box-shadow: inset 4px 0 0 var(--c, #2f6fd6); }
.frm .frm-row-edit td { background: #fffbea !important; }
.frm .frm-row-edit input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #cfd6e2;
    border-radius: 6px;
}
.frm .roundedGridView th a { color: #fff; }
.frm .roundedGridView a { color: var(--c-esc, #1f5fbf); font-weight: 600; text-decoration: none; }
.frm .roundedGridView a:hover { text-decoration: underline; }
.frm .frm-pager td { background: #f8f9fc; border-bottom: 0; }
.frm .frm-pager table { margin: 0 auto; }
.frm .frm-pager table td { padding: 4px 9px; border: 0; background: transparent; }
.frm .frm-pager span { font-weight: 700; color: var(--frm-title); }
.frm-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}
.frm-tag.paga { background: #dcf5e7; color: #17663a; }
.frm-tag.vencida { background: #fde2e1; color: #a12622; }

/* Resumo / grupos / mensagens */
.frm-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--c-soft, var(--frm-soft));
    border-left: 4px solid var(--c, #4a90e2);
    max-width: 788px;
}
.frm-resumo div { display: flex; flex-direction: column; gap: 2px; }
.frm-resumo .valor { font-size: 16px; font-weight: 600; color: var(--c-esc, var(--frm-text)); }
/* variante .auto: esconde itens sem valor e o resumo inteiro enquanto nada foi calculado */
.frm-resumo.auto div:has(> .valor:empty) { display: none; }
.frm-resumo.auto:not(:has(.valor:not(:empty))) { display: none; }
.frm-grupo {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-esc, var(--frm-title));
    margin: 6px 0 -2px;
    padding-left: 8px;
    border-left: 3px solid var(--c, #4a90e2);
}
.frm-msg { font-weight: 600; color: #a12622; }
.frm-msg:empty { display: none; }
.frm-alerta {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff4e5;
    border: 1px solid #ffd8a8;
    color: #8a4b00;
    font-weight: 600;
}
.frm-alerta:empty { display: none; }
.frm-validador { font-size: 12px; font-style: italic; font-weight: 600; color: #a12622; }
.frm-discreto { color: #c9ced8; font-size: 11px; text-decoration: none; align-self: flex-start; }

@media (max-width: 900px) {
    .frm-form.tres, .frm-form.quatro { grid-template-columns: repeat(2, minmax(0, 190px)); }
    .frm-busca { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .frm-form, .frm-form.tres, .frm-form.quatro, .frm-form.colunas { grid-template-columns: 1fr; }
    .frm-campo.duplo, .frm-campo.triplo { grid-column: auto; }
}