/* ===== Tokens iPsy ===== */
:root{
  --azul-profundo:#1B3A6B; --azul-medio:#2E5AAC;
  --coral:#E8553E; --coral-claro:#FFF0EC;
  --gelo:#F7F8FC; --noite:#0D1F3C;
  --cinza:#5b6b86; --borda:#e4e8f2; --branco:#fff;
  --raio:16px; --sombra:0 8px 30px rgba(27,58,107,.10);
}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'DM Sans',-apple-system,sans-serif;
  background:var(--gelo); color:var(--noite);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  display:flex; flex-direction:column; min-height:100vh;
}

h1,h2,h3,.wordmark{font-family:'Plus Jakarta Sans',sans-serif}

/* ===== Layout ===== */
.wrap{
  width:100%; max-width:460px; margin:auto; padding:24px 20px 48px;
  flex:1; display:flex; flex-direction:column; justify-content:center;
}
.wordmark{
  font-weight:800; font-size:26px; color:var(--azul-profundo);
  text-align:center; letter-spacing:-.5px; margin-bottom:4px;
}
.wordmark span{color:var(--coral)}
.subtitle{text-align:center; color:var(--cinza); font-size:14px; margin-bottom:28px}

.card{
  background:var(--branco); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:28px 24px;
}
.card h2{font-size:20px; color:var(--azul-profundo); margin-bottom:6px}
.card p.hint{color:var(--cinza); font-size:14px; margin-bottom:20px}

/* ===== Form ===== */
label{display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--noite)}
input[type=email]{
  width:100%; padding:14px 16px; font-size:16px; font-family:inherit;
  border:1.5px solid var(--borda); border-radius:12px; background:var(--gelo);
  transition:border-color .15s;
}
input[type=email]:focus{outline:none; border-color:var(--azul-medio)}

/* OTP boxes */
.otp{display:flex; gap:8px; justify-content:space-between; margin-bottom:8px}
.otp input{
  width:46px; height:56px; text-align:center; font-size:24px; font-weight:700;
  border:1.5px solid var(--borda); border-radius:12px; background:var(--gelo);
  font-family:'Plus Jakarta Sans',sans-serif; color:var(--azul-profundo);
}
.otp input:focus{outline:none; border-color:var(--coral)}

/* ===== Buttons ===== */
.btn{
  width:100%; padding:15px; font-size:16px; font-weight:700; font-family:inherit;
  border:none; border-radius:12px; cursor:pointer; margin-top:16px;
  transition:transform .08s, opacity .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--coral); color:#fff}
.btn-primary:disabled{opacity:.55; cursor:not-allowed}
.btn-ghost{background:transparent; color:var(--azul-medio); box-shadow:none; margin-top:8px}
.btn .spin{display:none}
.btn.loading .label{display:none}
.btn.loading .spin{display:inline-block; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Course cards ===== */
.cursos{display:flex; flex-direction:column; gap:12px; margin-bottom:8px}
.curso{
  display:flex; align-items:center; gap:14px; padding:16px;
  border:1.5px solid var(--borda); border-radius:12px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.curso.sel{border-color:var(--coral); background:var(--coral-claro)}
.curso.lock{cursor:default; opacity:.65; background:var(--gelo)}
.curso.lock .nome{color:var(--cinza)}
.curso .check.lock{background:transparent; border:none; font-size:18px}
.curso .check{
  width:22px; height:22px; border-radius:6px; border:2px solid var(--borda);
  flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:13px;
}
.curso.sel .check{background:var(--coral); border-color:var(--coral)}
.curso .info{flex:1}
.curso .nome{font-weight:700; color:var(--azul-profundo)}
.curso .meta{font-size:13px; color:var(--cinza)}

/* ===== Misc ===== */
.msg{font-size:14px; padding:12px 14px; border-radius:10px; margin-top:14px; display:none}
.msg.err{background:#fdecea; color:#b3261e; display:block}
.msg.ok{background:#e7f5ec; color:#1b6e3c; display:block}
.empty{text-align:center; color:var(--cinza); padding:24px 8px}
.empty .ico{font-size:38px; margin-bottom:8px}

.screen{display:none}
.screen.active{display:block}

.done{text-align:center}
.done .ico{font-size:54px; margin-bottom:8px}
.dl-list{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.dl-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1.5px solid var(--borda); border-radius:12px; text-align:left;
}
.dl-item .nome{font-weight:700; color:var(--azul-profundo); font-size:15px}
.dl-item .cod{font-size:12px; color:var(--cinza)}
.dl-item a{color:var(--coral); font-weight:700; text-decoration:none; font-size:14px; white-space:nowrap}

footer{text-align:center; color:var(--cinza); font-size:12px; padding:16px}
footer a{color:var(--azul-medio); text-decoration:none}

.back{
  background:none; border:none; color:var(--azul-medio); cursor:pointer;
  font-size:14px; font-family:inherit; margin-bottom:14px; padding:0;
}

/* ===== Validar page ===== */
.valid-badge{
  text-align:center; padding:8px 0 4px;
}
.valid-badge .ico{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  margin:0 auto 12px; font-size:32px; color:#fff;
}
.valid-badge.ok .ico{background:#1b9e4b}
.valid-badge.no .ico{background:#b3261e}
.valid-badge h2{font-size:22px}
.cert-row{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--borda)}
.cert-row:last-child{border-bottom:none}
.cert-row .k{color:var(--cinza); font-size:14px}
.cert-row .v{font-weight:700; text-align:right; color:var(--noite); font-size:14px}