/* ============================================================
   COLÉGIO ALTERNATIVO — extracurriculares.css
   Estilos específicos desta página. Requer base.css.
   ============================================================ */

.nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.extra-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

.extra-grid .extra-img { flex: 0 0 calc((100% - 2rem) / 3); }

.extra-img { border-radius: var(--radius); overflow: hidden; background: var(--line-2); }

.extra-img img { width: 100%; height: auto; display: block; transition: var(--transition); }

.extra-img:hover img { transform: scale(1.03); }

@media (max-width: 768px) {
  .extra-grid .extra-img { flex: 0 0 calc((100% - 1rem) / 2); }
}

@media (max-width: 480px) {
  .extra-grid .extra-img { flex: 0 0 100%; }
}

.atividade-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 2rem 0; }

.atividade-card {
      border: 2px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1rem;
      cursor: pointer; transition: var(--transition); text-align: center; background: var(--white);
    }

.atividade-card:hover { border-color: var(--sky); box-shadow: var(--shadow-sm); transform: translateY(-3px); }

.atividade-card.selected { border-color: var(--sky); background: var(--ice); }

.atividade-card .emoji { font-size: 2.2rem; margin-bottom: 0.5rem; }

.atividade-card .nome { font-weight: 700; color: var(--sky); font-size: 0.95rem; }

.atividade-card .preco-tag { font-size: 0.75rem; font-weight: 700; margin-top: 6px; padding: 3px 9px; border-radius: 20px; display: inline-block; }

.preco-pago { background: #fef9c3; color: #a16207; }

.turma-option.selected { border-color: var(--sky); background: var(--ice); }

.turma-option .horario-tag {
      display: inline-block; background: var(--ice); color: var(--sky-hover);
      padding: 3px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; margin: 4px 4px 0 0;
    }

.modal-step-nav {
      display: flex; gap: 0.5rem; margin-bottom: 1.4rem;
    }

.step-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--line); transition: var(--transition);
    }

.step-dot.active { background: var(--sky); width: 22px; border-radius: 4px; }

.step-dot.done { background: var(--sky); }

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

.ex-field { margin-bottom: 1rem; }

.ex-field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 0.35rem; }

.ex-field input, .ex-field select {
      width: 100%; padding: 0.7rem 1rem; border: 1.5px solid var(--line); border-radius: 10px;
      font-family: 'Outfit', sans-serif; font-size: 0.93rem; color: var(--ink);
      background: var(--ice); transition: border-color .2s, box-shadow .2s; outline: none; box-sizing: border-box;
    }

.ex-field input:focus, .ex-field select:focus { border-color: var(--sky-light); box-shadow: 0 0 0 3px rgba(8,157,217,.12); background: white; }

.ex-field input.err { border-color: #ef4444; background: #fff5f5; }

.ex-field .ex-hint { font-size: 0.72rem; margin-top: 4px; color: var(--ink-3); }

.ex-field .ex-hint.ok { color: #15803d; font-weight: 600; }

.ex-field .ex-hint.bad { color: #ef4444; font-weight: 600; }

.ex-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 560px) {
  .ex-2col { grid-template-columns: 1fr; }
}

.ex-file-area { margin-bottom: 1.1rem; }

.ex-file-area label.lbl { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 0.4rem; }

.ex-file-btn {
      display: flex; align-items: center; gap: 10px;
      border: 1.5px dashed var(--ink-3); border-radius: 10px; padding: 0.8rem 1rem;
      cursor: pointer; background: var(--ice); transition: border-color .2s, background .2s;
    }

.ex-file-btn.has { border-color: #16a34a; background: #f0fdf4; }

.ex-file-btn .ico { font-size: 1.3rem; flex-shrink: 0; }

.ex-file-btn .txt { font-size: 0.82rem; color: var(--ink-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ex-file-btn.has .txt { color: #16a34a; font-weight: 600; }

.ex-file-preview { margin-top: 6px; max-width: 100%; max-height: 180px; border-radius: 8px; border: 1.5px solid var(--line); object-fit: contain; background: var(--ice); display: none; }

.ex-sig-wrap { display: flex; flex-direction: column; align-items: center; }

.ex-sig-label { font-size: 0.82rem; color: var(--ink-2); margin-bottom: 0.6rem; align-self: flex-start; }

#exSigCanvas {
      border: 2px dashed var(--line); border-radius: 10px; cursor: crosshair;
      background: var(--ice); display: block; width: 100%; height: 150px; touch-action: none;
    }

.ex-sig-btns { display: flex; gap: 0.8rem; margin-top: 0.8rem; justify-content: center; }

.ex-sig-btns button { border: none; border-radius: 8px; padding: 0.55rem 1.2rem; font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; }

.ex-sig-clear { background: var(--line-2); color: var(--ink); }

.ex-sig-confirm { background: var(--sky); color: white; }

.ex-sig-confirm:disabled { background: var(--line); color: var(--ink-3); cursor: default; }

.ex-btn-back { background:var(--line-2);color:var(--ink);border:none;padding:0.7rem 1.4rem;border-radius:50px;font-weight:600;cursor:pointer;font-size:0.88rem;font-family:'Outfit',sans-serif; }

*{margin:0;padding:0;box-sizing:border-box;}

'
    +'@page{margin:12mm 14mm;size:A4;}