:root {
    font-family: Arial, Helvetica, sans-serif;
    color: #172033;
    background: #f2f5fb;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(145deg, #eef3ff, #f9fafc); }
button, input, select, textarea { font: inherit; }

.topo { background: #233876; color: #fff; padding: 18px 24px; }
.topo-conteudo { max-width: 1100px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topo h1 { margin: 0 0 4px; font-size: 24px; }
.topo-acoes { display: flex; gap: 10px; align-items: center; }

.conteudo { width: min(94%, 1100px); margin: 32px auto 60px; }
.login-caixa { width: min(100%, 500px); margin: 45px auto; padding: 30px; background: #fff; border-radius: 22px; box-shadow: 0 14px 45px rgba(25, 40, 80, .13); }
.login-caixa h1 { text-align: center; margin-top: 0; }
.subtitulo { text-align: center; color: #667085; margin-bottom: 28px; }

.usuarios { display: grid; gap: 12px; margin-bottom: 22px; }
.usuario-opcao input { position: absolute; opacity: 0; }
.usuario-cartao { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid #d9dfeb; border-radius: 14px; cursor: pointer; transition: .2s; }
.usuario-opcao input:checked + .usuario-cartao { border-color: #304eaa; background: #edf2ff; }
.avatar { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: #dfe7ff; font-size: 22px; }

.campo { margin-bottom: 16px; }
.campo label, .form-empilhado > label { display: block; margin-bottom: 7px; font-weight: 700; }
.campo input, .campo select, .campo textarea, .form-empilhado input, .form-empilhado select, .controle-linha input { width: 100%; padding: 12px 14px; border: 1px solid #ccd3df; border-radius: 12px; background: #fff; }
.campo input[type="password"], .form-empilhado input[type="password"] { text-align: center; letter-spacing: 6px; }
textarea { resize: vertical; }
small { color: #667085; }

.botao { width: 100%; padding: 12px 17px; border: 0; border-radius: 12px; background: #304eaa; color: #fff; font-weight: 700; cursor: pointer; }
.botao:hover { filter: brightness(.95); }
.botao-secundario { width: auto; background: transparent; border: 1px solid rgba(255,255,255,.65); }
.botao-claro { width: auto; background: #fff; color: #233876; }
.botao-sucesso { background: #198754; }
.botao-perigo { background: #bd3434; }
.botao-aviso { background: #b7791f; }

.alerta { margin-bottom: 18px; padding: 13px 16px; border-radius: 10px; }
.alerta-erro { background: #ffe8e8; color: #9d2020; }
.alerta-sucesso { background: #e8f8ee; color: #166534; }
.semana { margin-bottom: 24px; padding: 15px 18px; background: #fff; border-radius: 14px; color: #586174; box-shadow: 0 4px 16px rgba(25, 40, 80, .05); }
.separador { margin: 0 8px; }
.uso-liberado { color: #15803d; font-weight: 700; }
.uso-bloqueado { color: #a15b00; font-weight: 700; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.grade-filho { align-items: start; }
.cartao { padding: 22px; background: #fff; border-radius: 18px; box-shadow: 0 7px 25px rgba(25, 40, 80, .08); }
.cartao h2, .cartao h3 { margin-top: 0; }
.cartao-titulo-linha, .pedido-cabecalho { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.saldo { margin: 12px 0 7px; color: #304eaa; font-size: 31px; font-weight: 800; }
.secao { margin-top: 34px; }
.mensagem-vazia { color: #667085; }
.texto-alerta { color: #9d2020; }

.lista-pedidos { display: grid; gap: 16px; }
.pedido-cartao { padding: 20px; }
.pedido-cabecalho h3 { margin: 5px 0 0; }
.etiqueta { display: inline-block; padding: 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.status-pendente { background: #fff2d7; color: #9a5b00; }
.status-aprovado { background: #dcfce7; color: #166534; }
.status-recusado { background: #fee2e2; color: #991b1b; }
.aviso-inline { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #fff7e6; color: #8a5300; }
.observacao { margin-top: 12px; padding: 12px; background: #f3f5f9; border-radius: 10px; }

.form-grade { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: end; margin-top: 18px; }
.form-empilhado { display: grid; gap: 12px; }
.form-empilhado > label { margin: 0; }
.acoes { grid-column: 1 / -1; display: flex; gap: 10px; }
.acoes form { flex: 1; }
.acoes .botao { min-width: 130px; }
.controle-linha { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid #e5e7eb; }
.controle-linha:last-child { border-bottom: 0; }

.sessao-card { text-align: center; }
.cronometro { font-size: clamp(38px, 9vw, 64px); font-weight: 800; letter-spacing: 2px; color: #233876; margin: 10px 0; }

.filtros { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.filtros .campo { margin: 0; }
.resumo-grade { margin-bottom: 18px; }
.resumo-lista { margin: 0; }
.resumo-lista > div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-bottom: 1px solid #eef0f4; }
.resumo-lista dt { color: #667085; }
.resumo-lista dd { margin: 0; font-weight: 700; }

.tabela-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 11px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
th { color: #475467; font-size: 14px; }
.tempo-positivo { color: #15803d; font-weight: 700; }
.tempo-negativo { color: #b42318; font-weight: 700; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
    .topo-conteudo { align-items: flex-start; flex-direction: column; }
    .topo-acoes { width: 100%; }
    .topo-acoes .botao { flex: 1; }
    .login-caixa { padding: 22px; }
    .form-grade, .filtros { grid-template-columns: 1fr; }
    .acoes { grid-column: auto; flex-direction: column; }
    .acoes .botao { width: 100%; }
    .pedido-cabecalho { flex-direction: column; }
}


/* V7 — telas separadas para ganhar e usar tempo */
.resumo-saldo-filho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
}

.resumo-saldo-filho p {
    max-width: 560px;
    margin: 0;
    color: #667085;
}

.rotulo-menor {
    display: block;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.menu-filho {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.menu-filho-link {
    display: block;
    padding: 13px 15px;
    border: 1px solid #ccd3df;
    border-radius: 12px;
    background: #fff;
    color: #304eaa;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.menu-filho-link.ativo {
    border-color: #304eaa;
    background: #304eaa;
    color: #fff;
}

.grade-acoes-filho {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.atalho-filho {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 170px;
    color: inherit;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform .15s ease, border-color .15s ease;
}

.atalho-filho:hover {
    transform: translateY(-2px);
    border-color: #304eaa;
}

.atalho-filho.atalho-usar {
    border-color: #b9dfc7;
}

.atalho-icone {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    background: #edf2ff;
    font-size: 28px;
}

.titulo-com-voltar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.titulo-com-voltar h2 {
    margin: 4px 0 0;
}

.link-voltar {
    color: #304eaa;
    font-weight: 700;
    text-decoration: none;
}

.explicacao-fluxo {
    color: #586174;
}

.secao-destacada {
    scroll-margin-top: 20px;
}

@media (max-width: 700px) {
    .resumo-saldo-filho {
        align-items: flex-start;
        flex-direction: column;
    }

    .menu-filho {
        grid-template-columns: 1fr;
    }

    .grade-acoes-filho {
        grid-template-columns: 1fr;
    }

    .atalho-filho {
        min-height: auto;
    }
}