/* ============================================================================
   Painel Agendador — MagoWeb
   Console de operação: status primeiro, leitura densa, dado em monoespaçada.
   ============================================================================ */

:root {
    /* base */
    --ink:        #132030;   /* barra superior, texto forte */
    --ink-2:      #1b2d42;
    --paper:      #eef1f5;   /* fundo de trabalho */
    --surface:    #ffffff;
    --line:       #dde3ec;
    --line-forte: #c6cfdc;
    --texto:      #243244;
    --texto-2:    #5d6b7d;   /* secundário */

    /* sinais de estado */
    --ok:         #107a52;
    --ok-fundo:   #e6f4ed;
    --erro:       #c02a2a;
    --erro-fundo: #fbeaea;
    --espera:     #9a6b08;
    --espera-fundo:#fdf3e0;

    /* ação */
    --acao:       #1f5fa8;
    --acao-escura:#17497f;
    --acao-fundo: #e9f0f9;

    --raio:   6px;
    --raio-g: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--texto);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--acao); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--acao);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------------------------------------------------------------- topo ---- */
.topo {
    background: var(--ink);
    color: #fff;
    height: 54px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topo-esq { display: flex; align-items: center; gap: 26px; min-width: 0; }

.marca {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #fff;
    white-space: nowrap;
}
.marca span { color: #6ea8e0; }

.nav { display: flex; gap: 2px; }
.nav a {
    color: #a9bdd4;
    padding: 7px 13px;
    border-radius: var(--raio);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.nav a.ativo { color: #fff; background: rgba(255,255,255,.14); font-weight: 600; }

.usuario { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: #a9bdd4; }
.usuario .u-nome { color: #cfdcea; }
.usuario a { color: #a9bdd4; }
.usuario a:hover { color: #fff; }

/* ----------------------------------------------------------- container ---- */
.container { max-width: 1180px; margin: 0 auto; padding: 24px 20px 40px; }

/* ---------------------------------------------------------------- barra --- */
.barra {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}
.barra h1 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }

/* -------------------------------------------------- faixa de situação ----- */
/* Substitui os "cards iguais": uma faixa única, dividida, com o número
   grande à esquerda de cada segmento. Clicável = filtro. */
.cards-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--raio-g);
    overflow: hidden;
    margin-bottom: 22px;
}
.card-mini {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 15px 18px;
    border-right: 1px solid var(--line);
    color: var(--texto);
    position: relative;
}
.card-mini:last-child { border-right: none; }
.card-mini:hover { background: #f6f8fb; text-decoration: none; }
.card-mini .cm-num { font-size: 26px; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.card-mini .cm-lbl { font-size: 13px; color: var(--texto-2); }

/* marca de sinal no topo do segmento */
.card-mini::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent;
}
.cm-verde::before   { background: var(--ok); }
.cm-vermelho::before{ background: var(--erro); }
.cm-azul::before    { background: var(--acao); }
.cm-cinza::before   { background: var(--line-forte); }
.cm-verde .cm-num   { color: var(--ok); }
.cm-vermelho .cm-num{ color: var(--erro); }
.cm-azul .cm-num    { color: var(--acao); }
.cm-cinza .cm-num   { color: var(--texto-2); }

/* ----------------------------------------------------------------- card --- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--raio-g);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.card h1, .card h2 { color: var(--ink); margin-top: 0; }
.card h1 { font-size: 20px; font-weight: 650; }
.card h2 { font-size: 16px; font-weight: 650; margin-bottom: 14px; letter-spacing: -.005em; }
.card p { max-width: 68ch; }
.card-filtros { padding: 14px 16px; }

/* -------------------------------------------------------------- filtros --- */
.filtros { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.filtros input[type=text] {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--line-forte);
    border-radius: var(--raio);
    font: inherit;
    font-size: 14px;
}
.filtros select {
    padding: 8px 11px;
    border: 1px solid var(--line-forte);
    border-radius: var(--raio);
    font: inherit;
    font-size: 14px;
    background: var(--surface);
    color: var(--texto);
    cursor: pointer;
}
.filtros input:focus, .filtros select:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-fundo); }

/* -------------------------------------------------------------- botões ---- */
.btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.4;
    cursor: pointer;
    background: var(--acao);
    color: #fff;
    white-space: nowrap;
}
.btn:hover { background: var(--acao-escura); text-decoration: none; color: #fff; }
.btn-verde    { background: var(--ok); }
.btn-verde:hover { background: #0c6242; }
.btn-vermelho { background: var(--erro); }
.btn-vermelho:hover { background: #a02222; }
.btn-cinza    { background: #64748b; }
.btn-cinza:hover { background: #4f5d70; }
.btn-azul     { background: var(--ink-2); }
.btn-azul:hover { background: var(--ink); }
.btn-sm       { padding: 4px 10px; font-size: 13px; }
.btn-outline {
    background: var(--surface);
    color: var(--acao);
    border-color: var(--line-forte);
}
.btn-outline:hover { background: var(--acao-fundo); color: var(--acao-escura); border-color: var(--acao); }

/* ------------------------------------------------------------- tabelas ---- */
table.grid { width: 100%; border-collapse: collapse; background: var(--surface); }
table.grid th {
    padding: 10px 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-2);
    background: #f5f7fa;
    border-bottom: 1px solid var(--line-forte);
    white-space: nowrap;
}
table.grid td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 14px;
}
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover td { background: #f8fafc; }
table.grid td.acoes { text-align: right; white-space: nowrap; }
table.grid td.acoes .btn + .btn { margin-left: 4px; }

/* caminho de arquivo / horário: dado de máquina, monoespaçada ajuda a varrer */
.mono {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--texto-2);
    word-break: break-all;
}

/* ------------------------------------------------------------- sinais ----- */
/* Estado como marca compacta: ponto + palavra, sem pílula pesada. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 550;
    white-space: nowrap;
}
.badge::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.badge-ativa, .badge-ok { color: var(--ok); }
.badge-inativa, .badge-erro { color: var(--erro); }

/* frequência: rótulo em caixa leve, sem ponto */
.badge-tipo {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid var(--line-forte);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--texto-2);
    background: #f5f7fa;
}
.badge-tipo::before { display: none; }

/* ----------------------------------------------------------- formulário --- */
.form-grupo { margin-bottom: 15px; max-width: 620px; }
.form-grupo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--texto); }
.form-grupo input[type=text],
.form-grupo input[type=password],
.form-grupo input[type=time],
.form-grupo input[type=number],
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line-forte);
    border-radius: var(--raio);
    font: inherit;
    font-size: 14px;
    color: var(--texto);
    background: var(--surface);
}
.form-grupo textarea { line-height: 1.55; resize: vertical; }
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus {
    outline: none;
    border-color: var(--acao);
    box-shadow: 0 0 0 3px var(--acao-fundo);
}
.form-grupo .ajuda { font-size: 12.5px; color: var(--texto-2); margin-top: 5px; }
.form-check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.form-check input { width: auto; }

/* --------------------------------------------------------------- avisos --- */
.alerta {
    padding: 12px 15px;
    border-radius: var(--raio);
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid;
    border-left-width: 3px;
}
.alerta-sucesso { background: var(--ok-fundo);   color: #0b5d3e; border-color: #b6ddca; border-left-color: var(--ok); }
.alerta-erro    { background: var(--erro-fundo); color: #8f2020; border-color: #eec4c4; border-left-color: var(--erro); }
.alerta-info    { background: var(--acao-fundo); color: #17497f; border-color: #c5d9ef; border-left-color: var(--acao); }
.alerta ul { margin: 6px 0 0; padding-left: 20px; }
.alerta strong { font-weight: 650; }

/* ---------------------------------------------------------------- login --- */
.login-wrap { max-width: 360px; margin: 14vh auto 0; padding: 0 20px; }
.login-wrap .marca-login {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink);
    margin-bottom: 4px;
}
.login-wrap .marca-login span { color: var(--acao); }
.login-wrap .sub { text-align: center; color: var(--texto-2); font-size: 14px; margin-bottom: 22px; }

/* ------------------------------------------------------------------ log --- */
.log-box {
    background: #101a26;
    color: #ccd6e2;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    padding: 15px 16px;
    border-radius: var(--raio);
    max-height: 540px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.log-box .l-erro   { color: #f19086; }
.log-box .l-ok     { color: #7fce9f; }
.log-box .l-inicio { color: #86bdea; }

/* ---------------------------------------------------------------- modal --- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(12,20,30,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.modal-caixa {
    background: var(--surface);
    border-radius: var(--raio-g);
    width: 100%; max-width: 740px;
    box-shadow: 0 16px 48px rgba(12,20,30,.28);
    overflow: hidden;
}
.modal-cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.modal-caixa .log-box { border-radius: 0; }

/* --------------------------------------------------------------- barras --- */
.barra-wrap { background: #eef1f5; border-radius: 3px; height: 8px; width: 100%; overflow: hidden; }
.barra-fill { background: var(--acao); height: 100%; border-radius: 3px; min-width: 2px; }
.barra-fill.barra-alerta { background: var(--erro); }

/* ------------------------------------------------------------ utilidades -- */
.oculto { display: none !important; }
.rodape { text-align: center; color: var(--texto-2); font-size: 12.5px; margin-top: 26px; }

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 860px) {
    .topo { padding: 0 14px; gap: 10px; }
    .topo-esq { gap: 12px; }
    .nav a { padding: 7px 9px; font-size: 13.5px; }
    .usuario .u-nome { display: none; }
    .container { padding: 18px 14px 32px; }
    table.grid th, table.grid td { padding: 9px 10px; font-size: 13.5px; }
    .esconde-mobile { display: none; }
    .barra h1 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------- estado na própria linha -- */
/* Numa lista de 150+ agendas, o que importa é achar o que quebrou.
   A borda esquerda marca o estado sem poluir a linha inteira. */
table.grid tbody tr td:first-child { border-left: 3px solid transparent; }
table.grid tbody tr.linha-erro td:first-child { border-left-color: var(--erro); }
table.grid tbody tr.linha-inativa td { color: var(--texto-2); }
table.grid tbody tr.linha-inativa td:first-child { border-left-color: var(--line-forte); }
table.grid tbody tr.linha-inativa strong { font-weight: 500; }

/* ============================================================================
   LOGIN — tela dividida
   ============================================================================ */
body.tela-login { background: var(--ink); }

.login-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* ---- lado visual ---- */
.login-lado {
    background: var(--ink);
    color: #fff;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
/* linhas finas de fundo, como uma pauta de horários */
.login-lado::after {
    content: "";
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 54px);
    pointer-events: none;
}
.login-lado > * { position: relative; z-index: 1; }

.login-lado .marca { font-size: 15px; letter-spacing: .14em; }

.ll-meio { max-width: 22ch; }
.ll-meio h1 {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.12;
    font-weight: 650;
    letter-spacing: -.02em;
    margin: 0 0 16px;
    color: #fff;
}
.ll-meio p {
    color: #9db3cc;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 38ch;
}

.ll-rodape { max-width: 460px; }
.ll-relogio { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.llr-hora {
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: #fff;
}
.llr-zona { font-size: 13px; color: #7f96b2; }

/* os 60 minutos da hora: os que já passaram ficam acesos */
.grade-minutos { display: flex; gap: 3px; }
.grade-minutos i {
    flex: 1;
    height: 22px;
    border-radius: 1px;
    background: rgba(255,255,255,.10);
}
.grade-minutos i.passou { background: #4f8fd0; }
.grade-minutos i:last-child.passou,
.grade-minutos i.passou + i:not(.passou) { background: rgba(255,255,255,.10); }
.ll-legenda { font-size: 12px; color: #6d84a0; margin-top: 10px; }

/* ---- lado do formulário ---- */
.login-form {
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}
.lf-caixa { width: 100%; max-width: 330px; }
.lf-caixa h2 {
    font-size: 22px;
    font-weight: 650;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.lf-sub { color: var(--texto-2); font-size: 14px; margin: 0 0 24px; }
.lf-caixa .form-grupo { max-width: none; }
.btn-entrar { width: 100%; padding: 11px; font-size: 15px; margin-top: 4px; }
.lf-rodape { margin-top: 28px; font-size: 12.5px; color: var(--texto-2); text-align: center; }

@media (max-width: 880px) {
    .login-split { grid-template-columns: 1fr; }
    .login-lado { padding: 26px 24px 30px; gap: 24px; }
    .ll-meio h1 { font-size: 26px; }
    .ll-meio p { font-size: 14px; }
    .grade-minutos i { height: 16px; }
    .login-form { padding: 34px 24px 48px; }
}

/* ============================================================================
   PAINEL — visão geral
   ============================================================================ */

/* faixa de sinal do agendador */
.pulso {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-forte);
    border-radius: var(--raio-g);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
}
.pulso .pulso-txt { flex: 1; color: var(--texto-2); }
.pulso strong { color: var(--texto); font-weight: 650; }
.pulso-luz { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pulso-ok { border-left-color: var(--ok); }
.pulso-ok .pulso-luz { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-fundo); }
.pulso-alerta { border-left-color: var(--espera); }
.pulso-alerta .pulso-luz { background: var(--espera); box-shadow: 0 0 0 4px var(--espera-fundo); }

/* duas colunas */
.colunas { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: 18px; align-items: start; }
.col-principal, .col-lateral { min-width: 0; }
.col-lateral .card h2 { font-size: 14.5px; margin-bottom: 12px; }

/* cabeçalho interno de card com tabela */
.card-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--line);
}
.card-cab h2 { font-size: 16px; }

/* estado vazio positivo */
.vazio-ok {
    padding: 22px 20px;
    color: var(--ok);
    font-size: 14px;
    background: var(--ok-fundo);
}

/* medidor de execuções */
.medidor-barra {
    height: 10px;
    background: var(--erro);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 12px;
}
.medidor-ok { height: 100%; background: var(--ok); border-radius: 5px 0 0 5px; }
.medidor-legenda { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--texto-2); }
.medidor-legenda strong { color: var(--texto); font-weight: 650; }
.medidor-legenda .med-erro strong { color: var(--erro); }

/* lista de horários */
.lista-horario { list-style: none; margin: 0; padding: 0; }
.lista-horario li {
    display: flex; gap: 12px; align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}
.lista-horario li:last-child { border-bottom: none; }
.lh-hora { color: var(--acao); font-weight: 500; flex: none; font-size: 13px; }
.lh-nome { color: var(--texto); line-height: 1.35; }

/* linha rótulo/valor */
.linha-info {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--texto-2);
}
.linha-info:last-of-type { border-bottom: none; }
.linha-info strong { color: var(--texto); font-weight: 600; }

/* lista de clientes com barra */
.lista-cliente { list-style: none; margin: 0; padding: 0; }
.lista-cliente li { margin-bottom: 12px; }
.lista-cliente li:last-child { margin-bottom: 0; }
.lc-topo { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.lc-qtd { color: var(--texto-2); font-weight: 600; }
.lc-erro { color: var(--erro); font-weight: 500; }

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

/* estado vazio neutro dentro de tabela */
.vazio-neutro { text-align: center; color: var(--texto-2); padding: 20px; font-size: 13.5px; }
/* rodapé de card com ação */
.card-pe {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 20px; border-top: 1px solid var(--line);
    font-size: 13.5px; color: var(--texto-2);
}

/* ---------------------------------------------------- cobranças de hoje -- */
.barra-sub { font-size: 13.5px; color: var(--texto-2); margin-top: 3px; }
.badge-espera { color: var(--espera); }
.nota-aviso { font-size: 12px; color: var(--espera); margin-top: 2px; }
.barra-acao {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: -6px;
}
.barra-acao-txt { font-size: 13px; color: var(--texto-2); max-width: 70ch; }
.pulso-erro { border-left-color: var(--erro); }
.pulso-erro .pulso-luz { background: var(--erro); box-shadow: 0 0 0 4px var(--erro-fundo); }