/* Mentorias Acadêmicas — tema azul da Mentoria Educacional + amarelo nos detalhes.
   Para experimentar outra identidade visual, comece pelos tokens abaixo. */
:root {
  --marca: #124A74;
  --marca-forte: #0D3A5C;
  --marca-escura: #0B2C47;
  --marca-suave: #E7EEF5;
  --destaque: #EBA30C;

  --fundo: #F7F8FA;
  --cartao: #FFFFFF;
  --tinta: #1B2835;
  --tinta-sub: #637282;
  --linha: #E1E6EC;

  --ok: #2F7A55;
  --ok-suave: #E6F2EB;
  --alerta: #B4581F;
  --alerta-suave: #FBEDE2;
  --perigo: #B3261E;

  --raio: 14px;
  --sombra: 0 1px 2px rgba(10, 39, 64, 0.04), 0 8px 24px rgba(10, 39, 64, 0.06);
  --fonte: "IBM Plex Sans", system-ui, sans-serif;
  --fonte-titulo: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

.ic { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; }

/* ---------- Botões e campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:disabled { opacity: .6; cursor: default; }
/* Foco pelo teclado no azul do sistema (não o contorno preto do navegador). */
.btn:focus { outline: none; }
.btn:focus-visible, .icone-btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.icone-btn:focus:not(:focus-visible) { outline: none; }
.btn-pri { background: var(--marca); color: #fff; }
.btn-pri:hover:not(:disabled) { background: var(--marca-forte); }
.btn-sec { background: transparent; color: var(--tinta); border-color: var(--linha); }
.btn-sec:hover:not(:disabled) { background: var(--marca-suave); }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-peq { padding: 7px 12px; font-size: 13px; }
.btn-bloco { width: 100%; }

.icone-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--tinta-sub); cursor: pointer;
}
.icone-btn:hover { background: var(--marca-suave); color: var(--marca); }
.icone-btn.perigo:hover { background: #FBE9E7; color: var(--perigo); }
.icone-btn .ic { width: 17px; height: 17px; }
/* Ação principal (Finalizar): o único botão preenchido. */
.icone-btn.principal { background: var(--marca); color: #fff; }
.icone-btn.principal:hover { background: var(--marca-forte); color: #fff; }

/* Legenda dos botões de ícone, no hover (mais rápida que o title nativo). */
.icone-btn[data-dica] { position: relative; }
@media (hover: hover) {
  .icone-btn[data-dica]:hover::after {
    content: attr(data-dica); position: absolute; bottom: calc(100% + 7px); left: 50%;
    transform: translateX(-50%); padding: 4px 9px; border-radius: 7px; z-index: 5;
    background: var(--marca-escura); color: #fff; font-size: 12px; font-weight: 600;
    white-space: nowrap; pointer-events: none;
  }
}

.rotulo {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta-sub);
  margin: 0 0 6px; letter-spacing: .01em;
}
.rotulo .obrig { color: var(--marca); margin-left: 2px; }

.entrada {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--linha); background-color: #FCFDFE; color: var(--tinta);
  font-family: inherit; font-size: 15px;
}
textarea.entrada { resize: vertical; min-height: 96px; line-height: 1.5; }
.entrada:focus { outline: none; border-color: var(--marca); background-color: #fff; box-shadow: 0 0 0 3px rgba(18, 74, 116, .12); }
/* Erro vence o foco: o campo com problema recebe o foco e precisa continuar vermelho. */
.campo--erro .entrada,
.campo--erro .entrada:focus {
  border-color: var(--perigo); background-color: #FFF8F7;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}
.campo-msg { display: none; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--perigo); }
.campo--erro .campo-msg { display: block; }

/* ---------- Login ---------- */
.login {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background:
    linear-gradient(160deg, var(--marca-escura), var(--marca) 120%);
}
.login-card {
  width: 100%; max-width: 380px; padding: 32px;
  background: var(--cartao); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(6, 24, 40, .45);
}
.login-card .entrada { margin-bottom: 16px; }
.login-logo { display: block; width: 240px; max-width: 80%; height: auto; margin: 0 auto 18px; }
.login-sub { text-align: center; color: var(--tinta-sub); margin: 0 0 26px; }
.login-card .btn { margin-top: 8px; padding: 12px; }
.login-erro {
  margin: 16px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #FBE9E7; color: var(--perigo); font-size: 13px;
}
.login-demo { display: none; margin: 16px 0 0; font-size: 12px; color: var(--tinta-sub); text-align: center; }
.modo-demo .login-demo { display: block; }

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

.sidebar {
  position: sticky; top: 0; height: 100vh; width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; padding: 28px 46px 18px 18px;
  /* Borda direita curvada para dentro, como um "(": o recorte (clip-path) é
     calculado em pixels pelo app.js (curvarBarraLateral), para a curva sair
     vetorial e nítida. O padding direito maior evita que a curva corte as abas. */
  /* Degradê diagonal na altura toda: azul bem claro atrás do logo (canto superior
     esquerdo) escurecendo aos poucos até o azul mais escuro no canto inferior direito. */
  background: linear-gradient(160deg,
    #EEF4FA 0%, #D5E2EF 11%, #8EABC8 24%, #4A7299 38%,
    #25507A 55%, var(--marca-escura) 75%, #082036 100%);
  color: #E8EEF4;
}
.marca { margin: -28px -46px 22px -18px; padding: 26px 40px 22px 26px; }
.marca-logo { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; }

.btn-agendar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; margin-bottom: 20px; border-radius: 11px; border: 1px solid rgba(235, 163, 12, .5);
  background: rgba(11, 44, 71, .55); color: #FFF3D6; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-agendar:hover { background: rgba(11, 44, 71, .72); border-color: rgba(235, 163, 12, .8); }

.abas { display: flex; flex-direction: column; gap: 4px; }
.aba {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; border-radius: 10px; border: none; background: transparent;
  color: #EAF1F8; font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.aba:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.aba.ativa { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 var(--destaque); }
.aba-nome { flex: 1; line-height: 1.25; }
.aba-curto { display: none; }
.aba-contagem {
  min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center;
  background: rgba(255, 255, 255, .1); font-size: 12px;
}
.aba.ativa .aba-contagem { background: var(--destaque); color: var(--marca-escura); }
/* Pendentes: bolinha de notificação, sempre chamativa (some quando zera). */
.aba .aba-notificacao,
.aba.ativa .aba-notificacao {
  background: #E5484D; color: #fff; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .25);
}

.sidebar-rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.usuario { font-size: 12px; color: #8FA6BD; padding: 0 14px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sair {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px;
  border: none; border-radius: 9px; background: transparent; color: #FFB8A8;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.sair:hover { background: rgba(255, 255, 255, .06); }
.sair .ic { width: 16px; height: 16px; }
.restaurar-demo {
  display: none; margin-top: 6px; padding: 6px 14px; border: none; background: none;
  color: #6F879E; font-size: 11.5px; text-decoration: underline; cursor: pointer; text-align: left;
}
.modo-demo .restaurar-demo { display: block; }

.conteudo { flex: 1; min-width: 0; padding: 32px 40px 56px; }
.topo { margin-bottom: 24px; }
.titulo { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 600; color: var(--marca); margin: 0; }
.subtitulo { margin: 6px 0 0; color: var(--tinta-sub); font-size: 14.5px; }

/* ---------- Filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; }
.filtro {
  display: flex; align-items: center; gap: 8px; height: 42px;
  padding: 0 12px; border-radius: 11px; border: 1px solid var(--linha); background: var(--cartao);
  color: var(--tinta-sub);
}
.filtro:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(18, 74, 116, .1); }
.filtro input {
  min-width: 0; border: none; outline: none; padding: 0; height: 100%;
  font: inherit; font-size: 14px; background: transparent; color: var(--tinta); cursor: pointer;
}
.filtro-busca { flex: 1 1 170px; max-width: 340px; }
.filtro-busca input { flex: 1; cursor: text; }
.filtro .ic { width: 16px; height: 16px; }
.filtro-rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

/* ---------- Seletor (substitui a lista nativa do <select>; ver criarSeletor no app.js) ---------- */
.sel { position: relative; flex: 1; min-width: 0; }
.sel-botao {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23637282' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px;
}
.sel-botao[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23124A74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}
/* No modal, o botão usa o visual de campo (.entrada). */
.sel-botao.entrada { padding-right: 38px; background-position: right 12px center; }
.sel-botao.entrada.sel-vazio { color: var(--tinta-sub); }
/* No filtro, fica "sem caixa" dentro da pílula. */
.sel-botao.filtro-sel {
  min-width: 148px; height: 40px; padding: 0 24px 0 0; border: none; outline: none;
  background-color: transparent; background-position: right 0 center;
  color: var(--tinta); font-size: 14px;
}

.sel-lista {
  position: fixed; z-index: 1000; max-height: 264px; overflow-y: auto; padding: 6px;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(10, 39, 64, .16), 0 2px 6px rgba(10, 39, 64, .06);
}
.sel-opcao {
  display: block; width: 100%; padding: 9px 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--tinta); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.sel-opcao:hover, .sel-opcao:focus-visible { background: var(--marca-suave); color: var(--marca); outline: none; }
.sel-opcao.atual { background: var(--marca); color: #fff; font-weight: 600; }

/* Data/hora vazias: "dd/mm/aaaa" e "--:--" bem fraquinhos (classe .vazio vem do app.js). */
input[type="date"].vazio::-webkit-datetime-edit,
input[type="time"].vazio::-webkit-datetime-edit { color: #BAC3CD; }
input[type="date"].vazio, input[type="time"].vazio { color: #BAC3CD; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: .8; }

/* Data vazia e sem foco: esconde o "dd/mm/aaaa" nativo e mostra "--/--/----" por cima
   (mesmo estilo do "--:--" do horário). Com foco ou valor, volta o campo normal. */
.data-caixa { position: relative; display: flex; flex: 1; min-width: 0; }
.data-caixa input { flex: 1; min-width: 0; }
.data-mascara {
  display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: #BAC3CD; font-size: 14px; font-variant-numeric: tabular-nums; pointer-events: none;
}
.data-caixa .entrada + .data-mascara { left: 13px; font-size: 15px; }
input[type="date"].vazio:not(:focus) + .data-mascara { display: block; }
input[type="date"].vazio:not(:focus)::-webkit-datetime-edit { color: transparent; }
.limpar-filtros {
  padding: 0 4px; border: none; background: none; color: var(--marca);
  font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* ---------- Cartões de resumo ---------- */
.resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
.kpi {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--tinta); cursor: pointer;
  background: var(--cartao); border: none; border-radius: var(--raio); padding: 18px 20px;
  box-shadow: var(--sombra); border-top: 3px solid var(--destaque);
  transition: transform .15s, box-shadow .15s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(10, 39, 64, .05), 0 12px 28px rgba(10, 39, 64, .09); }
.kpi-rotulo { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-sub); }
.kpi-valor { display: block; font-family: var(--fonte-titulo); font-size: 34px; font-weight: 600; margin-top: 8px; line-height: 1; color: var(--marca); }

/* ---------- Lista ---------- */
.grupo { margin-bottom: 28px; }
.grupo-titulo {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-sub);
}
.grupo-titulo::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.grupo-titulo.alerta { color: var(--alerta); }

/* Meses recolhíveis (Realizadas): texto · linha · setinha, tudo clicável. */
.grupo.fechado { margin-bottom: 14px; }
.grupo-titulo.recolhivel::after { display: none; }
.grupo-alternar {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 0; margin: -6px 0;
  border: none; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.grupo-alternar::after { content: ""; flex: 1; height: 1px; background: var(--linha); order: 1; }
.grupo-seta { order: 2; display: inline-flex; color: var(--tinta-sub); transition: transform .2s; }
.grupo-seta .ic { width: 18px; height: 18px; }
.grupo.aberto .grupo-seta { transform: rotate(180deg); color: var(--marca); }
.grupo-alternar:hover, .grupo-alternar:hover .grupo-seta { color: var(--marca); }
.grupo-alternar:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; border-radius: 6px; }

.item {
  display: flex; align-items: flex-start; gap: 18px; padding: 14px 18px; margin-bottom: 10px;
  background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  border-left: 3px solid transparent; cursor: pointer;
  transition: box-shadow .15s;
}
.item:hover { box-shadow: 0 2px 4px rgba(10, 39, 64, .05), 0 10px 26px rgba(10, 39, 64, .09); }
.item:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.item.hoje { border-left-color: var(--marca); }
.item.pendente { border-left-color: var(--alerta); }
.item.pendente .item-data { background: var(--alerta-suave); color: var(--alerta); }

.item-data {
  width: 58px; flex-shrink: 0; padding: 8px 0; border-radius: 11px; text-align: center;
  background: var(--marca-suave); color: var(--marca);
}
.item-data .dia { display: block; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; line-height: 1; }
.item-data .mes { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.item-data.sem { background: #EEF1F5; color: var(--tinta-sub); }
.item-data.sem { display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.item-data.sem .mes { margin: 1px 0; }
.item.realizada .item-data { background: var(--ok-suave); color: var(--ok); }

.item-info { flex: 1; min-width: 0; align-self: center; }
.item-nome { margin: 0 0 5px; font-size: 16px; font-weight: 600; }
/* Dia da semana + horário: segunda linha de todo cartão, em destaque. */
.item-quando {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 0;
  font-size: 14px; font-weight: 600; color: var(--marca);
}
.item-hora { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.item-hora .ic { width: 15px; height: 15px; }
.item-acoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; align-self: center; }

/* ---------- Janela de resumo (clique no cartão) ---------- */
.modal-resumo .modal-topo h2 { margin-top: 6px; }
.resumo-situacao {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--marca-suave); color: var(--marca);
}
.resumo-situacao.pendente { background: var(--alerta-suave); color: var(--alerta); }
.resumo-situacao.realizada { background: var(--ok-suave); color: var(--ok); }
.modal-resumo .modal-corpo { padding-top: 12px; padding-bottom: 8px; }
.resumo-info { padding: 12px 14px; border-radius: 10px; background: var(--marca-suave); }
.resumo-info h4, .registro-bloco h4 {
  margin: 0 0 5px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--marca);
}
.resumo-info p { margin: 0; font-size: 15px; font-weight: 600; color: var(--tinta); }
.resumo-vazio { color: var(--tinta-sub); font-style: italic; }

.registro-bloco { padding: 12px 14px; border-radius: 10px; background: #F7F9FB; border: 1px solid var(--linha); }
.registro-bloco.largo { grid-column: 1 / -1; }

/* Histórico do aluno (janela de resumo): uma seção por mentoria, mais recente primeiro. */
.modal-corpo.resumo-lista { display: flex; flex-direction: column; gap: 14px; }
.resumo-lista .resumo-vazio { margin: 0; }
.hist-mentoria, .hist-reagendamento {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha);
}
.hist-mentoria.atual { border-color: rgba(18, 74, 116, .35); box-shadow: 0 0 0 3px rgba(18, 74, 116, .06); }
.hist-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hist-data { font-size: 14px; font-weight: 600; color: var(--marca); }
.hist-semestre { font-size: 13px; color: var(--tinta-sub); }
.hist-motivo {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: var(--marca-suave); color: var(--marca);
}
.hist-motivo.falta { background: var(--alerta-suave); color: var(--alerta); }
.hist-detalhe { margin: 0; line-height: 1.5; }
.hist-faltas { color: var(--alerta); font-weight: 600; }
.resumo-subtitulo { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-sub); }
.modal-rodape.resumo-rodape { justify-content: space-between; }

/* Etiqueta "N mentorias" no cartão do aluno (Realizadas). */
.item-contagem {
  display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; vertical-align: 2px;
  font-size: 11.5px; font-weight: 700; background: var(--ok-suave); color: var(--ok);
}

/* Sugestões de aluno no campo Sobrenome (agendar). */
.campo-info { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.campo:has(> .sugestoes) { position: relative; }
.sel-lista.sugestoes { position: absolute; left: 0; right: 0; z-index: 20; }
.sugestoes .sel-opcao { font-weight: 600; }
.sug-curso { font-weight: 400; color: var(--tinta-sub); }
.sugestoes .sel-opcao:hover .sug-curso { color: inherit; }
.registro-bloco p { margin: 0; line-height: 1.55; white-space: pre-wrap; }

.vazio-lista {
  padding: 48px 20px; text-align: center; color: var(--tinta-sub);
  border: 1.5px dashed var(--linha); border-radius: var(--raio);
}
.vazio-lista strong { display: block; font-family: var(--fonte-titulo); font-size: 19px; color: var(--tinta); margin-bottom: 6px; }

/* ---------- Modal ---------- */
dialog {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: none; border-radius: 18px; background: var(--fundo); color: var(--tinta);
  box-shadow: 0 30px 80px rgba(6, 24, 40, .35);
}
dialog::backdrop { background: rgba(10, 39, 64, .45); backdrop-filter: blur(2px); }
.modal { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.modal-topo { display: flex; justify-content: space-between; gap: 16px; padding: 22px 24px 12px; }
.modal-topo h2 { font-family: var(--fonte-titulo); font-size: 23px; font-weight: 600; color: var(--marca); margin: 0; }
.modal-topo p { margin: 4px 0 0; color: var(--tinta-sub); font-size: 13.5px; }
.modal-corpo { padding: 8px 24px 4px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.campo { min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
.modal-erro { margin: 12px 24px 0; padding: 10px 12px; border-radius: 10px; background: #FBE9E7; color: var(--perigo); font-size: 13px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; }
.modal-texto { grid-column: 1 / -1; margin: 0; line-height: 1.55; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  padding: 11px 18px; border-radius: 11px; background: var(--marca-escura); color: #fff;
  font-size: 14px; box-shadow: 0 12px 32px rgba(6, 24, 40, .3);
}
.toast.erro { background: var(--perigo); }

/* ---------- Telas menores ---------- */
@media (max-width: 1100px) {
  .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: sticky; top: 0; z-index: 10; height: auto; width: 100%;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 16px 10px;
    clip-path: none !important; /* no celular a barra do topo é reta */
  }
  /* Faixa clara do logo ocupa a largura toda, como no desktop. */
  /* Barra do topo é baixa: o claro fica só na linha do logo e escurece logo abaixo. */
  .sidebar {
    background: linear-gradient(172deg,
      #EEF4FA 0px, #D5E2EF 42px, #7F9DBD 64px, #24507A 82px,
      var(--marca-escura) 110px, #082036 100%);
  }
  .marca {
    flex: 1 0 100%; margin: 0 -16px 2px; padding: 8px 16px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .marca-logo { height: 40px; width: auto; max-width: none; margin: 0; }
  .btn-agendar { flex: 1; margin: 0; padding: 9px 12px; font-size: 13.5px; }
  .sidebar-rodape { margin: 0; padding: 0; border: none; order: 2; }
  .usuario, .restaurar-demo, .modo-demo .restaurar-demo { display: none; }
  .sair { padding: 9px; font-size: 0; gap: 0; }
  .abas { flex-direction: row; width: 100%; gap: 2px; order: 3; }
  .aba { flex: 1; flex-direction: column; gap: 3px; justify-content: center; padding: 7px 2px 6px; font-size: 11.5px; position: relative; }
  .aba .ic { width: 17px; height: 17px; }
  .aba-nome { display: none; }
  .aba-curto { display: block; }
  .aba.ativa { box-shadow: inset 0 -2px 0 var(--destaque); }
  /* No celular, a contagem vira bolinha no canto do ícone. */
  .aba-contagem { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; padding: 1px 5px; font-size: 10.5px; }

  .conteudo { padding: 22px 16px 48px; }
  .titulo { font-size: 26px; }
  .filtro-busca { flex-basis: 100%; max-width: none; }
  .filtro:not(.filtro-busca) { flex: 1 1 140px; }
  .filtro input[type="date"] { flex: 1; max-width: none; }
  .sel-botao.filtro-sel { min-width: 0; }
  .resumo { gap: 10px; margin-bottom: 22px; }
  .kpi { padding: 14px; }
  .kpi-valor { font-size: 28px; }

  .item { flex-wrap: wrap; gap: 12px 14px; padding: 14px; }
  .item-data { width: 52px; }
  .item-acoes { width: 100%; justify-content: flex-end; border-top: 1px solid var(--linha); padding-top: 10px; }

  .modal-corpo { grid-template-columns: 1fr; padding: 8px 18px 4px; }
  .modal-topo { padding: 18px 18px 10px; }
  .modal-rodape { padding: 16px 18px 18px; }
}