.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #b91c1c; }
.retos { overflow-x: hidden; }
.retos-noscript { padding: 2rem; text-align: center; font-weight: 700; }

/* Acceso docente: mismo aspecto y PIN que los cuadernos (casos/*.html). */
.retos-docente { width: 100%; max-width: 480px; padding: 24px; background: #fff; border: 1px dashed #c7c9cf; border-radius: 14px; box-shadow: 0 25px 50px #0b142124; color: #334155; }
.retos-docente-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 750; color: #0f172a; }
.retos-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.retos-docente p { margin: 0 0 20px; font-size: .94rem; line-height: 1.6; }
.retos-pin-row { display: flex; flex-direction: column; gap: 12px; }
.retos-pin-row input { min-width: 0; padding: 13px 16px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; font: inherit; letter-spacing: .2em; color: #0f172a; }
.retos-pin-row input:focus-visible { outline: 3px solid #b91c1c; outline-offset: 2px; }
.retos-btn-dark { width: 100%; padding: 13px 21px; border: 1px solid #0f172a; border-radius: 12px; background: #0f172a; color: #fff; font-size: .9rem; font-weight: 750; line-height: 1.4; cursor: pointer; transition: background .2s, transform .2s; }
.retos-btn-dark:hover:not(:disabled) { background: #1e293b; transform: translateY(-1px); }
.retos-btn-dark:disabled { opacity: .6; cursor: wait; }
.retos-docente-status { min-height: 1.3em; margin-top: 13px; font-size: .9rem; color: #b91c1c; }
.retos-docente-cancel { margin-top: 8px; padding: 0; border: 0; background: none; color: #475569; font-size: .8rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.retos-docente-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-bottom: 20px; border-bottom: 1px solid #cbd5e1; font-size: .9rem; font-weight: 700; color: #137353; }
.retos-btn-small { padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: #0f172a; font-size: .85rem; font-weight: 750; cursor: pointer; }
.retos-btn-small:hover { background: #f1f5f9; }
.retos-docente-label { display: block; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #b91c1c; }
.retos-docente-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.65; color: #1e293b; }
.retos-lock-note { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 60px; padding: 14px 16px; border: 1px dashed #c7c9cf; border-radius: 16px; background: #fff; color: #475569; font-size: .75rem; font-weight: 700; text-align: left; cursor: pointer; }
.retos-lock-note:hover { border-color: #b91c1c; color: #b91c1c; }
.retos-docente-text .retos-sol-linea { margin: 0 0 .55rem; }
.retos-docente-text strong { color: #0f172a; }

/* Listado estático: lo ven buscadores, asistentes de IA y navegadores sin JavaScript hasta que arranca la aplicación. */
.retos-listado { max-width: 1024px; margin: 0 auto; padding: 32px 24px 48px; color: #1e293b; }
.retos-listado h1 { margin: 0 0 12px; font-size: 2.2rem; font-weight: 900; color: #000; }
.retos-listado h2 { margin: 32px 0 12px; font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #b91c1c; }
.retos-listado article { margin: 0 0 16px; padding: 20px; background: #fff; border: 1px solid #cbd5e1; border-left: 4px solid #b91c1c; border-radius: 12px; }
.retos-listado h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 900; }
.retos-listado p { margin: 0 0 8px; line-height: 1.6; }
.retos-docente-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.retos-docente-foot .retos-docente-cancel { margin-top: 0; }
.retos-mia { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 1px solid #cbd5e1; }