/* =====================================================================
 * Modo claro / oscuro (botón 🌙/☀️ de la barra superior).
 * <html data-theme="light|dark">: el aula es clara por defecto y CodeUp oscuro;
 * la elección de cada persona se guarda en su dispositivo (ver applyTheme en app.js).
 * ===================================================================== */

/* Switch claro / oscuro: ☀️ a la izquierda, 🌙 a la derecha, la bolita marca el modo activo. */
.theme-btn {
  position: relative; flex: none; width: 64px; height: 32px; border-radius: 999px; padding: 0 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--line);
  background: #e8eef6; font-size: .8rem; line-height: 1; transition: background .25s, border-color .25s;
}
.theme-btn .ts-ico { position: relative; z-index: 1; width: 18px; text-align: center; transition: opacity .25s; }
.theme-btn .ts-knob {
  position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .25); transition: transform .25s cubic-bezier(.3, .9, .4, 1.2);
}
.theme-btn[aria-checked="true"] { background: #1e2a44; border-color: #34446a; }
.theme-btn[aria-checked="true"] .ts-knob { transform: translateX(32px); background: #0b1020; box-shadow: 0 0 0 1.5px #4b5d8a, 0 2px 6px rgba(0, 0, 0, .4); }
.theme-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.login-theme { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.cu-top-actions { display: flex; align-items: center; gap: .6rem; }

/* ---------------------------------------------------------------------
 * Aula en modo oscuro
 * --------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --brand: #3ea8e2; --brand-600: #67bdec; --brand-50: rgba(62, 168, 226, .15);
  --ink: #e6ecf5; --ink-2: #aab6c8; --ink-3: #7d8aa0;
  --line: #24405f; --bg: #0b1a2c; --card: #11263d;
  --ok-50: rgba(16, 185, 129, .15); --danger-50: rgba(225, 29, 72, .15); --warn-50: rgba(245, 158, 11, .14); --info-50: rgba(62, 168, 226, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .btn-primary { background: #0b74b0; }
html[data-theme="dark"] .btn-primary:hover { background: #0a86cc; }
html[data-theme="dark"] .topbar { background: rgba(11, 26, 44, .9); }
/* El logo es un JPG/PNG con fondo blanco: sobre oscuro va en una placa blanca. */
html[data-theme="dark"] img.logo { mix-blend-mode: normal; background: #fff; border-radius: 10px; padding: 6px 10px; box-sizing: content-box; }
html[data-theme="dark"] .login-form img.logo { padding: 8px 14px; }

html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .search, html[data-theme="dark"] .chip, html[data-theme="dark"] .copy,
html[data-theme="dark"] .file-chip, html[data-theme="dark"] .disc, html[data-theme="dark"] .post,
html[data-theme="dark"] .qdot, html[data-theme="dark"] .qcard, html[data-theme="dark"] .score-ring > div,
html[data-theme="dark"] .verify-form, html[data-theme="dark"] .vcard, html[data-theme="dark"] .verify-result .loading.sm,
html[data-theme="dark"] .verify-top, html[data-theme="dark"] .subtabs a, html[data-theme="dark"] .cu-pchip,
html[data-theme="dark"] .cu-phase select, html[data-theme="dark"] .cu-selects select { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .search { background: var(--bg); }
html[data-theme="dark"] .dropdown, html[data-theme="dark"] .modal { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .course-card .img > span, html[data-theme="dark"] .course-card .badge { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .error { background: rgba(225, 29, 72, .15); color: #fda4af; }
html[data-theme="dark"] .note { background: var(--warn-50); color: #fcd34d; }
html[data-theme="dark"] .continue .ico { background: var(--warn-50); }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #172030 25%, #1f2a3d 50%, #172030 75%); background-size: 200% 100%; }
html[data-theme="dark"] .pay-summary { background: linear-gradient(120deg, var(--brand-50), rgba(62, 168, 226, .05)); }
html[data-theme="dark"] .profile-avatar { border-color: var(--card); background: var(--card); }
html[data-theme="dark"] .feedback { border-color: rgba(16, 185, 129, .35); background: linear-gradient(180deg, var(--ok-50), var(--card) 60%); }
html[data-theme="dark"] .dropzone { background: rgba(62, 168, 226, .06); border-color: #2f4a63; }
html[data-theme="dark"] .post.first { border-color: #2f4a63; background: linear-gradient(180deg, var(--brand-50), var(--card) 120px); }
html[data-theme="dark"] .quiz-bar { background: rgba(11, 26, 44, .95); }
html[data-theme="dark"] .review-hero.good { background: linear-gradient(120deg, var(--ok-50), var(--card)); }
html[data-theme="dark"] .review-hero.low { background: linear-gradient(120deg, var(--warn-50), var(--card)); }
html[data-theme="dark"] .book-toc button:hover, html[data-theme="dark"] .book-toc button.on { background: var(--card); }
html[data-theme="dark"] .cert { background: radial-gradient(circle at 0 0, rgba(245, 158, 11, .14) 0, var(--card) 45%), var(--card); border-color: rgba(245, 158, 11, .4); }
html[data-theme="dark"] .cert-badge { box-shadow: 0 0 0 10px rgba(245, 158, 11, .14); }
html[data-theme="dark"] .qdot.on { background: var(--card); }
html[data-theme="dark"] .subtabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme="dark"] .cu-code-chip { background: var(--warn-50); color: #fcd34d; }
html[data-theme="dark"] .cu-noteline { color: #fcd34d !important; }
html[data-theme="dark"] .toast { background: #26324a; }
/* Contenido de las actividades (HTML de Moodle con colores propios). */
html[data-theme="dark"] .prose { color: var(--ink); }
html[data-theme="dark"] .prose img { background: #fff; border-radius: 6px; }

/* ---------------------------------------------------------------------
 * CodeUp en modo claro
 * --------------------------------------------------------------------- */
html[data-theme="light"] .cu {
  --cu-bg: #f4f6fc; --cu-bg2: #eef1fa; --cu-card: #ffffff; --cu-line: #dbe1f0;
  --cu-text: #111833; --cu-muted: #5b6488; --cu-green: #16a34a; --cu-blue: #0284c7; --cu-purple: #7c3aed; --cu-gold: #b45309;
  background: radial-gradient(1200px 600px at 10% -10%, #dbe6ff 0, transparent 60%), radial-gradient(900px 500px at 110% 10%, #ece1ff 0, transparent 55%), var(--cu-bg);
}
html[data-theme="light"] body.cu-mode { background: #f4f6fc; }
html[data-theme="light"] body.cu-mode .topbar { background: rgba(255, 255, 255, .9); border-bottom-color: var(--line); }
html[data-theme="light"] body.cu-mode .topbar nav a { color: var(--ink-2); }
html[data-theme="light"] body.cu-mode .topbar nav a:hover { background: var(--brand-50); color: var(--brand); }
html[data-theme="light"] body.cu-mode .topbar nav a.on { background: rgba(22, 163, 74, .12); color: #15803d; }
html[data-theme="light"] body.cu-mode .user-menu .user-btn { color: var(--ink); }
html[data-theme="light"] body.cu-mode .topbar img.logo, html[data-theme="light"] .cu-brand img { background: transparent; mix-blend-mode: multiply; }

html[data-theme="light"] .cu-pixels { opacity: .35; }
html[data-theme="light"] .cu-btn-ghost, html[data-theme="light"] .cu-chips span,
html[data-theme="light"] .cu-step-ico, html[data-theme="light"] .cu-pill { background: rgba(17, 24, 51, .05); }
html[data-theme="light"] .cu-th { background: rgba(17, 24, 51, .04); }
html[data-theme="light"] .cu-field select option { background: #fff; color: #111833; }
html[data-theme="light"] .cu-field input, html[data-theme="light"] .cu-field select, html[data-theme="light"] .cu-field textarea { background: #fff; color-scheme: light; }
html[data-theme="light"] .cu-alert.bad { color: #b91c1c; }
html[data-theme="light"] .cu-alert.warn, html[data-theme="light"] .cu-soon { color: #92400e; }
html[data-theme="light"] .cu-pill.ok, html[data-theme="light"] .cu-rules li.ok { color: #15803d; }
html[data-theme="light"] .cu-pill.warn { color: #92400e; }
html[data-theme="light"] .cu-pill.bad, html[data-theme="light"] .cu-note, html[data-theme="light"] .cu-field.miss > span { color: #b91c1c; }
html[data-theme="light"] .cu-lock { background: rgba(17, 24, 51, .62); color: #fff; }
html[data-theme="light"] .cu-mission-img { background-color: #e2e8f0; }
html[data-theme="light"] .cu-mission, html[data-theme="light"] .cu-step, html[data-theme="light"] .cu-cat,
html[data-theme="light"] .cu-card { box-shadow: 0 1px 2px rgba(17, 24, 51, .04), 0 8px 24px rgba(17, 24, 51, .06); }
/* Las insignias tienen fondo oscuro: en modo claro se muestran sobre una "pantalla" oscura. */
html[data-theme="light"] .cu-cat-badge { background: #0b1020; border-radius: 16px; margin: 0 0 .6rem; }
html[data-theme="light"] .cu-me-badge { background: #0b1020; border-radius: 28px; padding: .5rem; }
html[data-theme="light"] .cu-me-badge::before { opacity: .3; }
html[data-theme="light"] .cu-suggest img { background: #0b1020; border-radius: 12px; }
html[data-theme="light"] .cu-h1 { filter: drop-shadow(0 3px 0 rgba(17, 24, 51, .12)); }
.login-form-wrap { position: relative; }
/* Los banners mantienen el azul Superatec original. */
html[data-theme="dark"] .login-hero, html[data-theme="dark"] .verify-hero, html[data-theme="dark"] .profile-cover { --brand: #006298; }
html[data-theme="dark"] .hero, html[data-theme="dark"] .welcome { --brand: #006298; }
html[data-theme="light"] .cu-brand span { color: #15803d; }

/* El logo ocupa siempre el mismo espacio (misma placa); solo cambia el color de la placa,
   así el menú no se mueve al pasar de claro a oscuro. */
html .topbar img.logo, html .cu-brand img, html body.cu-mode .topbar img.logo {
  height: 46px; width: auto; padding: 6px 10px; box-sizing: content-box; border-radius: 10px; margin: 0; clip-path: none;
}
html[data-theme="light"] .topbar img.logo, html[data-theme="light"] .cu-brand img { background: transparent; mix-blend-mode: multiply; }
html[data-theme="dark"] .topbar img.logo, html[data-theme="dark"] .cu-brand img { background: #fff; mix-blend-mode: normal; }
@media (max-width: 520px) {
  html .topbar img.logo, html .cu-brand img, html body.cu-mode .topbar img.logo { height: 34px; padding: 5px 8px; }
}

/* Flecha propia en todas las listas desplegables del aula (la nativa se ve tosca y distinta en cada navegador). */
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.4rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23006298' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
}
/* Algunas reglas cambian el color de fondo con el atajo «background:», que reinicia esto y repetía la flecha como un zigzag. */
select:not([multiple]):not([size]) {
  background-repeat: no-repeat !important; background-position: right .9rem center !important; background-size: 12px 8px !important;
}
select:not([multiple]):not([size]):hover { border-color: var(--brand); }
html[data-theme="dark"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%233ea8e2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] select option { background: var(--card); color: var(--ink); }
.cu select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="light"] .cu select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%230284c7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Filtros seleccionados en azul Superatec (antes negro) */
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.on small { opacity: .85; }

/* Avisos de color en modo oscuro: texto claro (el oscuro del modo claro no se leía sobre fondo oscuro) */
html[data-theme="dark"] .alert-warn { color: #fcd34d; }
html[data-theme="dark"] .alert-error { color: #fda4af; }
html[data-theme="dark"] .alert-info { color: #93c5fd; }
html[data-theme="dark"] .alert-ok { color: #6ee7b7; }