:root{
  --purple:#4b1f8c;
  --purple-2:#6d2fd1;
  --purple-soft:#eee7f8;
  --orange:#ff8700;
  --orange-soft:#fff0dd;
  --green:#2caf45;
  --green-soft:#e8f7eb;
  --yellow:#ffc928;
  --blue:#2f6fed;
  --red:#e94f37;
  --ink:#24163f;
  --text:#35294a;
  --muted:#736a80;
  --surface:#ffffff;
  --page:#f5f3f8;
  --line:#e5dfeb;
  --shadow:0 12px 30px rgba(57,32,89,.10);
}
*{box-sizing:border-box}
html{background:var(--page)}
html,body{min-height:100%;margin:0;color:var(--text);font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
body{background:var(--page)}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible{outline:3px solid rgba(255,135,0,.45);outline-offset:3px}
.app-shell{min-height:100vh}

.topbar{
  min-height:76px;display:flex;align-items:center;gap:20px;padding:8px 28px;
  background:#fff;border-top:6px solid var(--purple);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;box-shadow:0 3px 15px rgba(53,31,82,.06)
}
.brand{border:0;background:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:0;text-align:left}
.brand-logo{width:54px;height:54px;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;line-height:1.02}
.brand-copy strong{font-size:17px;color:var(--purple);letter-spacing:.03em}
.brand-copy span{font-size:11px;color:var(--green);font-weight:800;margin-top:5px;letter-spacing:.04em}
.status-strip{display:flex;gap:8px;flex:1;justify-content:center;flex-wrap:wrap}
.status-pill,.welcome-chip{border:1px solid var(--line);background:#faf9fc;color:#51475d;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800}
.status-pill i{width:8px;height:8px;border-radius:50%;background:#d24c59;display:inline-block;margin-right:7px}
.status-pill.is-on{border-color:#bfe8c8;color:#197e2c;background:#f3fbf5}.status-pill.is-on i{background:var(--green)}
.status-pill.is-off{color:#8b4350}.status-pill.is-off i{background:#df6670}
.top-actions{display:flex;gap:8px}.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;display:grid;place-items:center;font-weight:900;box-shadow:0 3px 10px rgba(50,30,70,.05)}.icon-btn:hover{border-color:#cfc4da;background:#faf8fd}
.view{display:none}.view.is-active{display:block}

.home-view{max-width:1280px;margin:0 auto;padding:34px 28px 54px}
.hero-card{
  min-height:420px;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;
  display:grid;grid-template-columns:1.08fr .92fr;box-shadow:var(--shadow);position:relative
}
.hero-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:linear-gradient(var(--purple) 0 52%,var(--orange) 52% 76%,var(--green) 76% 100%)}
.hero-copy{padding:52px 48px 45px 58px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.hero-kicker{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--muted);flex-wrap:wrap}
.hero-kicker b{color:var(--purple)}.hero-kicker .dot{width:9px;height:9px;border-radius:50%}.dot-purple{background:var(--purple)}
.hero-copy h1{font-size:clamp(40px,5vw,64px);line-height:1.01;margin:18px 0 16px;color:var(--ink);letter-spacing:-.035em;max-width:730px}
.hero-lead{font-size:18px;line-height:1.55;color:#655a72;max-width:650px;margin:0}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn-icon{font-size:18px}
.primary-btn,.secondary-btn{border-radius:13px;padding:13px 19px;border:2px solid transparent;font-weight:900;cursor:pointer;transition:.16s transform,.16s background,.16s border-color,.16s box-shadow}
.primary-btn{background:var(--purple);color:#fff;box-shadow:0 7px 0 #35156a}.primary-btn:hover{transform:translateY(-2px);background:#5824a4}.primary-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #35156a}
.secondary-btn{background:#fff;border-color:#d8cfdf;color:var(--purple)}.secondary-btn:hover{border-color:var(--purple-soft);background:#f8f5fc}.secondary-btn.compact{padding:9px 13px;font-size:13px}.full{width:100%}
.privacy-note{display:flex;gap:10px;align-items:flex-start;max-width:620px;background:#f8f6fb;border:1px solid #e9e1ef;border-radius:14px;padding:12px 14px;margin-top:22px;font-size:12px;line-height:1.45;color:#655a72}.privacy-icon{font-size:16px}.privacy-note b{color:var(--purple)}
.hero-features{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.hero-features span{border-left:4px solid var(--green);background:#fbfbfc;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:800;color:#62596b}.hero-features b{font-size:18px;color:var(--ink);margin-right:3px}
.hero-visual{position:relative;display:grid;place-items:center;min-height:420px;background:#f2ecfa;border-left:1px solid #e3d9ed;overflow:hidden}
.hero-visual::before{content:"";position:absolute;width:330px;height:330px;border:22px solid rgba(75,31,140,.08);border-radius:50%}
.brand-board{width:min(430px,86%);min-height:355px;display:grid;place-items:center;position:relative}
.hero-logo{width:min(315px,75%);height:auto;position:relative;z-index:2;filter:drop-shadow(0 10px 12px rgba(64,37,91,.12))}
.board-label{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;width:max-content;max-width:90%;background:var(--purple);color:#fff;border-radius:10px;padding:9px 13px;font-size:11px;font-weight:900;letter-spacing:.05em;text-align:center}
.motion-lines{position:absolute;width:210px;height:16px;border-radius:999px;transform:rotate(-14deg)}.line-orange{background:var(--orange);left:-20px;bottom:80px}.line-green{background:var(--green);right:-35px;bottom:116px}
.shape{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;border:3px solid var(--purple);font-size:24px;font-weight:1000;color:var(--purple);box-shadow:0 7px 16px rgba(58,32,80,.10);z-index:3}.shape-a{left:18px;top:86px}.shape-b{right:18px;top:108px;border-color:var(--orange)}.shape-c{right:28px;bottom:42px;border-color:var(--green)}

.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:38px 2px 18px;gap:16px}.section-heading h2{margin:5px 0 4px;font-size:30px;color:var(--ink)}.section-heading p{margin:0;color:var(--muted);font-size:14px}.eyebrow{font-size:11px;letter-spacing:.19em;color:var(--purple);font-weight:1000}.welcome-chip{background:#fff;color:var(--purple);border-color:#ddd4e6}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.game-card{--card-accent:var(--purple);text-align:left;min-height:174px;padding:20px 20px 18px;border:1px solid var(--line);border-top:6px solid var(--card-accent);border-radius:18px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;cursor:pointer;position:relative;box-shadow:0 7px 18px rgba(53,31,82,.06);transition:.16s transform,.16s box-shadow,.16s border-color}.game-card:hover{transform:translateY(-4px);box-shadow:0 13px 25px rgba(53,31,82,.11);border-color:#d8cde2}.game-fly{--card-accent:var(--purple)}.game-math{--card-accent:var(--green)}.game-colors{--card-accent:var(--orange)}.game-fingers{--card-accent:var(--blue)}.game-reaction{--card-accent:var(--red)}
.game-icon{width:62px;height:62px;border-radius:15px;display:grid;place-items:center;background:#f5f2f8;font-size:32px;border:1px solid #eee9f2}.game-meta{display:flex;flex-direction:column;padding-top:3px}.game-meta b{font-size:19px;color:var(--ink)}.game-meta small{color:var(--muted);font-size:13px;margin-top:7px;line-height:1.4}.game-tag{grid-column:1/3;justify-self:start;font-size:9px;font-weight:1000;letter-spacing:.16em;color:var(--card-accent);padding:6px 9px;border-radius:7px;background:#f7f5f9;border:1px solid #eee9f2}.game-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--card-accent);color:#fff;font-size:27px;line-height:1;margin-top:15px}
.info-card{min-height:174px;border-radius:18px;background:var(--purple);color:#fff;padding:22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;box-shadow:0 8px 18px rgba(64,30,108,.13);position:relative;overflow:hidden}.info-card::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;border:24px solid rgba(255,255,255,.08);right:-55px;bottom:-75px}.info-icon{width:62px;height:62px;border-radius:15px;background:#fff1c3;display:grid;place-items:center;font-size:32px}.info-card strong{font-size:19px}.info-card p{font-size:13px;line-height:1.45;color:#eee7f6;margin:8px 0 0;max-width:330px}
.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding:18px 2px 2px;border-top:1px solid var(--line);font-size:11px;color:#81788b}.site-footer span:first-child{font-weight:1000;color:var(--purple)}

.play-view{padding:18px 22px 30px;max-width:1500px;margin:auto}.play-toolbar{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;margin-bottom:13px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:0 6px 16px rgba(53,31,82,.06)}.game-title-wrap h2{margin:2px 0 0;color:var(--ink)}.play-stats{display:flex;gap:8px}.play-stats span{padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#faf9fb;font-size:13px;font-weight:800}.stat-score{border-left:4px solid var(--yellow)!important}.stat-streak{border-left:4px solid var(--orange)!important}.stat-time{border-left:4px solid var(--green)!important}
.stage-frame{border:5px solid var(--purple);border-radius:25px;background:var(--purple);padding:0;box-shadow:0 14px 30px rgba(54,30,82,.15)}
.stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 215px);min-height:430px;border-radius:19px;overflow:hidden;background:#181226}#camera{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:saturate(.96) brightness(.84) contrast(1.02)}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,rgba(34,16,60,.08),transparent 30%,transparent 72%,rgba(34,16,60,.18))}
.camera-gate{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#f3edf9}.camera-gate.hidden{display:none}.gate-card{width:min(440px,90%);text-align:center;padding:31px;border-radius:20px;background:#fff;border:2px solid #d9cee4;box-shadow:0 16px 35px rgba(59,34,83,.13)}.gate-card h3{font-size:24px;margin:6px 0;color:var(--ink)}.gate-card p{color:var(--muted);line-height:1.5}.gate-icon{font-size:50px;margin-bottom:4px}
.instruction-bubble{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:6;background:var(--purple);color:#fff;border:3px solid #fff;padding:10px 17px;border-radius:12px;font-weight:1000;font-size:14px;max-width:80%;text-align:center;box-shadow:0 5px 0 rgba(48,19,91,.8)}.toast{position:absolute;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;z-index:9;padding:12px 18px;border-radius:12px;background:#fff;border:3px solid var(--purple);color:var(--ink);font-weight:1000;transition:.2s;box-shadow:0 7px 18px rgba(0,0,0,.18)}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.good{border-color:var(--green);color:#157528}.toast.bad{border-color:var(--red);color:#a93725}
.countdown-overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(45,20,82,.48);font-size:min(18vw,170px);font-weight:1000;color:#fff;text-shadow:0 8px 0 rgba(46,20,83,.55)}.hidden{display:none!important}.stage-footer{display:flex;gap:18px;flex-wrap:wrap;color:#746a81;font-size:12px;padding:11px 5px}.legend-item{display:flex;align-items:center;gap:7px}.legend-cursor{width:14px;height:14px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 0 0 2px var(--purple)}

.modal{border:0;padding:0;background:transparent;color:var(--text);max-width:560px;width:calc(100% - 28px)}.modal::backdrop{background:rgba(36,22,63,.54)}.modal-card{border:2px solid #d9cee4;background:#fff;border-radius:20px;padding:24px;box-shadow:0 20px 55px rgba(44,27,60,.23)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.modal-head h2{margin:4px 0 0;color:var(--ink)}.modal-card label{display:flex;flex-direction:column;gap:7px;margin:13px 0;font-size:13px;font-weight:900;color:#4e445a}.modal-card input{border:2px solid #e1d9e8;background:#fff;color:var(--ink);border-radius:11px;padding:12px 13px}.profile-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.profile-summary span{padding:13px;border-radius:12px;background:#f8f5fb;border:1px solid #e7dfed;font-size:12px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.modal-actions.wrap{flex-wrap:wrap}.help-card ol{color:#5b5164;line-height:1.7;padding-left:22px}.privacy-box{background:#f1f8f2;border:1px solid #cde8d2;color:#315e3a;border-radius:12px;padding:13px;font-size:12px;line-height:1.5}

/* El objetivo de color debe ser enorme, literal y fácil de comprender */
.instruction-bubble.color-mode{--target-color:#a78bfa;min-width:min(690px,82%);padding:15px 25px 15px 76px;border:5px solid #fff;border-left:18px solid var(--target-color);border-radius:15px;background:#24163f;box-shadow:0 7px 0 rgba(36,22,63,.55);font-size:clamp(19px,2vw,31px);letter-spacing:.02em;text-transform:uppercase;text-shadow:none}.instruction-bubble.color-mode::before{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:var(--target-color);border:4px solid #fff;box-shadow:none}

@media (max-width:980px){.status-strip{display:none}.hero-card{grid-template-columns:1fr}.hero-visual{min-height:300px;border-left:0;border-top:1px solid #e3d9ed}.hero-copy{padding:42px 35px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.play-toolbar{grid-template-columns:auto 1fr auto}.play-stats{grid-row:2;grid-column:1/-1;justify-content:center}.stage{min-height:420px;aspect-ratio:4/3}.site-footer{justify-content:center;text-align:center}}
@media (max-width:650px){.topbar{padding:7px 12px}.brand-logo{width:46px;height:46px}.brand-copy strong{font-size:13px}.brand-copy span{font-size:9px}.top-actions{margin-left:auto}.home-view{padding:20px 12px 40px}.hero-copy{padding:30px 22px 28px 30px}.hero-copy h1{font-size:40px}.hero-visual{min-height:250px}.hero-logo{width:230px}.board-label{font-size:9px}.section-heading{align-items:flex-start;flex-direction:column}.game-grid{grid-template-columns:1fr}.play-view{padding:9px}.play-toolbar{grid-template-columns:auto 1fr auto;gap:7px}.play-toolbar #pauseBtn{font-size:0;padding:10px}.play-toolbar #pauseBtn::first-letter{font-size:16px}.game-title-wrap h2{font-size:17px}.play-stats{overflow:auto;justify-content:flex-start}.stage-frame{border-width:3px;border-radius:18px}.stage{min-height:60vh;border-radius:14px}.instruction-bubble{font-size:12px;top:10px;max-width:92%}.stage-footer{display:none}.instruction-bubble.color-mode{min-width:94%;padding:11px 15px 11px 58px;font-size:16px;border-width:3px;border-left-width:14px}.instruction-bubble.color-mode::before{left:11px;width:30px;height:30px;border-width:3px}}

/* =========================================================
   TRINCABOT EDUCATION S.A.S. · identidad, comentarios y protección
   ========================================================= */
.comments-btn{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 13px;border:1px solid #d9cbea;border-radius:12px;background:#f8f3ff;
  color:var(--purple);text-decoration:none;font-size:12px;font-weight:900;white-space:nowrap;
  box-shadow:0 3px 10px rgba(50,30,70,.05);transition:.16s background,.16s border-color,.16s transform
}
.comments-btn:hover{background:#f1e8fb;border-color:#bfa5dd;transform:translateY(-1px)}
.footer-protection{flex-basis:100%;margin-top:5px;padding-top:9px;border-top:1px solid var(--line);text-align:center;color:#706778;font-size:10px;font-weight:700}

.welcome-dialog,.protection-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;color:var(--text)}
.welcome-dialog::backdrop,.protection-dialog::backdrop{background:rgba(19,8,33,.72);backdrop-filter:blur(5px)}
.welcome-dialog{width:min(980px,calc(100vw - 28px))}
.welcome-card{
  width:100%;max-height:calc(100dvh - 28px);display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(145deg,#21102f 0%,#160b22 100%);color:#f6f1fa;border:1px solid #a557e0;
  border-radius:24px;box-shadow:0 24px 90px rgba(0,0,0,.42)
}
.welcome-head{display:flex;align-items:center;gap:17px;padding:23px 28px 13px}
.welcome-logo{width:70px;height:70px;object-fit:contain;border-radius:17px;background:#fff;padding:4px;flex:none;-webkit-user-drag:none;user-select:none}
.welcome-kicker{display:block;color:#f0b966;font-size:11px;font-weight:1000;letter-spacing:.11em;margin-bottom:5px}
.welcome-head h2{margin:0;color:#fff;font-size:clamp(27px,3.3vw,42px);line-height:1.02;letter-spacing:-.025em}
.welcome-content{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:7px 28px 12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.welcome-content>div{border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:15px 17px;background:rgba(255,255,255,.035)}
.welcome-content p{font-size:13px;line-height:1.47;margin:0 0 10px;color:#e5dce9}
.welcome-content p:last-child{margin-bottom:0}.welcome-content strong{color:#fff}
.welcome-evolution{background:linear-gradient(140deg,rgba(151,67,205,.14),rgba(255,135,0,.08))!important}
.welcome-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 28px 20px;border-top:1px solid rgba(255,255,255,.09);background:rgba(12,6,18,.38)}
.welcome-footer>span{font-size:10px;color:#9f91a8;text-align:left}
.welcome-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.welcome-actions .primary-btn,.welcome-actions .secondary-btn{padding:10px 15px;border-radius:11px;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.welcome-comment{border-color:#a26bc6;background:rgba(255,255,255,.04);color:#fff}
.welcome-comment:hover{background:rgba(255,255,255,.09);border-color:#c68bea}

.protection-dialog{width:min(560px,calc(100vw - 28px))}
.protection-card{background:#fff;border:2px solid var(--purple);border-radius:22px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.34)}
.protection-icon{font-size:38px;margin-bottom:7px}.protection-card h2{color:var(--ink);font-size:28px;margin:6px 0 13px}.protection-card p{font-size:14px;line-height:1.55;color:#62586e;margin:0 0 11px}.protection-card .primary-btn{margin-top:8px}

.print-notice{display:none}
img,canvas,video{-webkit-user-drag:none}
.brand-logo,.hero-logo,.welcome-logo,.brand-board,.shape,canvas,video{user-select:none;-webkit-user-select:none}

.boot-error{position:fixed;inset:0;z-index:99999;background:#f4f1fa;display:grid;place-items:center;padding:24px;font-family:Arial,sans-serif;color:#24163f}
.boot-error-card{width:min(680px,100%);background:#fff;border:2px solid #4b1f8c;border-radius:22px;padding:28px;box-shadow:0 18px 50px rgba(48,24,84,.16)}
.boot-error-icon{font-size:42px;margin-bottom:8px}.boot-error-card h2{margin:0 0 12px;font-size:26px}.boot-error-card>p{margin:0 0 14px;line-height:1.55;color:#574d68}
.boot-error-detail{background:#f4f1fa;border-radius:14px;padding:14px 16px;color:#4b4358;font-size:14px;line-height:1.5}.boot-error-brand{margin:16px 0 0!important;color:#4b1f8c!important;font-weight:900}

@media (max-width:900px){
  .comments-btn span{display:none}.comments-btn{width:42px;padding:0}
  .welcome-dialog{width:min(760px,calc(100vw - 20px))}
  .welcome-head{padding:18px 20px 11px}.welcome-logo{width:58px;height:58px}.welcome-content{grid-template-columns:1fr;padding:5px 20px 10px}.welcome-content>div{padding:13px 15px}.welcome-content p{font-size:12.5px;line-height:1.43}
  .welcome-footer{padding:11px 20px 16px}.welcome-footer>span{display:none}
}
@media (max-width:600px){
  .welcome-dialog{width:calc(100vw - 14px)}.welcome-card{max-height:calc(100dvh - 14px);border-radius:18px}.welcome-head{gap:11px;padding:14px 14px 9px}.welcome-logo{width:52px;height:52px}.welcome-kicker{font-size:8px}.welcome-head h2{font-size:24px}.welcome-content{padding:4px 14px 9px;gap:8px}.welcome-content>div{padding:11px 12px;border-radius:13px}.welcome-content p{font-size:11.6px;line-height:1.38;margin-bottom:8px}.welcome-footer{padding:9px 14px 13px}.welcome-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.welcome-actions .primary-btn,.welcome-actions .secondary-btn{width:100%;padding:9px 8px;font-size:11px}.protection-card{padding:21px 18px}.protection-card h2{font-size:24px}
}
@media (max-height:700px) and (min-width:701px){
  .welcome-card{max-height:calc(100dvh - 16px)}.welcome-head{padding:14px 22px 8px}.welcome-logo{width:54px;height:54px}.welcome-head h2{font-size:29px}.welcome-content{padding:4px 22px 8px}.welcome-content>div{padding:10px 13px}.welcome-content p{font-size:11.4px;line-height:1.34;margin-bottom:7px}.welcome-footer{padding:9px 22px 12px}.welcome-actions .primary-btn,.welcome-actions .secondary-btn{padding:8px 12px}
}

@media print{
  @page{margin:18mm}
  body{background:#fff!important;color:#111!important}
  body>*:not(#printNotice){display:none!important}
  #printNotice{display:flex!important;min-height:80vh;align-items:center;justify-content:center;text-align:center;font-family:Arial,sans-serif}
  #printNotice>div{display:flex;flex-direction:column;gap:14px;border:2px solid #222;padding:36px 42px;max-width:620px}
  #printNotice strong{font-size:25px}#printNotice span{font-size:18px}
}
@media (max-width:520px){
  .topbar{gap:8px;padding:7px 9px}
  .brand{gap:6px}.brand-logo{width:40px;height:40px}.brand-copy strong{font-size:11px}.brand-copy span{display:none}
  .top-actions{gap:5px}.top-actions .icon-btn,.comments-btn{width:36px;height:36px;min-height:36px;border-radius:10px}
}
/* Paleta CSP-safe para el objetivo de color: evita estilos inline dinámicos. */
.instruction-bubble[data-target-color="#38bdf8"]{--target-color:#38bdf8}
.instruction-bubble[data-target-color="#34d399"]{--target-color:#34d399}
.instruction-bubble[data-target-color="#fbbf24"]{--target-color:#fbbf24}
.instruction-bubble[data-target-color="#f472b6"]{--target-color:#f472b6}
.instruction-bubble[data-target-color="#a78bfa"]{--target-color:#a78bfa}
.instruction-bubble[data-target-color="#fb923c"]{--target-color:#fb923c}

/* V3.0.0 stable diagnostics */
.version-chip{font-size:9px;font-weight:900;letter-spacing:.08em;color:#6d2fd1;background:#f2ecfa;border:1px solid #ded2eb;border-radius:999px;padding:4px 7px;margin-left:4px;white-space:nowrap}
.diag-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;place-items:center;text-decoration:none;box-shadow:0 3px 10px rgba(50,30,70,.05)}
.diag-btn:hover{border-color:#cfc4da;background:#faf8fd}