/* =============== */
/*  Tema / Tokens  */
/* =============== */
:root{
  --bg: #f6f8ff;
  --card: #ffffff;
  --ink: #334155;
  --muted: #6b7280;
  --ring: #e8ecff;
  --primary-1:#5e60ce;
  --primary-2:#7400b8;
  --danger:#e63946;
  --danger-2:#d62828;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .08);
  --shadow-hover: 0 16px 40px rgba(0, 0, 0, .12);
}

/* ========================= */
/*  Grade de 4 colunas base  */
/* ========================= */
.cronogramas-lista{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); /* 4 colunas */
  gap:24px;
  padding:24px;
}

/* Responsivo: 3/2/1 colunas */
@media (max-width:1280px){ .cronogramas-lista{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:1024px){ .cronogramas-lista{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px) { .cronogramas-lista{ grid-template-columns:1fr;} }

/* ================= */
/*      Cards        */
/* ================= */
.cronograma-card{
  position:relative;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(94,96,206,.25), rgba(116,0,184,.25)) border-box;
  border:1px solid transparent;           /* mostra o gradiente da borda */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.cronograma-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
  border-color:transparent; /* mantém a borda em degradê */
}

.cronograma-link{
  display:block;
  padding:22px 22px 12px;
  text-decoration:none;
  color:inherit;
}

.cronograma-card h3,
.cronograma-card .cronograma-titulo{
  margin:0 0 12px;
  text-align:center;
  line-height:1.25;
  font-weight:800;
  font-size:clamp(1.06rem, .95rem + .5vw, 1.38rem);
  color:var(--primary-2);
  letter-spacing:.2px;
}

.cronograma-meta{
  display:grid;
  gap:6px;
  margin-top:10px;
}

.cronograma-meta p{
  margin:0;
  font-size:.92rem;
  color:var(--muted);
}

.cronograma-meta p strong{
  color:var(--ink);
  font-weight:700;
}

/* rodapé do card */
.action-buttons{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-top:1px solid var(--ring);
  background:#fafbff;
}

/* ================= */
/*      Botões       */
/* ================= */
.btn-ver,
.btn-excluir{
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease, filter .2s ease, background .2s ease;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.btn-ver{
  background:linear-gradient(90deg,var(--primary-1),var(--primary-2));
  color:#fff;
  box-shadow:0 4px 14px rgba(116,0,184,.18);
}
.btn-ver:hover{ transform:translateY(-2px); filter:saturate(1.08); }

.btn-excluir{
  background:var(--danger);
  color:#fff;
  box-shadow:0 4px 12px rgba(230,57,70,.18);
}
.btn-excluir:hover{ background:var(--danger-2); transform:translateY(-2px); }

/* ================= */
/*   Notificações    */
/* ================= */
.notice{ padding:15px; margin:15px 0; border-radius:10px; }
.notice-success{ background:#d4edda; border:1px solid #c3e6cb; color:#155724; }
.notice-error{   background:#fde2e4; border:1px solid #fac7cd; color:#7a2530; }
.notice-warning{ background:#fff7d6; border:1px solid #ffe9a8; color:#7a5c14; }

/* ============================= */
/*     Filtro (barra bonita)     */
/* ============================= */
.cronograma-header{ margin:10px 20px 0; }

.filtros-cronograma{
  display:grid;
  grid-template-columns:repeat(6,minmax(160px,1fr));
  gap:16px;
  padding:20px;
  background:var(--card);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(17,24,39,.08);
  align-items:end;
}

.filtro-item label,
.filtros-cronograma label{
  font-weight:700;
  margin:0 0 6px;
  display:block;
  font-size:.92rem;
  color:var(--ink);
}

.filtros-cronograma select,
.filtro-item input[type="text"]{
  height:44px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f9fafb;
  font-size:.95rem;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s;
  width:100%;
}
.filtros-cronograma select:focus,
.filtro-item input[type="text"]:focus{
  border-color:var(--primary-1);
  box-shadow:0 0 0 4px rgba(94,96,206,.15);
  background:#fff;
  outline:0;
}

.filtros-cronograma .btn-filtrar,
.filtros-cronograma button{
  height:44px;
  border:none;
  border-radius:10px;
  padding:0 18px;
  background:linear-gradient(90deg,var(--primary-1),var(--primary-2));
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s, filter .2s;
}
.filtros-cronograma .btn-filtrar:hover,
.filtros-cronograma button:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
}

/* grid do filtro em telas menores */
@media (max-width:1100px){
  .filtros-cronograma{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  .filtros-cronograma{ grid-template-columns:1fr; }
}

/* Botão criar */
.btn-criar{
  display:inline-block;
  margin:14px 0 0;
  padding:10px 16px;
  background:#22c55e;
  color:#fff;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(34,197,94,.18);
  transition:transform .2s ease, filter .2s ease;
}
.btn-criar:hover{ transform:translateY(-2px); filter:saturate(1.05); }

/* ===================== */
/*  Badges / complement  */
/* ===================== */
.badge-aula{
  display:inline-block;
  margin-left:.4rem;
  padding:.14rem .5rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  background:#E8F0FF;
  color:#1E40AF;
}


/* coloque ao final do seu CSS para sobrescrever */
.cronograma-card h3,
.cronograma-card .cronograma-titulo{
  font-size: clamp(0.95rem, 0.65rem + 0.35vw, 1.20rem);
  line-height: 1.2; /* opcional: compata mais */
}


/* ====== GRID DO FILTRO (FIX) ====== */
.filtros-cronograma-grid{
  display:grid;
  grid-template-columns:
    minmax(180px,1.1fr)   /* Projeto   */
    minmax(160px,1fr)     /* Ciclo     */
    minmax(260px,1.6fr)   /* Nome      */
    minmax(140px,0.9fr)   /* Mês       */
    minmax(120px,0.8fr)   /* Ano       */
    auto;                 /* Botão     */
  gap:16px;
  align-items:end;
}

.filtro-item{ display:flex; flex-direction:column; gap:8px; }
.filtro-item label{
  font-weight:800;
  letter-spacing:.02em;
  color:#333;
}
.filtro-item select,
.filtro-item input{
  width:100%;
  height:48px;
  padding:10px 12px;
  border:1px solid #E6E6F0;
  border-radius:10px;
  background:#F9FAFB;
  font-size:0.95rem;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.filtro-item select:focus,
.filtro-item input:focus{
  outline:none;
  border-color:#7C3AED;
  box-shadow:0 0 0 4px rgba(124,58,237,.12);
  background:#fff;
}

/* Botão alinhado ao fundo e com largura mínima */
.filtro-cta{ align-self:end; justify-self:end; }
.btn-filtrar{
  height:48px;
  min-width:160px;
  padding:0 26px;
  border:0;
  border-radius:12px;
  color:#fff;
  font-weight:800;
  background:linear-gradient(90deg,#6366F1 0%,#7C3AED 100%);
  box-shadow:0 8px 20px rgba(124,58,237,.18);
  cursor:pointer;
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-filtrar:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 12px 26px rgba(124,58,237,.22);
}

/* ------ Responsivo ------ */
@media (max-width: 1200px){
  .filtros-cronograma-grid{
    grid-template-columns:
      minmax(180px,1fr)
      minmax(160px,1fr)
      minmax(220px,1.4fr)
      minmax(140px,1fr)
      minmax(120px,1fr)
      auto;
  }
}
@media (max-width: 900px){
  .filtros-cronograma-grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .filtro-cta{
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .btn-filtrar{ width:100%; }
}
@media (max-width: 580px){
  .filtros-cronograma-grid{
    grid-template-columns: 1fr;
  }
  .filtro-cta{ grid-column:auto; }
}


/* ---------- FILTRO: GRID RESPONSIVO ---------- */
.filtros-cronograma.filtros-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:18px 16px;
  align-items:end;
  margin:24px 0 8px;
  padding:22px;
  background:#fff;
  border:1px solid #eef0f4;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(20,20,43,.06);
}

/* cada campo ocupa 3 colunas no desktop */
.filtros-grid .filtro-item{ grid-column:span 3; min-width:160px; }

/* nome (trilha) maior */
.filtros-grid .filtro-nome{ grid-column:span 4; }

/* botão */
.filtros-grid .filtro-submit{ grid-column:span 2; align-self:end; }

/* labels e campos */
.filtros-grid label{
  display:block;
  font-weight:800;
  letter-spacing:.02em;
  font-size:.85rem;
  color:#5a5f7d;
  margin:0 0 6px;
  text-transform:uppercase;
}

.filtros-grid select,
.filtros-grid input[type="text"]{
  width:100%;
  padding:12px 14px;
  border:1px solid #dfe3ea;
  border-radius:10px;
  background:#f9fafc;
  font-size:.95rem;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

.filtros-grid select:focus,
.filtros-grid input[type="text"]:focus{
  border-color:#7c3aed;
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
  outline:0;
  background:#fff;
}

/* botão filtrar igual ao resto */
.filtros-grid .btn-filtrar{
  width:100%;
  padding:13px 20px;
  border:0;
  border-radius:12px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(90deg,#6d28d9,#9333ea);
  box-shadow:0 12px 24px rgba(109,40,217,.22);
  transition:transform .15s, filter .15s, box-shadow .15s;
}
.filtros-grid .btn-filtrar:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
  box-shadow:0 14px 28px rgba(109,40,217,.28);
}

/* responsividade */
@media (max-width: 1200px){
  .filtros-grid .filtro-item{ grid-column:span 4; }
  .filtros-grid .filtro-nome{ grid-column:span 8; }
  .filtros-grid .filtro-submit{ grid-column:span 4; }
}
@media (max-width: 900px){
  .filtros-grid .filtro-item{ grid-column:span 6; }
  .filtros-grid .filtro-nome{ grid-column:span 12; }
  .filtros-grid .filtro-submit{ grid-column:span 6; }
}
@media (max-width: 640px){
  .filtros-grid .filtro-item,
  .filtros-grid .filtro-nome,
  .filtros-grid .filtro-submit{ grid-column:span 12; }
}

/* opcional: botão “criar” alinhado depois do filtro */
.btn-criar{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:8px 0 16px;
  padding:10px 14px;
  background:#16a34a; color:#fff; border-radius:10px;
  font-weight:800; text-decoration:none;
  box-shadow:0 8px 20px rgba(22,163,74,.18);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.btn-criar:hover{ transform:translateY(-2px); filter:saturate(1.05); }