/* ============================================================
   Ordem de Carga - Estilos globais
   Layout ERP com sidebar fixo + topbar + conteudo
   Icones: Bootstrap Icons (CDN)
   ============================================================ */

:root {
    --navy:        #0f2a5c;
    --navy-light:  #16397a;
    --blue:        #1e6fd9;
    --bg:          #f4f6f9;
    --card:        #ffffff;
    --border:      #e2e6ec;
    --text:        #1f2937;
    --muted:       #6b7280;
    --verde:       #16a34a;
    --vermelho:    #dc2626;
    --ambar:       #f59e0b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
}

/* ============ ACESSIBILIDADE ============ */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============ LOGIN ============ */
.pagina-login {
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-container { width: 100%; max-width: 420px; padding: 20px; }
.login-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
}
.login-logo {
    font-size: 56px;
    color: var(--navy);
    margin-bottom: 12px;
}
.login-card h1 { color: var(--navy); font-size: 24px; margin-bottom: 4px; }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }

.form-login { text-align: left; }
.form-login label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 4px;
    margin-top: 12px;
}
.form-login input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
.form-login input:focus { border-color: var(--blue); }
.btn-primario {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.btn-primario:hover { background: var(--navy-light); }
.login-hint { margin-top: 16px; font-size: 11px; color: #94a3b8; }

/* ============ LAYOUT ============ */
.layout { display: flex; min-height: 100vh; }

/* ---------- SIDEBAR ESTATICA ---------- */
.sidebar {
    width: 56px;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 20px;
    color: #cfe0ff;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.sidebar-logo {
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    margin-bottom: 8px;
    transition: 0.15s;
}
.sidebar-logo:hover { color: #cfe0ff; }

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.sidebar-bottom {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #cfe0ff;
    text-decoration: none;
    font-size: 18px;
    border-radius: 8px;
    opacity: 0.85;
    transition: 0.15s;
}
.sidebar-link:hover {
    background: var(--navy-light);
    opacity: 1;
    color: #fff;
}
.sidebar-link.ativo {
    background: var(--blue);
    color: #fff;
    opacity: 1;
}

/* ---------- CONTEUDO WRAPPER ---------- */
.conteudo-wrapper {
    margin-left: 56px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- TOPBAR ---------- */
.topbar {
    height: 54px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 13px;
    color: var(--navy);
    flex-shrink: 0;
}
.topbar-empresa {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.topbar-empresa i { font-size: 16px; }
.topbar-acoes { display: flex; gap: 10px; }
.topbar-btn {
    background: #eef2f8;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.topbar-btn i { font-size: 14px; }

/* ---------- ABAS ---------- */
.abas-topo {
    background: #fff;
    padding: 10px 20px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.aba {
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    cursor: pointer;
    color: var(--muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.aba:hover { color: var(--navy); }
.aba.ativa {
    background: var(--bg);
    color: var(--navy);
    font-weight: 600;
    border: 1px solid var(--border);
    border-bottom: none;
}

/* ---------- MAIN ---------- */
.conteudo {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

/* ---------- RODAPE ---------- */
.rodape {
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 10px 24px;
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    flex-shrink: 0;
}

/* ============ TITULO DE PAGINA ============ */
.titulo-pagina {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.titulo-pagina .ajuda {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--navy);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
    transition: 0.15s;
}
.titulo-pagina .ajuda:hover {
    background: var(--navy);
    color: #fff;
}

/* ============================================================
   BARRA DE FILTROS (clientes / produtos)
   ============================================================ */
.filtros {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    display: flex;
    align-items: stretch;
    margin-bottom: 16px;
    overflow: hidden;
    height: 52px;
}
.filtros .campo-busca {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-right: 1px solid var(--border);
}
.filtros .campo-busca input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    padding: 0;
    height: 100%;
}
.filtros .campo-busca input::placeholder { color: #9ca3af; }
.filtros .campo-select {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 16px;
    border-right: 1px solid var(--border);
}
.filtros .campo-select label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 2px 0;
    line-height: 1;
}
.filtros .campo-select select {
    border: none;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 0;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.427 6.427a.75.75 0 0 1 1.06 0L8 8.94l2.513-2.513a.75.75 0 1 1 1.06 1.06l-3.043 3.044a.75.75 0 0 1-1.06 0L4.427 7.487a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 14px;
    padding-right: 20px;
}
.filtros .btn-buscar {
    flex: 0 0 64px;
    background: #eef2f8;
    border: none;
    cursor: pointer;
    color: var(--navy);
    font-size: 18px;
    transition: 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filtros .btn-buscar:hover { background: #dde7f2; }

/* ============================================================
   BARRA DE FILTROS - HISTORICO / CONTAS A RECEBER
   ============================================================ */
.filtros-hist {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    min-height: 52px;
}
.filtros-hist .campo-data {
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 12px;
    border-right: 1px solid var(--border);
}
.filtros-hist .campo-data label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 2px 0;
    line-height: 1;
}
.filtros-hist .campo-data input[type="date"] {
    border: none;
    outline: none;
    font-size: 12px;
    font-family: inherit;
    background: transparent;
    color: var(--text);
    padding: 0;
    width: 100%;
}
.filtros-hist .campo-select {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 12px;
    border-right: 1px solid var(--border);
}
.filtros-hist .campo-select label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 2px 0;
    line-height: 1;
}
.filtros-hist .campo-select select {
    border: none;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 0;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.427 6.427a.75.75 0 0 1 1.06 0L8 8.94l2.513-2.513a.75.75 0 1 1 1.06 1.06l-3.043 3.044a.75.75 0 0 1-1.06 0L4.427 7.487a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 14px;
    padding-right: 20px;
}
.filtros-hist .campo-ocn {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 12px;
    border-right: 1px solid var(--border);
}
.filtros-hist .campo-ocn label {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 2px 0;
    line-height: 1;
}
.filtros-hist .campo-ocn input {
    border: none;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    background: transparent;
    color: var(--text);
    padding: 0;
    width: 100%;
}
.filtros-hist .campo-busca {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-right: 1px solid var(--border);
}
.filtros-hist .campo-busca input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    padding: 0;
    height: 100%;
}
.filtros-hist .campo-busca input::placeholder { color: #9ca3af; }
.filtros-hist .btn-buscar {
    flex: 0 0 60px;
    background: #eef2f8;
    border: none;
    cursor: pointer;
    color: var(--navy);
    font-size: 18px;
    transition: 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filtros-hist .btn-buscar:hover { background: #dde7f2; }
.filtros-hist .btn-limpar {
    flex: 0 0 44px;
    background: #fee2e2;
    border: none;
    cursor: pointer;
    color: var(--vermelho);
    font-size: 14px;
    transition: 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-left: 1px solid var(--border);
}
.filtros-hist .btn-limpar:hover { background: #fecaca; }

/* ============ BARRA DE BUSCA SIMPLES ============ */
.barra-busca {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    height: 46px;
}
.barra-busca input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 18px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    min-width: 0;
}
.barra-busca input[type="text"]::placeholder { color: #9ca3af; }
.barra-busca button {
    flex: 0 0 64px;
    border: none;
    background: #eef2f8;
    color: var(--navy);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border-left: 1px solid var(--border);
    font-family: inherit;
}
.barra-busca button:hover { background: #dde7f2; }

/* ============================================================
   CARDS DE TOTAIS
   ============================================================ */
.cards-totais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.card-total {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-total-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.card-total-valor {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}
.card-total-qtd {
    font-size: 11px;
    color: var(--muted);
}
.card-total.vencido {
    border-left-color: var(--vermelho);
    background: #fef2f2;
}
.card-total.vencido .card-total-valor { color: var(--vermelho); }
.card-total.vence-hoje {
    border-left-color: var(--ambar);
    background: #fffbeb;
}
.card-total.vence-hoje .card-total-valor { color: #b45309; }
.card-total.a-vencer {
    border-left-color: var(--blue);
    background: #eff6ff;
}
.card-total.a-vencer .card-total-valor { color: var(--blue); }
.card-total.recebido {
    border-left-color: var(--verde);
    background: #f0fdf4;
}
.card-total.recebido .card-total-valor { color: var(--verde); }
.card-total.cancelado {
    border-left-color: #94a3b8;
    background: #f8fafc;
}
.card-total.cancelado .card-total-valor { color: #64748b; }

/* ============================================================
   ATALHOS DE PERIODO
   ============================================================ */
.atalhos-periodo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.btn-atalho {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    font-family: inherit;
    transition: 0.15s;
}
.btn-atalho:hover {
    background: #eef2f8;
    border-color: #c9d3e0;
}

/* ============ TOOLBAR ============ */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.toolbar select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}
.toolbar-acoes { display: flex; gap: 8px; }

/* ============ BOTOES ============ */
.btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--navy);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: inherit;
    transition: 0.15s;
}
.btn:hover { background: #f5f8fc; border-color: #c9d3e0; }
.btn i { font-size: 14px; }
.btn-soft { background: #eef3f9; color: var(--navy); border-color: #eef3f9; }
.btn-soft:hover { background: #dde7f2; }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-light); border-color: var(--navy-light); }
.btn-marrom { background: #8B4513; color: #fff; border-color: #8B4513; }
.btn-marrom:hover { background: #A0522D; border-color: #A0522D; }
.btn-perigo { background: #8B0000; color: #fff; border-color: #8B0000; }
.btn-perigo:hover { background: #660000; border-color: #660000; }
.btn-sucesso { background: var(--verde); color: #fff; border-color: var(--verde); }
.btn-sucesso:hover { background: #166534; border-color: #166534; }

/* ============ TABELA ============ */
.tabela-wrapper {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.tabela {
    width: 100%;
    border-collapse: collapse;
}
.tabela thead th {
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    background: #fff;
}
.tabela tbody td {
    padding: 11px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: #f9fbff; }
.tabela tbody tr.warn { background: #fffbeb; }
.tabela tbody tr.warn:hover { background: #fef3c7; }
.tabela tbody tr.linha-vencida { background: #fef2f2; }
.tabela tbody tr.linha-vencida:hover { background: #fee2e2; }
.tabela .linha-vazia {
    text-align: center;
    color: var(--muted);
    padding: 30px;
}
.tabela input[type="text"],
.tabela input[type="number"] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    outline: none;
    width: 100%;
}
.tabela input:focus { border-color: var(--blue); }

.acoes-linha { display: flex; gap: 4px; }
.btn-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--blue);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.15s;
}
.btn-icon:hover { background: #eef3f9; }
.btn-icon-perigo { color: var(--vermelho); }
.btn-icon-perigo:hover { background: #fee2e2; }

/* ============ BADGES ============ */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}
.badge-ok     { background: #dcfce7; color: var(--verde); }
.badge-warn   { background: #fef3c7; color: #b45309; }
.badge-info   { background: #dbeafe; color: #1d4ed8; }
.badge-danger { background: #fee2e2; color: var(--vermelho); }
.badge-muted  { background: #f1f5f9; color: #64748b; }

/* ============ FLASH ============ */
.flash {
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}
.flash-ok    { background: #dcfce7; color: var(--verde); }
.flash-erro  { background: #fee2e2; color: var(--vermelho); }
.flash-aviso { background: #fef3c7; color: #b45309; }
.flashes { padding: 12px 24px 0; }

/* ============ FORMULARIOS ============ */
.form-grupo { margin-bottom: 14px; }
.form-grupo label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 4px;
}
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: #fff;
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus { border-color: var(--blue); }
.form-linha {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.form-linha .form-grupo { flex: 1; min-width: 180px; }

/* ============ CARD ============ */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 14px;
}

/* ============ SECOES ============ */
.secao-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.secao-titulo i { font-size: 18px; }
.secao-titulo small {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    margin-left: auto;
    max-width: 60%;
    text-align: right;
    line-height: 1.3;
}
.form-hint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    display: block;
}

/* ============ RODAPE DE ACOES ============ */
.acoes-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.acoes-rodape .btn-novo {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    font-weight: 700;
}
.acoes-rodape .btn-novo:hover { background: var(--navy-light); }

/* ============ HOME ============ */
.home-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: #eef3f9;
    padding: 4px;
    border-radius: 10px;
    width: max-content;
}
.home-tabs .tab {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
}
.home-tabs .tab.ativo {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.home-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 16px;
}
.home-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 10px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: 0.15s;
}
.home-card:nth-child(3n) { border-right: none; }
.home-card:nth-child(n+4) { border-bottom: none; }
.home-card:hover .home-card-icon {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.home-card-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    border: 2px solid var(--navy);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
    transition: 0.2s;
    background: #fff;
}
.home-card-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
}

/* ============================================================
   CONTROLE DE DESPESAS - tabela editavel
   ============================================================ */
.tabela-input {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.tabela-input th,
.tabela-input td {
    border: 1px solid var(--border);
    padding: 4px 6px;
    font-size: 12px;
    vertical-align: middle;
}
.tabela-input th {
    background: #f1f5f9;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.tabela-input tbody td { padding: 2px 4px; }
.tabela-input tbody input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: inherit;
    padding: 4px;
    background: transparent;
}
.tabela-input tbody input:focus {
    background: #f9fbff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--blue);
}
.tabela-input tbody input.num { text-align: right; }
.tabela-input tfoot td {
    padding: 6px 8px;
    font-size: 12px;
    background: #f8fafc;
    font-weight: 700;
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.dash-kpi {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    border-radius: 10px;
    padding: 14px 16px;
}
.dash-kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.dash-kpi-valor {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}
.dash-kpi-delta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

.dash-alertas {
    margin-bottom: 16px;
}
.dash-alerta-ok {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: var(--verde);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-alertas-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-alerta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.15s;
}
.dash-alerta-item.vermelho {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--vermelho);
}
.dash-alerta-item.ambar {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
}
.dash-alerta-item:hover {
    filter: brightness(0.97);
}

.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.dash-painel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.dash-painel-titulo {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-tabela-wrapper {
    max-height: 320px;
    overflow-y: auto;
}
.dash-tabela-wrapper .tabela thead th {
    position: sticky;
    top: 0;
    background: #f9fbff;
    z-index: 1;
}
.dash-vazio {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1024px) {
    .home-cards { grid-template-columns: repeat(2, 1fr); }
    .home-card {
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
    .home-card:nth-child(2n) { border-right: none; }
    .home-card:nth-child(n+5) { border-bottom: none; }
    .home-card:nth-child(3n) { border-right: 1px solid var(--border); }
    .home-card:nth-child(4) { border-right: none; }

    .filtros-hist {
        flex-wrap: wrap;
        min-height: auto;
    }
    .filtros-hist .campo-data,
    .filtros-hist .campo-select,
    .filtros-hist .campo-ocn {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .filtros-hist .campo-busca {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .filtros-hist .btn-buscar,
    .filtros-hist .btn-limpar {
        flex: 1 1 50%;
        min-height: 44px;
    }

    .cards-totais { grid-template-columns: repeat(2, 1fr); }
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
    .dash-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .filtros { flex-direction: column; align-items: stretch; height: auto; }
    .filtros .campo-busca,
    .filtros .campo-select {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .filtros .btn-buscar { width: 100%; padding: 12px; }

    .home-cards { grid-template-columns: 1fr; padding: 16px 12px; }
    .home-card {
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        padding: 20px 10px;
    }
    .home-card:last-child { border-bottom: none; }

    .form-linha { flex-direction: column; }
    .secao-titulo small { margin-left: 0; max-width: 100%; text-align: left; }

    .cards-totais { grid-template-columns: 1fr; }
    .atalhos-periodo { flex-direction: column; }
    .btn-atalho { width: 100%; text-align: center; }
    .dash-kpis { grid-template-columns: 1fr; }
}