/* Reto Lector — estilos con temas */
:root {
  --bg1: #0f1b3d; --bg2: #16275c; --bg3: #1d3568;
  --card-bg: rgba(20, 30, 60, .88);
  --card-border: #2c3f7a;
  --input-bg: #0d1530;
  --input-border: #33457f;
  --accent: #2d6a4f; --accent-hover: #37835f;
  --gold: #ffd166;
  --text: #eef1f8;
  --muted: #8b9ac7;
  --soft: #9fb0dd;
  --danger: #6d2b2b; --danger-border: #ff9b8a;
  --item-bg: #16214a;
}
[data-theme="marino"] {
  --bg1: #081a33; --bg2: #0e2b55; --bg3: #15407a;
  --card-bg: rgba(12, 30, 58, .9);
  --card-border: #23508f;
  --input-bg: #081527; --input-border: #28508f;
  --accent: #1f6fb2; --accent-hover: #2b86d0;
  --item-bg: #10294d;
}
[data-theme="vino"] {
  --bg1: #250d2e; --bg2: #3a1447; --bg3: #521d63;
  --card-bg: rgba(38, 15, 48, .9);
  --card-border: #633078;
  --input-bg: #1c0b24; --input-border: #5a2c6e;
  --accent: #9c3d5c; --accent-hover: #b84a6e;
  --item-bg: #321342;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text);
}
.hidden { display: none !important; }
.view { max-width: 1000px; margin: 0 auto; padding: 24px 16px; }

/* Login */
#view-login { display: flex; justify-content: center; padding-top: 7vh; }
.login-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 38px 34px;
  width: 100%; max-width: 420px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.logo { font-size: 3.4rem; line-height: 1; }
.login-card h1 { font-size: 2rem; margin: 8px 0 4px; letter-spacing: 1px; }
.tagline { color: var(--soft); margin-bottom: 8px; font-size: .95rem; }
.features { display: flex; justify-content: center; gap: 14px; margin: 14px 0 18px; font-size: .8rem; color: var(--muted); }
.features span { background: var(--item-bg); border: 1px solid var(--card-border); padding: 5px 10px; border-radius: 20px; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab {
  flex: 1; padding: 9px; border-radius: 9px; border: 1px solid var(--input-border);
  background: transparent; color: var(--soft); cursor: pointer; font-size: .92rem;
}
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.auth-form input {
  width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 9px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 1rem;
}
.hint { font-size: .82rem; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.error { color: var(--danger-border); font-size: .85rem; min-height: 1.2em; margin-top: 8px; }

/* Botones */
.btn {
  background: var(--item-bg); color: var(--text); border: 1px solid var(--input-border);
  border-radius: 10px; padding: 11px 18px; font-size: .95rem; cursor: pointer;
  transition: background .15s, transform .05s; width: 100%;
}
.btn:hover:not(:disabled) { background: var(--card-border); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.small { width: auto; padding: 7px 14px; font-size: .85rem; }

/* Barra superior */
.topbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 12px 18px; margin-bottom: 20px;
}
.brand { font-size: 1.25rem; font-weight: 700; }
.brand small { color: var(--muted); font-weight: 400; }
.userbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge {
  background: var(--accent); padding: 3px 10px; border-radius: 20px; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.badge.profesor, .badge.admin { background: #7a5c1e; }
.badge.baja { background: #6d2b2b; }
select.theme-pick {
  background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border);
  border-radius: 8px; padding: 6px 8px; font-size: .82rem;
}

/* Tarjetas */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 20px;
}
.card h2 { font-size: 1.1rem; margin-bottom: 10px; color: var(--gold); }
.card input {
  width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 9px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 1rem;
}
.card select {
  width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 9px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 1rem;
}
.status-line { min-height: 1.3em; font-size: .88rem; color: var(--soft); margin-top: 8px; }
.teacher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.teacher-grid .card:first-child { grid-column: 1 / -1; }

/* Listas */
.list { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.list-item {
  background: var(--item-bg); border: 1px solid var(--card-border); border-radius: 10px;
  padding: 10px 12px; font-size: .9rem; display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.list-item .meta { color: var(--muted); font-size: .8rem; }
.student-row { cursor: pointer; transition: border-color .15s; }
.student-row:hover { border-color: var(--gold); }
.course-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--card-border); border-radius: 10px;
  padding: 11px 12px; cursor: pointer; font-size: .92rem;
}
.course-head:hover { border-color: var(--gold); }
.course-head .ch-title { font-weight: 700; flex: 1; }
.course-head .chevron { color: var(--gold); font-size: .9rem; }
.course-body { padding-left: 12px; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.report-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.stat {
  background: var(--item-bg); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px 16px; min-width: 110px; flex: 1;
}
.stat .num { font-size: 1.6rem; font-weight: 800; color: var(--gold); }
.stat .lab { font-size: .78rem; color: var(--muted); }
.sub { font-size: .95rem; color: var(--soft); margin: 12px 0 8px; }
.join-row { display: flex; gap: 8px; }
.divider {
  text-align: center; color: var(--muted); font-size: .82rem;
  margin: 14px 0 10px; border-top: 1px dashed var(--card-border); padding-top: 12px;
}
.csv-preview {
  background: var(--input-bg); border: 1px dashed var(--input-border); border-radius: 9px;
  padding: 10px; font-size: .78rem; line-height: 1.6; overflow-x: auto;
  color: var(--soft); margin-bottom: 10px; white-space: pre;
}
.tabs.mini { margin-bottom: 12px; }
.tabs.mini .tab { padding: 7px; font-size: .85rem; }
.quiz-editor {
  background: var(--item-bg); border: 1px solid var(--gold); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; max-height: 70vh; overflow-y: auto;
}
.quiz-editor .lbl { display: block; font-size: .82rem; color: var(--soft); margin: 10px 0 4px; }
.quiz-editor input[type=text], .quiz-editor select, .quiz-editor textarea {
  width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--input-border);
  background: var(--input-bg); color: var(--text); font-size: .92rem; margin-bottom: 6px;
}
.quiz-editor textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.quiz-editor .qe-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.q-edit {
  border: 1px solid var(--card-border); border-radius: 10px; padding: 10px;
  margin: 10px 0; background: var(--bg2);
}
.q-edit .q-head { display: flex; gap: 8px; align-items: center; }
.q-edit .q-head input { flex: 1; }
.q-edit .q-head .btn { width: auto; }
.q-edit .qe-opts { margin-top: 6px; }
.q-edit .qe-opt-row { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; }
.q-edit .qe-opt-show {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px;
  padding: 8px 10px; cursor: pointer;
}
.q-edit .qe-opt-show:hover { border-color: var(--gold); }
.q-edit .qe-opt-text { font-size: .92rem; color: var(--text); line-height: 1.4; }
.q-edit .qe-opt-row > input.qe-opt {
  width: 34%; flex: none; margin-bottom: 0;
  border-style: dashed; font-size: .85rem; padding: 8px;
}
.q-edit .qe-opts input[type=radio] { accent-color: var(--accent); }
.check-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.check-grid label {
  display: flex; align-items: center; gap: 6px; background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: 8px; padding: 8px 12px; font-size: .88rem; cursor: pointer;
}
.check-grid input { accent-color: var(--accent); }

.group-sub {
  font-size: .85rem; color: var(--soft); padding: 6px 12px 2px; font-weight: 600;
}
.join-row select, .join-row input {
  flex: 1; padding: 12px; margin-bottom: 10px; border-radius: 9px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 1rem;
}
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.quiz-card {
  background: linear-gradient(150deg, var(--item-bg), var(--bg2));
  border: 1px solid var(--card-border); border-radius: 14px; padding: 16px;
  cursor: pointer; transition: transform .1s, border-color .15s;
}
.quiz-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.quiz-card h3 { font-size: 1rem; margin-bottom: 6px; }
.quiz-card .meta { color: var(--muted); font-size: .82rem; }
.score-pill {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
}
.score-pill.good { background: var(--accent); }
.score-pill.mid { background: #7a5c1e; }
.score-pill.pending { background: var(--input-border); }

/* Vista quiz */
.quiz-view { max-width: 780px; margin: 0 auto; }
.quiz-view h2 { margin: 14px 0; }
.reading-box {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px;
  padding: 24px; margin-bottom: 16px;
}
.reading-box h3 { color: var(--gold); margin-bottom: 12px; }
#reading-text { line-height: 1.75; font-size: 1.02rem; text-align: justify; margin-bottom: 18px; }
.qnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.qdot {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--input-border);
  background: var(--item-bg); color: var(--soft); cursor: pointer; font-size: .85rem;
}
.qdot.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.qdot.answered { background: #7a5c1e; border-color: #7a5c1e; color: #fff; }
.qblock { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 22px; }
.qblock .qtext { font-size: 1.05rem; margin-bottom: 16px; font-weight: 600; }
.opt {
  display: block; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px;
  background: var(--item-bg); border: 1px solid var(--card-border); border-radius: 10px; color: var(--text);
  font-size: .95rem; cursor: pointer;
}
.opt:hover { border-color: var(--gold); }
.opt.selected { background: var(--accent); border-color: var(--accent); }
.opt.correct { background: var(--accent); border-color: #4ade80; }
.opt.wrong { background: var(--danger); border-color: var(--danger-border); }
.quiz-actions { display: flex; gap: 10px; margin-top: 16px; }

/* Resultado */
.big-score {
  font-size: 3.4rem; font-weight: 800; text-align: center; margin: 18px 0 4px;
}
#result-msg { text-align: center; margin-bottom: 16px; font-size: 1.05rem; }
#result-detail { margin-bottom: 16px; }
#result-detail .qblock { margin-bottom: 10px; padding: 14px; }

footer { text-align: center; margin-top: 30px; color: var(--muted); font-size: .78rem; }

@media (max-width: 760px) {
  .teacher-grid { grid-template-columns: 1fr; }
  .features { flex-wrap: wrap; }
}