/* ================================
   Desafio de Ideias — styles.css
   Tema SENAI + cards com tarja colorida
   Layout com bom espaçamento
   ================================ */

/* ---------- Variáveis ---------- */
:root{
  /* Marca SENAI */
  --brand-red:#e30613;
  --brand-red-600:#c10510;
  --brand-blue:#1a2c56;
  --brand-blue-700:#132042;

  /* Paleta adicional */
  --yellow:#facc15;   /* Amarelo */
  --marsala:#800000;  /* Marsala */
  --orange:#f97316;   /* Laranja */
  --green:#16a34a;    /* Verde */

  /* Espaçamentos (ritmo) */
  --space-1: 10px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* Base clara */
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface-2:#eef2f8;
  --text:#0b1220;
  --muted:#55627a;

  /* Bordas e sombras */
  --line:#d8e0ee;
  --shadow:0 8px 20px rgba(0,0,0,.08);
  --radius:14px;

  /* Tipografia + layout */
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  --code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --maxw: 1200px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:var(--bg); line-height:1.6; font-size:16px;
  min-height:100svh; display:flex; flex-direction:column;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-red);text-decoration:none}
code,pre{font-family:var(--code)}

/* Estrutura */
.wrap{min-height:100svh;display:flex;flex-direction:column}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,3vw,28px)}

/* Espaço vertical global entre grandes blocos dentro do main */
main.page .container > * + *{ margin-top: var(--space-3); }

/* Skip link */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  position:fixed;left:16px;top:12px;padding:10px 14px;
  background:#fff;color:#000;border-radius:10px;box-shadow:var(--shadow);z-index:1000
}

/* ---------- Cabeçalho ---------- */
header.site{
  background:var(--brand-blue); color:#fff;
  border-bottom:4px solid var(--brand-red);
  position:sticky; top:0; z-index:50; box-shadow:var(--shadow);
}
.header-inner{display:flex;align-items:center;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo-senai{width:150px;object-fit:contain}
.site-title{font-weight:800;font-size:clamp(18px,2vw,22px);color:#fff}

/* Navegação */
.nav{display:flex;gap:10px;margin-left:auto}
.nav a{
  color:#fff;padding:10px 14px;border-radius:8px;border:1px solid transparent
}
.nav a:hover{background:rgba(255,255,255,.15)}
.nav a[aria-current="page"]{background:rgba(255,255,255,.25)}

/* Botão hambúrguer (só mobile) */
.nav-toggle{
  display:none;margin-left:auto;
  width:44px;height:44px;border-radius:8px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1);
  color:#fff;font-size:22px;cursor:pointer
}

/* ---------- Rodapé ---------- */
footer.site{
  margin-top:auto; background:var(--brand-blue); color:#fff;
  border-top:4px solid var(--brand-red);
}
.footer-inner{
  padding:20px 0;display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;justify-content:center;font-size:.95rem
}
.footer-inner a{color:#fff}

/* ---------- Conteúdo ---------- */
main.page{padding:clamp(14px,2.8vw,28px) 0; flex:1;}
/* Centralizar verticalmente um card/box dentro da página */
.page.center{
  min-height:calc(100svh - 160px);  /* aprox. header+footer */
  display:flex; align-items:center;
}
.center{display:flex; align-items:center;}

/* HERO (home) */
.hero{
  background:linear-gradient(180deg,#fff,var(--surface-2));
  border-bottom:1px solid var(--line);
  padding:clamp(22px,5vw,48px) 0;
  text-align:center
}
.hero h1{margin:0 0 8px;font-size:clamp(26px,3.2vw,42px);font-weight:900;color:var(--brand-blue)}
.hero p{margin:0;color:var(--muted);font-size:clamp(16px,2vw,18px)}

/* ---------- Cards (tarja + contorno na cor) ---------- */
.card{
  background:var(--surface);
  border:1.5px solid var(--line); /* fallback */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;

  /* Espaçamento vertical padrão entre cards
     (funciona em grid e quando empilhados) */
  margin-block: var(--space-2);
}
.card .hd{
  padding:14px 18px;
  font-weight:800; font-size:1.2rem;
  color:#fff;
}
.card .bd{padding:14px 18px 16px}

/* Variações (cor na tarja e na borda) */
.card.azul{ border:2px solid var(--brand-blue); }
.card.azul .hd{ background:var(--brand-blue); }

.card.vermelho{ border:2px solid var(--brand-red); }
.card.vermelho .hd{ background:var(--brand-red); }

.card.amarelo{ border:2px solid var(--yellow); }
.card.amarelo .hd{ background:var(--yellow); color:#000; }

.card.marsala{ border:2px solid var(--marsala); }
.card.marsala .hd{ background:var(--marsala); }

.card.laranja{ border:2px solid var(--orange); }
.card.laranja .hd{ background:var(--orange); }

.card.verde{ border:2px solid var(--green); }
.card.verde .hd{ background:var(--green); }

/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--space-3)}   /* AQUI aumenta o espaço entre cards no grid */
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:900px){
  .grid-2{grid-template-columns:1.2fr .8fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Formulários ---------- */
label.top{display:block;font-weight:700;margin-bottom:6px}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:12px;border-radius:10px;border:1.5px solid var(--brand-blue);
  background:#fff;color:var(--text);transition:border-color .15s ease
}
textarea{min-height:140px;resize:vertical}
input::placeholder,textarea::placeholder{color:#9aa3b2}
input:focus,select:focus,textarea:focus{border:1.5px solid var(--brand-red);outline:none;box-shadow:none}
.small{font-size:.95rem;color:var(--muted)}
.muted{color:var(--muted)}
:focus-visible{outline:none}

/* ---------- Botões ---------- */
button,.btn{
  appearance:none;border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;
  transition:transform .06s ease, background .15s ease
}
button:hover,.btn:hover{transform:translateY(-1px);background:#e8edf6}
button:active,.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand-red);border-color:var(--brand-red);color:#fff}
.btn-primary:hover{background:var(--brand-red-600)}
.btn-outline{background:transparent;border-color:var(--brand-red);color:var(--brand-red)}
.btn-outline:hover{background:rgba(227,6,19,.08)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--brand-blue)}

/* ---------- Filtros (Dashboard/Ranking) ---------- */
.filters{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr auto; /* Curso | De | Até | Botão */
  gap:var(--space-2);
  align-items:end;
  margin-top: var(--space-1);
}
.filters select, .filters input[type="date"]{ height:44px; }
.filters .filter-actions{ align-self:end; }
.filters .filter-actions .btn{
  height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px;
}
@media (max-width: 900px){
  .filters{ grid-template-columns: 1fr; }
  .filters .filter-actions .btn{ width:100%; }
}

/* ---------- Tabelas (grade 1.5px azul + zebra + hover) ---------- */
.table{
  width:100%;
  border-collapse:collapse;              /* grades contínuas */
  background:var(--surface);
  border:1.5px solid var(--brand-blue);  /* borda externa */
  border-radius:var(--radius);
  overflow:hidden;
}
.table thead th{
  text-align:left; font-weight:800; padding:12px;
  background:var(--surface-2);
  border:1.5px solid var(--brand-blue);  /* grade no cabeçalho */
}
.table tbody td{
  padding:12px; vertical-align:middle;
  border:1.5px solid var(--brand-blue);  /* grade nas células */
}
/* Zebra no corpo */
.table tbody tr:nth-child(even){ background: var(--surface-2); }
/* Hover suave */
.table tbody tr:hover{ background: color-mix(in oklab, var(--brand-red) 6%, white); }
/* Células longas (resumo) */
.td-resumo{ white-space: normal; line-height: 1.5; }
/* Centralizar colunas 4..9 da tabela de ranking (#tabRank) */
#tabRank thead th:nth-child(n+4),
#tabRank tbody td:nth-child(n+4){ text-align:center; }

/* ---------- Avaliação: perguntas e estrelas (.is-on) ---------- */
.q{
  padding:12px;
  border:1.5px solid var(--brand-blue);
  border-radius:12px;
  background:var(--surface);
  margin-bottom:var(--space-2);
}
.q h4{ margin:0 0 8px; font-size:1rem; }
.q .opts{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.q.is-error{ border-color: var(--brand-red); }

/* Por padrão, esconder ajuda + estrelas */
.q .help-stars, .q .stars { display: none; }
/* Quando marcar "Sim", o JS adiciona .is-on */
.q.is-on .help-stars { display: inline; }
.q.is-on .stars { display: flex; }

/* Estrelas */
.stars{ gap:6px; }
.star{
  font-size:28px; line-height:1; cursor:pointer; user-select:none;
  color:#98a2b3; opacity:.45;
  transition: transform .08s ease, opacity .12s ease, color .12s ease;
}
.star:hover{ transform:scale(1.1); opacity:.85; }
.star[aria-checked="true"]{
  color: var(--brand-red);
  opacity: 1;
  text-shadow: 0 0 .6px rgba(0,0,0,.25);
}

/* ---------- Nav responsivo ---------- */
@media (max-width:880px){
  .header-inner{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .nav{display:none;flex-direction:column;width:100%;gap:0;margin-top:10px}
  .nav a{padding:12px;border-radius:8px}
  .nav[data-open="true"]{display:flex}
}

/* ---------- Home compacta (opcional) ---------- */
.page.home{ padding-top:0; }
.page.home .hero{
  padding:8px 0 12px; background:var(--surface);
  border-bottom:1px solid var(--line); text-align:center;
}
.page.home .hero h1{ margin:0 0 4px; }
.page.home .hero p{ margin:0; }

/* Utilitários básicos */
.hidden{ display:none !important; }

.flex{ display:flex; gap:12px; flex-wrap:wrap; }

/* Margens top (usadas no HTML: mt-2, mt-3) */
.mt-1{ margin-top: var(--space-1); }
.mt-2{ margin-top: var(--space-2); }
.mt-3{ margin-top: var(--space-3); }

/* Espaçamento do texto de ajuda e do bloco de botões */
#hintSenha{ margin-top: 6px; display:block; }
#msgErro{ margin-top: 6px; }

/* Opcional: garante respiro extra do bloco de botões */
#loginForm .flex.mt-3{ margin-top: var(--space-3); }