:root { --ink:#153a45; --deep:#073542; --teal:#007c82; --aqua:#23b9bc; --sand:#e4d7c5; --paper:#f7f5ef; --coral:#e16d5c; --white:#fff; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); } button { font:inherit; cursor:pointer; }
.brand { display:flex; align-items:center; gap:14px; font-weight:700; letter-spacing:.03em; } .brand img { width:122px; height:auto; object-fit:contain; }
.eyebrow { color:var(--teal); letter-spacing:.13em; font-size:.75rem; font-weight:800; margin:0 0 12px; }
.formador { min-height:100vh; display:grid; grid-template-columns:300px 1fr; background:#edf1ef; }
.sidebar { background:var(--deep); color:#fff; padding:24px 18px; display:flex; flex-direction:column; gap:22px; position:relative; z-index:2; } .sidebar .brand { font-size:.87rem; } .sidebar .brand img { filter:brightness(0) invert(1); }
.side-title { margin:0; font-size:.95rem; color:#a7d8d7; text-transform:uppercase; letter-spacing:.08em; } .question-list { display:grid; gap:8px; }
.question-launch { text-align:left; padding:11px; border:1px solid rgba(255,255,255,.2); border-radius:10px; color:white; background:transparent; font-size:.77rem; line-height:1.3; } .question-launch:hover,.question-launch.active { background:var(--teal); border-color:var(--aqua); }.question-launch small { display:block; color:#a7d8d7; margin-top:4px; }
.side-actions { margin-top:auto; display:grid; gap:8px; }.control-btn { padding:11px 12px; border-radius:8px; border:0; background:#fff; color:var(--deep); font-weight:700; }.control-btn.secondary { background:transparent; border:1px solid #8fb4b5; color:#fff; }.control-btn.danger { color:#fff; border-color:#d6887d; }
.workspace { padding:24px; min-width:0; display:grid; grid-template-rows:auto 1fr auto; gap:18px; }.toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; }.present-link { color:var(--teal); font-weight:bold; }.stage { min-height:0; display:grid; place-items:center; background:#132b31; border-radius:18px; overflow:hidden; box-shadow:0 12px 30px #0a283222; }.slide-frame { width:min(100%, 1500px); aspect-ratio:16/9; position:relative; background:#fff; }.slide-frame img { width:100%; height:100%; object-fit:contain; display:block; }.slide-frame.question-stage { padding:clamp(24px,4vw,70px); background:linear-gradient(145deg,#f8f5ef 0%,#e4d7c5 100%); overflow:auto; }
.nav { display:flex; align-items:center; justify-content:center; gap:12px; }.nav button { min-width:44px; padding:10px 14px; border:0; border-radius:8px; background:var(--deep); color:white; font-weight:bold; }.nav .counter { min-width:120px; text-align:center; font-size:.9rem; }
.question-card { max-width:1100px; margin:auto; }.question-card h1 { font-size:clamp(1.65rem,3.4vw,3.5rem); line-height:1.08; margin:0; color:var(--deep); }.question-subtitle { color:#45636a; font-size:1.1rem; margin:16px 0 25px; }.choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.choice { min-height:62px; text-align:left; background:#fff; color:var(--ink); border:1px solid #d7d4cc; border-radius:10px; padding:13px 15px; display:flex; align-items:center; gap:12px; font-weight:600; }.choice span { width:28px; height:28px; display:grid; place-items:center; flex:none; border-radius:50%; color:white; background:var(--teal); font-size:.8rem; }.choice.selected { background:#e0f5f3; border:2px solid var(--teal); }
.participant { min-height:100vh; background:linear-gradient(145deg,#073542 0 29%,#f7f5ef 29%); display:grid; place-items:center; padding:22px; }.participant-shell { width:min(100%,760px); min-height:480px; background:#fff; border-radius:20px; box-shadow:0 20px 50px #00252c66; overflow:hidden; }.participant-header { min-height:112px; padding:25px 30px; color:#fff; background:var(--deep); display:flex; justify-content:space-between; align-items:flex-start; }.participant-header .brand img { filter:brightness(0) invert(1); }.participant-main { padding:clamp(25px,5vw,52px); }.waiting { text-align:center; display:grid; place-items:center; min-height:300px; }.waiting h1 { color:var(--deep); font-size:clamp(1.7rem,4vw,2.7rem); margin:0 0 12px; }.waiting p { max-width:440px; color:#49636a; font-size:1.08rem; }.timer { min-width:58px; font-variant-numeric:tabular-nums; background:#fff; color:var(--deep); text-align:center; padding:10px; border-radius:8px; font-weight:800; }.submit { margin-top:22px; padding:13px 22px; color:#fff; background:var(--coral); border:0; border-radius:8px; font-weight:800; }.submit:disabled { opacity:.45; cursor:not-allowed; }.confirmation { text-align:center; padding:54px 10px; }.confirmation h1 { color:var(--deep); }.confirmation .check { display:grid; place-items:center; margin:0 auto 20px; width:60px; height:60px; border-radius:50%; background:#d9f3ed; color:var(--teal); font-size:2rem; }
.screen { min-height:100vh; background:#0b323d; display:grid; place-items:center; }.screen .slide-frame { width:100vw; height:100vh; aspect-ratio:auto; }.screen .slide-frame img { object-fit:contain; }.screen .question-stage { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:clamp(20px,5vw,70px); align-items:center; padding:clamp(35px,6vw,110px); color:var(--deep); background:linear-gradient(135deg,#f7f5ef,#e5d9c9); }.screen .question-card { max-width:none; }.screen .choices { display:none; }.results { display:grid; gap:13px; }.result-heading { font-weight:800; margin-bottom:5px; }.result { display:grid; grid-template-columns:26px 1fr 54px; gap:10px; align-items:center; font-size:clamp(.8rem,1.2vw,1.05rem); }.result-letter { color:var(--teal); font-weight:800; }.bar-track { background:#ffffffa8; border-radius:100px; overflow:hidden; height:29px; }.bar { height:100%; background:linear-gradient(90deg,var(--teal),var(--aqua)); border-radius:100px; transition:width .35s ease; }.result-number { font-weight:800; text-align:right; }.results-meta { color:#45636a; margin-top:16px; font-size:.9rem; }
.camera-session { min-height:100vh; padding-bottom:64px; background:#f6f5f0; }.camera-stage { min-height:calc(100vh - 64px); display:grid; place-items:center; }.image-view { background:#102f3a; }.image-view img { width:100%; max-height:calc(100vh - 64px); object-fit:contain; }.camera-nav { height:64px; position:fixed; inset:auto 0 0; z-index:9; background:#07354b; color:#fff; padding:10px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.84rem; }.camera-nav button,.camera-nav select { color:#fff; background:transparent; border:1px solid #6b9aad; border-radius:8px; padding:8px 13px; font-weight:700; }.camera-nav select { min-width:126px; }.nav-left,.nav-right { display:flex; gap:9px; align-items:center; }.nav-right span { color:#4be1d7; font-weight:700; }.presenter-question { align-content:start; padding:36px max(8vw,50px); background:radial-gradient(circle at 96% 5%,#cef7f2 0 8%,transparent 8.1%),radial-gradient(circle at 2% 91%,#d7f8f5 0 10%,transparent 10.1%),#fbfaf6; }.question-head { display:flex; justify-content:center; align-items:center; }.question-head .brand span { border-left:1px solid #9daeb3; padding-left:14px; color:var(--deep); font-size:.8rem; letter-spacing:.12em; }.camera-question { max-width:1320px; width:100%; margin:35px auto 0; }.camera-question h1 { color:#052f4a; max-width:1040px; margin:0 0 24px; font-size:clamp(2rem,4.1vw,4rem); line-height:1.06; }.launch-row { display:flex; align-items:center; gap:25px; padding:14px 18px; margin-bottom:19px; border-radius:17px; background:#d9f5f3; color:#07354b; }.launch-row button { color:white; border:0; border-radius:99px; background:#ff5d68; padding:15px 29px; font-weight:800; }.launch-row button:disabled { background:#169c9f; }.answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.answer-option { min-height:93px; display:flex; align-items:center; gap:18px; padding:16px 22px; border:2px solid #afebe8; border-radius:17px; color:#052f4a; font-size:clamp(1.05rem,1.8vw,1.6rem); }.answer-option span { width:46px; height:46px; display:grid; place-items:center; flex:none; border-radius:50%; background:#0bc4c4; font-size:.85rem; }.answer-option b { line-height:1.15; }.response-total { color:#45636a; font-size:1.1rem; }.result-list { display:grid; gap:12px; }.final-result { display:grid; grid-template-columns:36px minmax(200px,1.3fr) minmax(160px,1fr) 46px; align-items:center; gap:14px; padding:14px 16px; border:1px solid #b9e9e7; border-radius:12px; color:#052f4a; }.final-letter { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#0bc4c4; font-weight:800; }.final-track { overflow:hidden; height:20px; border-radius:99px; background:#dff5f3; }.final-track i { display:block; height:100%; border-radius:99px; background:#0b9fa3; transition:width .35s ease; }.final-result strong { text-align:right; font-size:1.1rem; }
@media(max-width:850px) { .formador { grid-template-columns:1fr; }.sidebar { display:none; }.workspace { padding:12px; }.choices { grid-template-columns:1fr; }.screen .question-stage { grid-template-columns:1fr; }.screen .question-card h1 { font-size:clamp(1.5rem,5vw,2.5rem); }.screen .results { max-height:38vh; overflow:auto; }.toolbar .brand { display:none; } }
@media(max-width:850px) { .camera-nav { height:auto; flex-wrap:wrap; padding:8px; }.nav-right span { display:none; }.presenter-question { padding:24px 18px 92px; }.answer-grid { grid-template-columns:1fr; }.launch-row { align-items:stretch; flex-direction:column; gap:12px; }.camera-question h1 { font-size:2rem; }.answer-option { min-height:68px; }.question-head .brand img { width:100px; } }
.image-view { position:relative; }.qr-card { position:absolute; right:8%; bottom:10%; width:clamp(115px,12vw,210px); padding:10px; border-radius:13px; background:#fffffff2; box-shadow:0 8px 24px #002f3b3d; text-align:center; color:#07354b; font-size:clamp(.6rem,1vw,.92rem); }.qr-card img { display:block; width:100%; height:auto; margin-bottom:7px; }.live-timer { color:white; border-radius:99px; background:#169c9f; padding:15px 29px; font-weight:800; }.launch-row .close-question { background:#07354b; }