/* ===== Fluxo de Caixa Kumon — estilo ===== */
:root {
    --azul: #00A0DF;          /* azul Kumon */
    --azul-escuro: #0077a8;
    --verde: #1a9e5c;
    --vermelho: #d9433b;
    --fundo: #f2f6f9;
    --texto: #243340;
    --borda: #d8e2ea;
    --branco: #ffffff;
    --raio: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    font-size: 16px;
}

h1, h2 { margin: 0 0 .5rem; }

/* ===== Login / telas centradas ===== */
.tela-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.card-login {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: 0 8px 30px rgba(0, 60, 100, .12);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.card-login .logo { font-size: 3rem; }
.card-login h1 { color: var(--azul-escuro); }
.card-login .sub { color: #6b7c8a; margin-top: 0; }
.card-login form { text-align: left; margin-top: 1.5rem; }

/* ===== Formulários ===== */
label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 1rem;
}

input, select {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .65rem .75rem;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--branco);
}

input:focus, select:focus {
    outline: 2px solid var(--azul);
    border-color: var(--azul);
}

.botao {
    display: inline-block;
    width: auto;
    background: var(--azul);
    color: var(--branco);
    border: none;
    border-radius: 8px;
    padding: .7rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.card-login .botao { width: 100%; }
.botao:hover { background: var(--azul-escuro); }
.botao.secundario { background: #5d6f7d; }
.botao.secundario:hover { background: #46535e; }
.botao.exportar { background: var(--verde); }
.botao.exportar:hover { background: #14794a; }

.alerta {
    border-radius: 8px;
    padding: .8rem 1rem;
    margin: 1rem 0;
    font-weight: 600;
}
.alerta.erro { background: #fde8e7; color: #97231d; }
.alerta.sucesso { background: #e2f6ec; color: #11633c; }
.alerta.info { background: #e3f3fb; color: #0a557a; font-weight: 400; }

/* ===== Topo ===== */
.topo {
    background: var(--azul);
    color: var(--branco);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .8rem 1.2rem;
}

.topo-titulo { display: flex; align-items: center; gap: .7rem; }
.topo h1 { font-size: 1.25rem; margin: 0; }
.topo small { opacity: .9; }
.logo-mini { font-size: 1.8rem; }

.topo nav a {
    color: var(--branco);
    text-decoration: none;
    font-weight: 600;
    margin-left: 1rem;
}
.topo nav a:hover { text-decoration: underline; }

/* ===== Conteúdo ===== */
main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.2rem;
}

.titulo-mes { color: var(--azul-escuro); margin: 1.2rem 0 .8rem; }

.filtros {
    background: var(--branco);
    border-radius: var(--raio);
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 60, 100, .06);
}
.filtros label { margin-bottom: 0; flex: 1 1 160px; }
.filtros .botao { flex: 0 0 auto; }

/* ===== Cartões de resumo ===== */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.cartao {
    background: var(--branco);
    border-radius: var(--raio);
    padding: 1.1rem 1.3rem;
    box-shadow: 0 2px 8px rgba(0, 60, 100, .06);
    border-top: 5px solid var(--borda);
}
.cartao span { color: #6b7c8a; font-weight: 600; }
.cartao strong { display: block; font-size: 1.6rem; margin-top: .3rem; }
.cartao.entrada { border-top-color: var(--verde); }
.cartao.entrada strong { color: var(--verde); }
.cartao.saida { border-top-color: var(--vermelho); }
.cartao.saida strong { color: var(--vermelho); }
.cartao.saldo { border-top-color: var(--azul); }
.cartao.saldo strong { color: var(--azul-escuro); }
.cartao.saldo.negativo strong { color: var(--vermelho); }

/* ===== Painéis ===== */
.painel {
    background: var(--branco);
    border-radius: var(--raio);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 60, 100, .06);
}

.linha-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem 1rem;
    align-items: end;
}
.linha-form label { margin-bottom: 0; }

.tipo-toggle {
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: .4rem .8rem .6rem;
    margin: 0;
}
.tipo-toggle legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.tipo-toggle label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0 .8rem 0 0;
    font-weight: 600;
}
.tipo-toggle input { width: auto; margin: 0; }
.opcao-entrada { color: var(--verde); }
.opcao-saida { color: var(--vermelho); }

.acoes-form { margin-top: 1rem; display: flex; gap: .8rem; }
.oculto { display: none; }

/* ===== Painel do dia/semana ===== */
.painel-dia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}
.bloco-dia h3 { margin: 0 0 .4rem; color: var(--azul-escuro); font-size: 1rem; }
.bloco-dia p { margin: .2rem 0; }
.bloco-dia .entrada { color: var(--verde); }
.bloco-dia .pendente { color: #b07a00; }

/* ===== Pendências ===== */
.cartao.pendente-receber { border-top-color: #e8a800; }
.cartao.pendente-receber strong { color: #b07a00; }
.cartao.pendente-pagar { border-top-color: #c77b00; }
.cartao.pendente-pagar strong { color: #9c5700; }

.linha-pendente { background: #fff8e6; }
.linha-encerrada { opacity: .55; }

.selo.aguardando { background: #fff1cc; color: #8a6100; }
.selo.confirmado { background: #e2f6ec; color: var(--verde); }
.selo.ativa { background: #e2f6ec; color: var(--verde); }
.selo.encerrada { background: #ececec; color: #666; }

.botao.confirmar {
    background: var(--verde);
    padding: .35rem .7rem;
    font-size: .85rem;
}
.botao.confirmar:hover { background: #14794a; }

.form-inline { display: inline; }

/* ===== Tabela ===== */
.tabela-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td {
    text-align: left;
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
td:nth-child(4) { white-space: normal; }
th { color: #6b7c8a; font-size: .85rem; text-transform: uppercase; }
.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
td.num.entrada { color: var(--verde); }
td.num.saida { color: var(--vermelho); }

.selo {
    display: inline-block;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 700;
    padding: .15rem .6rem;
}
.selo.entrada { background: #e2f6ec; color: var(--verde); }
.selo.saida { background: #fde8e7; color: var(--vermelho); }

.acoes { text-align: right; white-space: nowrap; }

.icone {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: .2rem .35rem;
    border-radius: 6px;
}
.icone:hover { background: var(--fundo); }

.vazio { color: #6b7c8a; }

/* ===== Celular ===== */
@media (max-width: 600px) {
    body { font-size: 15px; }
    .topo nav a { margin-left: .6rem; }
    .cartao strong { font-size: 1.3rem; }
    .filtros .botao { width: 100%; }
}