/* Identidade visual do CESS — todo o CSS usa SÓ estes tokens (nenhuma cor solta no resto do arquivo). */
:root {
  /* paleta oficial */
  --cess-azul: #2f346a;      /* primária: cabeçalho, botões principais, títulos */
  --cess-azure: #25798f;     /* secundária: links, bordas de destaque, aba ativa, foco */
  --cess-turquesa: #edfffc;  /* fundos suaves, linhas alternadas */
  --cess-laranja: #fac66d;   /* botão de ação principal */
  --cess-magenta: #b13e6f;   /* avisos fortes (pendência) */
  --cess-carmim: #b12c47;    /* erro / perigo */
  --fundo: #ffffff;
  --texto: #1c2430;

  /* neutros e derivados da paleta */
  --branco: #ffffff;
  --texto-suave: #5f6b7a;
  --borda: #d9dee5;
  --cinza-claro: #f3f5f7;
  --aviso-fundo: #fff6d6;    /* aviso amarelo (não é erro) */
  --aviso-texto: #6b5200;
  --erro-fundo: color-mix(in srgb, var(--cess-carmim) 9%, var(--branco));
  --azul-fundo: color-mix(in srgb, var(--cess-azul) 9%, var(--branco));
  --sombra: 0 1px 2px color-mix(in srgb, var(--texto) 8%, transparent), 0 4px 14px color-mix(in srgb, var(--texto) 6%, transparent);
  --raio: 8px;

  /* fontes: Uncage não existe no Google Fonts -> Montserrat. Texto em Inter (a Mozilla Text tem zero cortado, ruim pra datas e horários) */
  --fonte-titulo: "Uncage", "Montserrat", sans-serif;
  --fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 var(--fonte-texto);
}

/* ---------- topo / navegação ---------- */
.topo {
  background: var(--cess-azul);
  color: var(--branco);
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  gap: 32px;
}
.topo .marca { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--branco); text-decoration: none; flex-shrink: 0; }
.topo .marca img { height: 36px; width: auto; display: block; border-radius: 8px; } /* o ícone tem fundo próprio: cantos arredondados, como ícone de app */
.topo .marca .logo-texto { font-family: var(--fonte-titulo); font-weight: 700; font-size: 22px; letter-spacing: .08em; }
.topo .marca .nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.topo nav { display: flex; gap: 4px; }
.topo nav a {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--branco);
  opacity: .82;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent; /* mantém o texto centralizado na barra */
}
.topo nav a:hover { opacity: 1; }
.topo nav a.ativo { opacity: 1; font-weight: 600; border-bottom-color: var(--cess-laranja); }

/* celular: marca em cima, abas viram um menu horizontal rolável */
@media (max-width: 640px) {
  .topo { flex-direction: column; gap: 0; padding: 0 16px; }
  .topo nav { overflow-x: auto; margin: 0 -16px; padding: 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .topo nav::-webkit-scrollbar { display: none; }
  .topo nav a { padding: 10px 12px; }
}

main { max-width: 960px; margin: 24px auto; padding: 0 16px 64px; }
main.largo { max-width: 1280px; }
h1, h2 { font-family: var(--fonte-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cess-azul); }
h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 14px; margin: 0 0 12px; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 20px;
}
.cartao > h2 { padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--cess-turquesa); }
a { color: var(--cess-azure); }

/* ---------- formulários ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: 13px; color: var(--cess-azul); }
.ajuda { font-size: 12px; color: var(--texto-suave); margin: 0 0 12px; }
.campo .ajuda { margin: 0; }
.ajuda code, p code { background: var(--cinza-claro); padding: 1px 4px; border-radius: 4px; }

input, select, textarea {
  font: inherit;
  color: inherit;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--branco);
  width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--cess-azure) 45%, var(--borda)); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cess-azure);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cess-azure) 22%, transparent);
}
input:disabled, select:disabled, textarea:disabled { background: var(--cinza-claro); color: var(--texto-suave); }
input[type="checkbox"] { accent-color: var(--cess-azure); }
textarea { resize: vertical; min-height: 110px; }
input[type="checkbox"] { width: auto; }
.campo.check { flex-direction: row; align-items: center; gap: 8px; }

.acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

/* Botões — hover sempre escurece 8%.
   secundário (padrão): borda e texto Azure · .primario: Azul CESS · .acao: Laranja pastel · .perigo: Carmim */
button {
  --cor-botao: var(--branco);
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--raio);
  border: 1px solid var(--cess-azure);
  background: var(--cor-botao);
  color: var(--cess-azure);
  cursor: pointer;
  transition: background-color .12s;
}
button:hover:not(:disabled) { background: color-mix(in srgb, var(--cor-botao) 92%, black); }
button:focus-visible { outline: 2px solid var(--cess-azure); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: not-allowed; }

button.primario { --cor-botao: var(--cess-azul); border-color: var(--cess-azul); color: var(--branco); }

/* ação principal: Gerar mensagens, Programar semana e Programar curso (botão criado pela grade) */
button.acao,
button[data-programar-curso] { --cor-botao: var(--cess-laranja); border-color: var(--cess-laranja); color: var(--cess-azul); font-weight: 700; }

button.perigo { --cor-botao: var(--cess-carmim); border-color: var(--cess-carmim); color: var(--branco); }
/* nas listas (muitos "Excluir" juntos) o perigo é só contorno, pra não pesar */
button.pequeno.perigo { --cor-botao: var(--branco); color: var(--cess-carmim); }

button.pequeno { padding: 4px 10px; font-size: 13px; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-family: var(--fonte-titulo); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cess-azul); border-bottom: 2px solid var(--cess-turquesa); }
td.acoes-linha { white-space: nowrap; text-align: right; }
td .previa { white-space: pre-wrap; max-height: 4.5em; overflow: hidden; color: var(--texto-suave); font-size: 13px; }
tr.inativo td { opacity: .55; }
.nowrap { white-space: nowrap; }
/* lista de slots do modelo: mesmo padrão da grade — dia em Azul CESS, hora em Turquesa */
table.slots { border-collapse: separate; border-spacing: 0 6px; }
table.slots td { border-bottom: 0; background: var(--branco); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
table.slots td:first-child { color: var(--texto-suave); font-size: 12px; text-align: center; border-left: 1px solid var(--borda); border-radius: var(--raio) 0 0 var(--raio); }
table.slots td:last-child { border-right: 1px solid var(--borda); border-radius: 0 var(--raio) var(--raio) 0; vertical-align: middle; }
table.slots td:nth-child(2) { background: var(--cess-azul); color: var(--branco); font-family: var(--fonte-titulo); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; vertical-align: middle; text-align: center; border-color: var(--cess-azul); }
table.slots td:nth-child(3) { background: var(--cess-turquesa); color: var(--cess-azul); font-weight: 700; vertical-align: middle; text-align: center; }
table.slots .celula-texto { min-width: 360px; width: 55%; }
table.slots .celula-texto textarea { min-height: 160px; font-size: 13px; } /* cabe a mensagem inteira sem rolar tanto */
table.slots td input:not([type="checkbox"]) { min-width: 150px; }
table.slots label.marcar { white-space: normal; }
.salvo { color: var(--cess-azure); font-size: 12px; font-weight: 600; margin-right: 8px; }
.vazio { color: var(--texto-suave); padding: 12px 0; }

/* ---------- avisos ---------- */
.aviso { /* amarelo = atenção, não é erro */
  background: var(--aviso-fundo);
  border: 1px solid var(--cess-laranja);
  border-left-width: 4px;
  color: var(--aviso-texto);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 14px;
}
.aviso[hidden] { display: none; }

.etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cinza-claro);
  color: var(--texto-suave);
}
.etiqueta.programado { background: var(--cess-turquesa); color: var(--cess-azure); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cess-azure) 35%, transparent); }
.etiqueta.erro { background: var(--erro-fundo); color: var(--cess-carmim); }
.etiqueta.editado { background: var(--azul-fundo); color: var(--cess-azul); }

/* ---------- cursos da semana ---------- */
.curso { background: var(--cess-turquesa); border: 1px solid color-mix(in srgb, var(--cess-azure) 25%, var(--borda)); border-radius: var(--raio); padding: 14px; margin-bottom: 12px; }
.curso .cabecalho strong { font-family: var(--fonte-titulo); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cess-azul); }
.curso .cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

/* ---------- grade da semana ---------- */
.cartao.faixa { margin: 0 16px 64px; }
.grade-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
table.grade-semana { border-collapse: separate; border-spacing: 0; width: max-content; }
table.grade-semana th, table.grade-semana td { border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
table.grade-semana thead th { text-transform: none; letter-spacing: 0; font-size: 13px; text-align: center; white-space: nowrap; }

/* linha 1: dia + data — Azul CESS com texto branco */
table.grade-semana tr.dias th {
  background: var(--cess-azul);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left; /* o dia cobre vários slots: à esquerda ele aparece logo no começo do bloco */
  padding-left: 14px;
  border-right-color: color-mix(in srgb, var(--branco) 25%, var(--cess-azul));
}
/* linha 2: horários — Turquesa claro */
table.grade-semana tr.horas th { background: var(--cess-turquesa); color: var(--cess-azul); font-weight: 700; }
/* linha 3: notas de imagem — Carmim com texto branco, como na planilha (slot sem nota fica em branco) */
table.grade-semana tr.notas th { background: var(--cess-carmim); color: var(--branco); font-weight: 600; font-size: 12px; white-space: normal; }
table.grade-semana tr.notas th:empty { background: var(--branco); }

/* coluna do curso fica parada na rolagem horizontal */
table.grade-semana .fixa { position: sticky; left: 0; z-index: 2; background: var(--branco); box-shadow: 1px 0 0 var(--borda); }
table.grade-semana thead .fixa { background: var(--cess-azul); color: var(--branco); font-family: var(--fonte-titulo); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; vertical-align: middle; }
table.grade-semana .resumo { white-space: pre-wrap; font-family: var(--fonte-texto); font-weight: 400; font-size: 13px; min-width: 240px; max-width: 280px; text-transform: none; letter-spacing: 0; color: var(--texto); }
table.grade-semana tbody tr:nth-child(even) .resumo { background: var(--cess-turquesa); } /* linhas alternadas */
.acoes-curso { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; white-space: normal; }

/* células: com texto = branco · vazia = cinza claro */
table.grade-semana .celula { position: relative; width: 280px; min-width: 280px; background: var(--branco); }
table.grade-semana .celula.vazia { background: var(--cinza-claro); text-align: center; color: var(--borda); vertical-align: middle; }
table.grade-semana .celula textarea { font-size: 13px; min-height: 160px; }

/* estados (box-shadow interno, porque borda de td briga com a tabela):
   pendência [ ] = contorno Magenta · programada = faixa Azure à esquerda · erro = faixa Carmim à esquerda */
table.grade-semana .celula:has(.aviso-pendente) { box-shadow: inset 0 0 0 2px var(--cess-magenta); }
table.grade-semana .celula.programado { box-shadow: inset 5px 0 0 var(--cess-azure); }
table.grade-semana .celula.erro { box-shadow: inset 5px 0 0 var(--cess-carmim); }
table.grade-semana .celula.erro:has(.aviso-pendente) { box-shadow: inset 5px 0 0 var(--cess-carmim), inset 0 0 0 2px var(--cess-magenta); }

.celula .aviso-pendente, .celula .aviso-imagem { font-size: 12px; color: var(--aviso-texto); background: var(--aviso-fundo); border: 1px solid var(--cess-laranja); border-radius: 4px; padding: 3px 6px; margin-top: 4px; }
.celula .aviso-pendente { font-weight: 600; }
.celula .observacao { font-size: 12px; color: var(--texto-suave); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; cursor: help; }
.celula .erro-msg { color: var(--cess-carmim); font-size: 12px; font-weight: 600; margin-top: 4px; }
.celula .rodape { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; }

/* "Copiar": pequeno, no canto da célula, só aparece no hover (ou com foco dentro da célula) */
.celula [data-copiar] {
  position: absolute;
  top: 14px;
  right: 24px;
  padding: 2px 8px;
  font-size: 12px;
  box-shadow: var(--sombra);
  opacity: 0;
  transition: opacity .12s;
}
.celula:hover [data-copiar], .celula:focus-within [data-copiar] { opacity: 1; }
@media (hover: none) { .celula [data-copiar] { opacity: 1; } } /* toque não tem hover */

label.marcar { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 6px; white-space: nowrap; }

@media (max-width: 640px) {
  main { margin-top: 16px; padding: 0 12px 48px; }
  .cartao { padding: 16px; }
  .cartao.faixa { margin: 0 12px 48px; }
  /* no celular a coluna do curso rola junto, senão sobra pouco espaço pra mensagem */
  table.grade-semana .fixa { position: static; }
  table.grade-semana .resumo { min-width: 180px; max-width: 200px; }
  table.grade-semana .celula { width: 250px; min-width: 250px; }

  /* slots do modelo: cada slot vira um cartão empilhado (faixa # · dia · hora em cima, campos embaixo) */
  table.slots thead { display: none; }
  table.slots, table.slots tbody { display: block; }
  table.slots tr { display: grid; grid-template-columns: auto 1fr auto; margin-bottom: 12px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
  table.slots td { border: 0; border-radius: 0; }
  table.slots td:first-child { background: var(--cess-azul); color: var(--branco); border-radius: 0; display: flex; align-items: center; opacity: .85; }
  table.slots td:nth-child(2) { text-align: left; }
  table.slots td:nth-child(3) { padding: 8px 14px; }
  table.slots td:nth-child(n+4) { grid-column: 1 / -1; }
  table.slots td:last-child { border-radius: 0; text-align: right; }
  table.slots .celula-texto { min-width: 0; width: auto; }

  /* campos dentro de tabela não podem espremer */
  .tabela-rolagem td input:not([type="checkbox"]), .tabela-rolagem td select { min-width: 130px; }
}

/* ---------- seletor de intervalo de envio ---------- */
.velocidade { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--cess-azul); }
.velocidade select { width: auto; font-weight: 400; color: var(--texto); }
.velocidade-custom { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--texto); }
.velocidade-custom input { width: 76px; }

/* ---------- toast ---------- */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cess-azul);
  color: var(--branco);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  max-width: 90vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 10;
}
#toast.visivel { opacity: 1; }
#toast.erro { background: var(--cess-carmim); }