/* ============================================================
   style.css — Desafios Python · CETI Ferdinand Freitas
   URL: http://ozitec.com.br/platfcetiff/
   ============================================================ */

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

/* === BASE === */
body{font-family:var(--font-sans,system-ui,sans-serif);background:var(--color-background-tertiary);color:var(--color-text-primary);min-height:100vh;font-size:15px}
input,select,textarea,button{font-family:inherit;font-size:14px}
textarea{font-family:var(--font-mono,monospace);font-size:13px;line-height:1.6;resize:vertical}

/* === ACESSIBILIDADE === */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* === LAYOUT === */
.app{display:flex;min-height:100vh}
.main{flex:1;overflow:auto}
.page{padding:1.5rem;max-width:920px}

/* === SIDEBAR === */
.sidebar{width:224px;background:var(--color-background-primary);border-right:0.5px solid var(--color-border-tertiary);display:flex;flex-direction:column;flex-shrink:0}
.sb-head{padding:1.25rem 1rem;border-bottom:0.5px solid var(--color-border-tertiary)}
.sb-eyebrow{font-size:10px;font-weight:500;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.09em;margin-bottom:3px}
.sb-school{font-size:13px;font-weight:500}
.sb-nav{flex:1;padding:.5rem 0}
.ni{display:flex;align-items:center;gap:8px;padding:7px 1rem;cursor:pointer;font-size:13px;color:var(--color-text-secondary);border:none;background:none;width:100%;text-align:left}
.ni:hover{background:var(--color-background-secondary);color:var(--color-text-primary)}
.ni.active{background:var(--color-background-secondary);color:#0F6E56;font-weight:500}
.ni i{font-size:16px}
.ni-section{padding:6px 1rem 2px;font-size:10px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.07em;margin-top:4px}
.sb-foot{padding:.75rem 1rem;border-top:0.5px solid var(--color-border-tertiary)}

/* === AVATAR === */
.avatar{width:30px;height:30px;border-radius:50%;background:#E1F5EE;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:#0F6E56;flex-shrink:0}
.av-lg{width:42px;height:42px;font-size:15px}

/* === CABEÇALHO DE PÁGINA === */
.ph{margin-bottom:1.5rem}
.pt{font-size:18px;font-weight:500;margin-bottom:3px}
.ps{font-size:13px;color:var(--color-text-secondary)}

/* === CARD === */
.card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg,12px);padding:1rem 1.25rem;margin-bottom:1rem}

/* === ESTATÍSTICAS === */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:1.5rem}
.sc{background:var(--color-background-secondary);border-radius:var(--border-radius-md,8px);padding:.75rem 1rem}
.sl{font-size:11px;color:var(--color-text-secondary);margin-bottom:3px}
.sv{font-size:22px;font-weight:500}

/* === GRID DE DESAFIOS === */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:9px;margin-bottom:1rem}
.cc{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:8px;padding:.875rem;cursor:pointer;transition:border-color .12s,background .12s}
.cc:hover{background:var(--color-background-secondary);border-color:var(--color-border-secondary)}
.cc.sub{border-color:#9FE1CB}
.cc.grd{border-color:#1D9E75}
.cn{font-size:11px;color:var(--color-text-tertiary);margin-bottom:3px}
.ct{font-size:13px;font-weight:500;line-height:1.3;margin-bottom:5px}

/* === BADGES === */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border-radius:20px}
.b-pend{background:var(--color-background-secondary);color:var(--color-text-secondary)}
.b-sent{background:#E1F5EE;color:#0F6E56}
.b-graded{background:#E1F5EE;color:#0F6E56;font-weight:500}

/* === LOGIN === */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-background-tertiary);padding:1rem}
.login-card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg,12px);padding:2rem;width:100%;max-width:400px}
.tab-sw{display:flex;gap:3px;background:var(--color-background-secondary);border-radius:8px;padding:3px;margin-bottom:1.25rem}
.tb{flex:1;padding:6px;border:none;background:none;cursor:pointer;font-size:13px;border-radius:6px;color:var(--color-text-secondary)}
.tb.active{background:var(--color-background-primary);color:#0F6E56;font-weight:500;border:0.5px solid var(--color-border-tertiary)}

/* === FORMULÁRIOS === */
.fl{font-size:12px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;display:block}
.fi{width:100%;padding:8px 10px;border:0.5px solid var(--color-border-secondary);border-radius:8px;background:var(--color-background-primary);color:var(--color-text-primary);outline:none;transition:border-color .15s}
.fi:focus{border-color:#1D9E75;box-shadow:0 0 0 2px rgba(29,158,117,.15)}
.fg{margin-bottom:.875rem}

/* === BOTÕES === */
.btn-p{padding:9px 18px;background:#1D9E75;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500}
.btn-p:hover{opacity:.9}
.btn-p:disabled{opacity:.5;cursor:not-allowed}
.btn-s{padding:7px 13px;background:var(--color-background-secondary);color:var(--color-text-primary);border:0.5px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;font-size:13px}
.btn-s:hover{background:var(--color-background-primary)}
.btn-danger{padding:7px 13px;background:#FCEBEB;color:#A32D2D;border:0.5px solid #F7C1C1;border-radius:8px;cursor:pointer;font-size:13px}

/* === MENSAGENS === */
.err{font-size:13px;color:#A32D2D;background:#FCEBEB;padding:8px 10px;border-radius:8px;margin-top:.75rem}
.ok{font-size:13px;color:#0F6E56;background:#E1F5EE;padding:8px 10px;border-radius:8px;margin-top:.75rem}

/* === NAVEGAÇÃO (VOLTAR) === */
.back{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--color-text-secondary);cursor:pointer;border:none;background:none;padding:0;margin-bottom:1rem}
.back:hover{color:var(--color-text-primary)}

/* === TABELA === */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:500;font-size:11px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:0.5px solid var(--color-border-tertiary)}
.tbl td{padding:9px 12px;border-bottom:0.5px solid var(--color-border-tertiary);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--color-background-secondary);cursor:pointer}

/* === CÓDIGO === */
.code-view{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:8px;padding:1rem;font-family:var(--font-mono,monospace);font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-word;max-height:380px;overflow:auto}

/* === DESCRIÇÃO DE DESAFIO === */
.desc{background:#E1F5EE;border:0.5px solid #9FE1CB;border-radius:8px;padding:.875rem 1rem;margin-bottom:1rem;font-size:13px;color:#085041;line-height:1.6}

/* === BARRA DE PROGRESSO === */
.pg{height:6px;background:var(--color-background-secondary);border-radius:3px;overflow:hidden;margin-top:5px}
.pb{height:100%;background:#1D9E75;border-radius:3px}

/* === NOTA (GRADE PILL) === */
.gp{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500}
.g-hi{background:#E1F5EE;color:#0F6E56}
.g-mi{background:#FAEEDA;color:#854F0B}
.g-lo{background:#FCEBEB;color:#A32D2D}
.g-no{background:var(--color-background-secondary);color:var(--color-text-secondary)}

/* === UPLOAD === */
.upload-zone{border:1.5px dashed var(--color-border-secondary);border-radius:10px;padding:1.5rem;text-align:center;cursor:pointer;background:var(--color-background-secondary);transition:border-color .15s}
.upload-zone:hover{border-color:#1D9E75;background:#E1F5EE}

/* === CHIPS === */
.turma-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:#E1F5EE;color:#0F6E56;border-radius:20px;font-size:12px;font-weight:500;margin:2px}
.chip-class{padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;background:var(--color-background-info,#E6F1FB);color:var(--color-text-info,#185FA5)}

/* === ANIMAÇÕES === */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}