* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #dfe3e8;
    color: #1f2937;
}

a {
    text-decoration: none;
}

.pagina {
    padding: 20px;
}

.layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 18px;
    align-items: start;
}

.menu {
    background: #eda626;
    border-radius: 18px;
    padding: 16px;
    min-height: calc(100vh - 40px);
}

.brand-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.brand-logo-card {
    background: #1457a6;
    border-radius: 18px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.brand-logo-img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
}

.brand-texto {
    padding: 4px 4px 0;
}

.brand-titulo {
    font-size: 26px;
    font-weight: 800;
    color: #163256;
    letter-spacing: -0.02em;
}

.brand-subtitulo {
    margin-top: 4px;
    font-size: 12px;
    color: #7a5a14;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.usuario-bloco {
    background: white;
    border-radius: 16px;
    padding: 14px;
    margin-top: 14px;
}

.modulo-resumo {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.modulo-resumo-label {
    color: #7a5a14;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.modulo-resumo-nome {
    margin-top: 6px;
    color: #163256;
    font-size: 18px;
    font-weight: 800;
}

.modulo-resumo-texto {
    margin-top: 8px;
    color: #344054;
    font-size: 13px;
    line-height: 1.45;
}

.usuario-nome {
    font-weight: 700;
    color: #1f2937;
}

.usuario-perfil {
    margin-top: 6px;
    color: #1457a6;
    font-size: 14px;
    font-weight: 700;
}

.texto-muted {
    color: #6b7280;
}

.menu-link {
    display: block;
    margin-top: 12px;
    width: 100%;
    border: none;
    border-radius: 14px;
    background: #2a65b3;
    color: white;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 14px;
}

.menu-link.sair {
    background: #c53030;
}

.menu-link.ativo {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

.card {
    background: #f5f5f5;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

.card-azul {
    background: #1457a6;
    color: white;
}

.topo {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    margin-bottom: 14px;
}

.titulo-pagina {
    margin: 0;
    font-size: 28px;
    color: #24364d;
}

.card-azul .titulo-pagina {
    color: white;
}

.resumo-valor {
    font-size: 34px;
    font-weight: 700;
    margin-top: 12px;
}

.cards-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.card-mini {
    background: white;
    border-radius: 16px;
    padding: 16px;
}

.card-mini .numero {
    font-size: 28px;
    font-weight: 700;
    margin-top: 8px;
}

.flash {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-weight: 700;
}

.flash.erro {
    background: #fee2e2;
    color: #991b1b;
}

.flash.ok {
    background: #dcfce7;
    color: #166534;
}

.topbar-modulos {
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20, 87, 166, 0.08) 0%, rgba(237, 166, 38, 0.14) 100%);
    border: 1px solid #dce6f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.topbar-modulos-titulo {
    color: #163256;
    font-size: 18px;
    font-weight: 800;
}

.topbar-modulos-subtitulo {
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
}

.topbar-modulos-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-modulo-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d8e4f0;
    color: #163256;
    font-weight: 700;
}

.topbar-modulo-pill.ativo.tema-hub {
    background: #fff3d6;
    border-color: #eda626;
}

.topbar-modulo-pill.ativo.tema-ponto {
    background: #eaf2ff;
    border-color: #1457a6;
}

.topbar-modulo-pill.ativo.tema-gastos {
    background: #ebf9ef;
    border-color: #1f8f4d;
}

.topbar-modulo-icone,
.topbar-modulo-icone svg {
    width: 18px;
    height: 18px;
}

.topbar-modulo-icone svg {
    fill: currentColor;
}

.grid-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.grid-form-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.campo label {
    display: block;
    color: #24364d;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.card-azul .campo label {
    color: #ffcf31;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    border: 1px solid #b6c3d3;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 16px;
    background: white;
}

.campo textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
}

.botao-azul {
    background: #1457a6;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.botao-claro {
    background: #fdeeee;
    color: #d13d3d;
    border: 1px solid #efb8b8;
    border-radius: 10px;
    padding: 10px 14px;
    display: inline-block;
}

.botao-claro:hover,
.botao-azul:hover,
.menu-link:hover {
    opacity: 0.92;
}

.tabela-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

th {
    text-align: left;
    padding: 14px 10px;
    border-bottom: 1px solid #bfc5cc;
    color: #ea1d1d;
    font-size: 14px;
    font-weight: 400;
}

td {
    padding: 16px 10px;
    border-bottom: 1px solid #d4d8dd;
    font-size: 14px;
}

.saldo {
    font-weight: 700;
}

.login-body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #1457a6, #eda626);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    background: white;
    border-radius: 18px;
    padding: 24px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.login-card .titulo-pagina {
    margin-bottom: 18px;
}

.login-card .campo {
    margin-bottom: 14px;
}

.login-card .botao-azul {
    width: 100%;
}

.box-info {
    border-radius: 14px;
    padding: 16px;
    margin-top: 18px;
    background: #eff6ff;
}

.mt-16 {
    margin-top: 16px;
}

.mb-14 {
    margin-bottom: 14px;
}


.pagina-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.titulo-com-icone {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icone-pagina,
.icone-secao,
.icone-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icone-pagina {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1457a6;
}

.icone-secao {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1457a6;
}

.icone-botao {
    width: 18px;
    height: 18px;
}

.icone-pagina svg,
.icone-secao svg,
.icone-botao svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.icone-secao svg {
    width: 18px;
    height: 18px;
}

.botao-com-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.secao-topo-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.secao-topo-inline h2,
.secao-topo-inline h3 {
    margin: 0;
}

.botao-claro.botao-com-icone,
.botao-azul.botao-com-icone {
    white-space: nowrap;
}

.login-brand-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.login-brand-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: #1457a6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.login-brand-logo img {
    width: 100%;
    height: auto;
}

.login-brand-texto strong {
    display: block;
    font-size: 24px;
    color: #163256;
}

.login-brand-texto span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
}


.center {
    text-align: center;
}

@media (max-width: 1200px) {
    .grid-form,
    .grid-form-3,
    .cards-mini {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .pagina {
        padding: 12px;
    }

    .layout,
    .topo {
        grid-template-columns: 1fr;
    }

    .menu {
        min-height: auto;
    }

    .topbar-modulos {
        padding: 14px;
    }
}
.acoes-colaborador {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.acao-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #d5dce5;
    background: #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.acao-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.acao-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(20, 87, 166, 0.14);
}

.acao-btn.editar {
    color: #1457a6;
    border-color: #b7cdee;
    background: #eef5ff;
}

.acao-btn.editar:hover {
    background: #dfeeff;
    border-color: #93b7ea;
}

.acao-btn.detalhes {
    color: #0f766e;
    border-color: #b7e3df;
    background: #ecfdfb;
}

.acao-btn.detalhes:hover {
    background: #d6fbf6;
    border-color: #8ed8d1;
}

.acao-btn.desativar {
    color: #b42318;
    border-color: #f2c0bb;
    background: #fff1f0;
}

.acao-btn.desativar:hover {
    background: #ffe3e0;
    border-color: #e79a91;
}

.acao-btn.desabilitado {
    color: #98a2b3;
    border-color: #d0d5dd;
    background: #f2f4f7;
    cursor: not-allowed;
}
.menu-nav {
    margin-top: 14px;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-link-icone {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-link-icone svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.menu-link-label {
    flex: 1;
}

@media (max-width: 1100px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .menu {
        min-height: auto;
    }
}