/* Herramientas de clase: temporizador, sorteo y modo docente. Misma paleta que classroom.css. */
.ct-layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f5fbff; }
.ct-layer > * { pointer-events: auto; }

.ct-btn { appearance: none; border: 1px solid #9bdeee70; border-radius: 14px; padding: 12px 16px; background: #153f6d; color: #e9f8ff; font: 700 15px/1.15 inherit; font-family: inherit; cursor: pointer; }
.ct-btn:hover { background: #1d5288; }
.ct-btn.primary { border-color: #ffbd43; background: #ffbd43; color: #082047; }
.ct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ct-note { margin: 10px 0 4px; color: #cce6f5; font-size: 13px; line-height: 1.4; }
.ct-input { box-sizing: border-box; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #85cdeb80; border-radius: 12px; background: #0a2548; color: #f5fbff; font: 500 15px/1.35 inherit; font-family: inherit; user-select: text; -webkit-user-select: text; }
.ct-row .ct-input { width: 90px; margin-top: 0; }

/* Botón de docente, dentro de la barra superior */
.ct-teacher-btn { pointer-events: auto; padding: 9px 13px; border-radius: 99px; background: #061b4b9c; font-size: 13px; backdrop-filter: blur(12px); }
.ct-teacher-btn.on { border-color: #ffbd43; background: #ffbd43; color: #082047; }

/* Aviso de modo de clase */
.ct-banner { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); max-width: 86vw; padding: 9px 18px; border: 1px solid #93e4f655; border-radius: 99px; background: #061b4bd9; font-size: 14px; font-weight: 700; text-align: center; pointer-events: none; }
.ct-banner.strong { border-color: #ffbd43; background: #ffbd43; color: #082047; font-size: 16px; letter-spacing: .02em; }
.ct-banner.pulse { animation: ct-pulse .6s ease 2; }
@keyframes ct-pulse { 50% { transform: translateX(-50%) scale(1.07); } }

/* En modo examen o silencio no hay pistas, desafíos ni invitación a hablar */
body[data-class-blocked]:not([data-teacher]) .dock, body[data-class-blocked]:not([data-teacher]) #hint, body[data-class-blocked]:not([data-teacher]) #chat { display: none; }

/* Ventanas */
.ct-scrim { position: absolute; inset: 0; background: #001633b3; }
.ct-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 28px); display: flex; flex-direction: column; border: 1px solid #9bdeee70; border-radius: 26px; background: linear-gradient(160deg, #0e305c, #071a39 70%); box-shadow: 0 18px 70px #000c2299; overflow: hidden; }
.ct-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid #acdafa26; }
.ct-modal-head h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.ct-x { appearance: none; border: 0; background: transparent; color: #cce6f5; font-size: 30px; line-height: 1; cursor: pointer; }
.ct-modal-body { padding: 14px 24px 24px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.ct-modal-body h2 { margin: 20px 0 4px; color: #8edce9; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.ct-modal-body h2:first-child { margin-top: 4px; }
.ct-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ct-choice { text-align: left; padding: 12px; }
.ct-choice strong { display: block; font-size: 16px; }
.ct-choice small { display: block; margin-top: 5px; color: #cce6f5; font-size: 12px; font-weight: 500; line-height: 1.3; }
.ct-choice.selected { border-color: #ffbd43; background: #ffbd43; color: #082047; }
.ct-choice.selected small { color: #2b3f63; }

/* PIN */
.ct-pin-dots { margin: 6px 0; font-size: 30px; letter-spacing: .3em; text-align: center; color: #ffbd43; min-height: 40px; }
.ct-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.ct-keypad .ct-btn { padding: 18px 0; font-size: 24px; }

/* Temporizador a pantalla completa */
.ct-timer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 4vh 5vw; box-sizing: border-box; background: radial-gradient(circle at 50% 35%, #123a78, #050f2a 75%); text-align: center; }
.ct-timer[hidden], .ct-modal[hidden], .ct-scrim[hidden], .ct-banner[hidden], .ct-timer-pill[hidden] { display: none; }
.ct-timer-label { font-size: clamp(18px, 4.2vmin, 44px); font-weight: 800; color: #8edce9; letter-spacing: .04em; }
.ct-timer-digits { font-size: min(30vw, 48vh); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #f5fbff; text-shadow: 0 0 6vmin #50e1ff66; }
.ct-timer-bar { width: min(80vw, 900px); height: 14px; border-radius: 99px; background: #0a2548; overflow: hidden; }
.ct-timer-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #50e1ff, #ffbd43); transition: width .25s linear; }
.ct-timer-actions { justify-content: center; margin-top: 2vh; }
.ct-timer-actions .ct-btn { padding: clamp(12px, 1.8vmin, 20px) clamp(16px, 2.8vmin, 30px); font-size: clamp(15px, 2.4vmin, 24px); }
.ct-timer.last .ct-timer-digits { color: #ffbd43; }
.ct-timer.done { animation: ct-flash 1s steps(2) infinite; }
.ct-timer.done .ct-timer-digits { color: #ffbd43; }
.ct-timer.done .ct-timer-label { color: #fff; font-size: clamp(28px, 8vmin, 90px); }
@keyframes ct-flash { 50% { background: radial-gradient(circle at 50% 35%, #b86b00, #2a1500 75%); } }
.ct-timer-pill { position: absolute; top: 74px; right: 24px; border-color: #ffbd43; border-radius: 99px; font-size: 17px; font-variant-numeric: tabular-nums; }

/* Sorteo */
.ct-pick { margin: 14px 0 18px; padding: 26px 12px; border-radius: 18px; background: #0a2548; font-size: clamp(40px, 12vmin, 110px); font-weight: 800; text-align: center; color: #8edce9; }
.ct-pick.final { color: #082047; background: #ffbd43; }

@media (max-width: 640px) { .ct-choices { grid-template-columns: 1fr; } }