/* KIT DINGADOO: piezas del estilo papercraft facetado (poligonos mates). Compartido por las pantallas nuevas (Discover ya trae lo suyo; esto es para el resto).
   Reglas de Bryan: poligonos con esquinas cortadas y 3 caras de tono casi igual (MATE: nada de brillo ni degradado blanco), una sola sombra dura abajo,
   texto siempre recto, nada de barritas de color de acento, iconos planos sin sombra.
   Las variables llevan el prefijo --d- para no chocar con las de tema.css (las pantallas del juego en vivo siguen con sus paletas). */
:root{--d-mor:#5B4FCF;--d-mor-osc:#2F2680;--d-navy:#1E1B4B;--d-ama:#FFC93C;--d-ama-osc:#C9921A;--d-crema:#FAF3E3;--d-tinta:#241766;--d-suave:#6F68A8;--d-borde:#D8C79E;--d-out:cubic-bezier(.23,1,.32,1)}
body.kit{font-family:Nunito,ui-rounded,system-ui,sans-serif;font-weight:700;color:var(--d-tinta);background:var(--d-crema)}
body.kit .escenario{display:none}
.kit h1,.kit h2,.kit h3{font-family:Fredoka,Nunito,sans-serif;font-weight:700}
.kit svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* barra superior (igual a la de Discover) */
.dtop{background:linear-gradient(180deg,#6B5FDF,#5B4FCF);color:#fff;position:relative;z-index:3;box-shadow:0 4px 0 #3F35A8}
.dnav{display:flex;align-items:center;gap:18px;padding:10px clamp(16px,3vw,56px);max-width:1760px;margin:0 auto}
.dnav .logo{height:46px;width:auto;display:block;border-radius:10px}
.dnav nav{display:flex;gap:8px;margin-left:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:-4px}
.dnav nav a,.dnav nav .pronto{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;color:#fff;text-decoration:none;font-weight:900;font-size:15px;white-space:nowrap;min-height:44px}
.dnav nav a.on{color:var(--d-navy)}
.dnav nav a:hover:not(.on){filter:brightness(1.12)}
.dnav nav .pronto{opacity:.7;cursor:default}
.dnav nav .pronto small{font-size:10px;font-weight:900;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.22)}
.dnav .der{margin-left:auto;display:flex;align-items:center}

/* pieza facetada: esquinas cortadas + 3 caras. La sombra va en .sh porque clip-path recorta box-shadow. */
.sh{filter:drop-shadow(0 3px 0 rgba(30,27,75,.26));display:inline-block}
.sh.blk{display:block}
.fac{white-space:nowrap;--c:10px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:900;font-size:15px;color:var(--d-navy);padding:10px 18px;min-height:44px;border:0;cursor:pointer;text-decoration:none;touch-action:manipulation;isolation:isolate;
 clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));transition:transform .15s var(--d-out)}
.fac::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,var(--l) 0 38%,var(--m) 38% 74%,var(--d) 74%)}
.fac:active{transform:translateY(3px)}
.sh:has(.fac:active){filter:drop-shadow(0 1px 0 rgba(30,27,75,.26))}
.fac:focus-visible{outline:none}
.sh:has(.fac:focus-visible){outline:3px solid var(--d-ama);outline-offset:3px;border-radius:10px}
.fac:disabled{opacity:.55;cursor:default;transform:none}
.fac.sm{--c:7px;padding:6px 12px;min-height:38px;font-size:14px}
.fac.ic{padding:6px 10px}
.fac.yel,body.kit .b3.oro{--l:#FECF54;--m:#FBC53F;--d:#F2BB35}
.fac.pur,body.kit .b3:not(.oro):not(.claro):not(.rojo){--l:#6357D5;--m:#5B4FCF;--d:#5349C5;color:#fff}
.fac.cre,body.kit .b3.claro{--l:#F1E3BF;--m:#EBDBB0;--d:#E3D1A0}
.fac.red,body.kit .b3.rojo{--l:#EE5C76;--m:#E8506C;--d:#DE4866;color:#fff}
.fac.grn{--l:#44C592;--m:#3BBD8A;--d:#34B381}
.fac.nav{--l:#6055D2;--m:#5A4FCB;--d:#554AC4;color:#fff}
.fac.blu{--l:#53A1F0;--m:#4A9BF0;--d:#4492E6;color:#fff}

.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:900;padding:3px 11px 4px;border-radius:0;border-bottom:3px solid rgba(30,27,75,.2);background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.pill.b{background-color:#FFD65C;color:#4A3400;border-bottom-color:rgba(74,52,0,.3)}

/* "mundo" de cada quiz: color por quiz y triangulos mates (el arte final llega despues) */
.mundo{position:relative;overflow:hidden;isolation:isolate;background:hsl(var(--a),55%,78%)}
.mundo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.14) 0 30%,transparent 30%),linear-gradient(225deg,rgba(255,255,255,.08) 0 22%,transparent 22%),linear-gradient(35deg,transparent 0 58%,hsla(var(--a),60%,30%,.10) 58% 80%,transparent 80%)}
.mundo i{position:absolute;bottom:0;background:hsl(var(--a),38%,52%);clip-path:polygon(0 100%,38% 18%,64% 62%,82% 34%,100% 100%)}
.mundo i:nth-child(1){left:-6%;width:62%;height:62%}
.mundo i:nth-child(2){right:-8%;width:66%;height:48%;background:hsl(calc(var(--a) + 20),42%,62%)}
.mundo .sol{position:absolute;left:14px;top:12px;width:22px;height:22px;background:#FFE58A;clip-path:polygon(50% 0,80% 20%,100% 50%,80% 80%,50% 100%,20% 80%,0 50%,20% 20%)}
.mundo .ico{position:absolute;right:10px;top:10px;width:46px;height:46px;background:var(--d-crema);color:hsl(var(--a),65%,42%);display:flex;align-items:center;justify-content:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.mundo .ico svg{width:24px;height:24px}

/* ===== Biblioteca (My Games) ===== */
.dlib{max-width:1760px;margin:0 auto;padding:26px clamp(16px,3vw,56px) 70px}
.dcab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.dcab h1{margin:0;font-size:34px;color:var(--d-navy);margin-right:auto}
.dvista{display:flex;gap:8px}
.dlib .err{background:#FFE0E5;color:#9C1230;border:0;border-bottom:3px solid rgba(156,18,48,.25);border-radius:0;box-shadow:none;animation:none;padding:10px 16px;margin:12px 0;font-weight:800;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.dlib .err:empty{display:none}
.dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.dstats .gem{--c:14px;display:flex;width:100%;padding:14px 18px;gap:14px;justify-content:flex-start;cursor:default;color:#fff}
.dstats .gem svg{width:34px;height:34px}
.dstats .n{font:700 34px/1 Fredoka,sans-serif;display:block;text-align:left}
.dstats small{display:block;font-weight:800;font-size:13px;opacity:.92;text-align:left}
.dtabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}

/* vista tarjetas */
#lista.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:26px;padding-top:16px}
.dc{filter:drop-shadow(0 4px 0 var(--d-borde));animation:dentra .45s var(--d-out) backwards;animation-delay:calc(var(--i,0)*45ms)}
.dcard{background:#fff;padding:8px 8px 14px;display:flex;flex-direction:column;gap:10px;height:100%;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px)}
.dcard .mundo{height:112px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px)}
.dcard h3{margin:0;font-size:20px;color:var(--d-navy);padding:0 6px;line-height:1.2;word-break:break-word}
.dmeta{display:flex;gap:6px;flex-wrap:wrap;padding:0 6px}
.dcard .dacc{display:flex;gap:6px;padding:0 6px;align-items:center;margin-top:auto}
.dcard .dacc .grow{flex:1;min-width:0}
.dcard .dacc .grow .fac{width:100%}
.dnueva .dcard{align-items:center;justify-content:center;gap:10px;min-height:250px;color:var(--d-suave);font-size:15px;position:relative;background:repeating-linear-gradient(135deg,#F3EBD6 0 10px,#EFE4C8 10px 20px)}

/* vista lista */
#lista.list{display:block;padding-top:6px}
.list .dc{margin-bottom:12px;filter:drop-shadow(0 3px 0 var(--d-borde))}
.list .dcard{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;padding:10px 14px 10px 10px;height:auto;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.list .dcard .mundo{width:96px;height:76px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.list .dcard .mundo .ico{width:38px;height:38px;right:6px;top:6px}
.list .dcard .mundo .ico svg{width:20px;height:20px}
.list .dcard .mundo .sol{display:none}
.list .dcard h3{font-size:19px;padding:0}
.list .dmeta{padding:0;margin-top:5px}
.list .dcard .dacc{padding:0;margin:0}
.list .dcard .dacc .grow{flex:none}
.list .dcard .dacc .grow .fac{width:auto}
.list .dnueva{display:none}
.dvacio{text-align:center;padding:40px 10px;font-weight:900;color:var(--d-suave)}
.dvacio img{width:150px;height:auto;display:block;margin:0 auto 10px}
@keyframes dentra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dc{animation:none}}
@media (max-width:760px){
 .dnav{gap:8px;padding:8px 12px;flex-wrap:wrap}.dnav .logo{height:38px}.dnav nav{order:3;width:100%;margin-left:0}.dnav .der{margin-left:auto}
 body.kit #cuerpo{grid-template-columns:minmax(0,1fr)!important;gap:20px}
 body.kit #editor{min-width:0}
 .dstats{grid-template-columns:1fr}
 .list .dcard{grid-template-columns:70px 1fr}.list .dcard .mundo{width:70px;height:60px}.list .dcard .dacc{grid-column:1/-1;flex-wrap:wrap}
 .dcab h1{font-size:28px}
}

/* boton Theme dentro de la barra: mismo facetado mate que el resto (el selector lo pinta tema.js con la clase .chip) */
.dtop .tm-btn{--c:7px;border:0;border-radius:0;min-height:38px;padding:6px 14px;font-size:14px;background:linear-gradient(115deg,#FBF5E6 0 38%,#F3EAD3 38% 74%,#EADFC4 74%);color:var(--d-navy);box-shadow:none;
 clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.dtop .tm-btn:hover{transform:none;box-shadow:none;filter:brightness(.97)}
.dtop .tm-caja{filter:drop-shadow(0 3px 0 rgba(30,27,75,.35))}

/* ===== Pantallas viejas dentro de body.kit (editor): se reestilizan sin tocar su JS =====
   Sin franjas de color ni brillo. Como clip-path recorta box-shadow, el borde de abajo hace de sombra dura. */
body.kit .papel{background:#fff;--rot:0deg;border-bottom:4px solid var(--d-borde);transition:none;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px)}
body.kit .papel::before,body.kit .papel::after,body.kit .cin,body.kit .cos{display:none}
body.kit .b3{--c:9px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:0;border-bottom:3px solid rgba(30,27,75,.26);border-radius:0;box-shadow:none;font-weight:900;font-size:14px;color:var(--d-navy);text-decoration:none;cursor:pointer;
 background:linear-gradient(115deg,var(--l) 0 38%,var(--m) 38% 74%,var(--d) 74%);transition:none;
 clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
body.kit .b3.rojo,body.kit .b3:not(.oro):not(.claro):not(.rojo){color:#fff}
body.kit .b3:hover{transform:none;box-shadow:none;filter:brightness(1.03)}
body.kit .b3:active{transform:translateY(2px);box-shadow:none}
body.kit .b3:disabled{opacity:.5;cursor:default;filter:none;transform:none}
body.kit .item,body.kit .tp,body.kit .seg button,body.kit .chp span,body.kit .chp button{border:0;border-bottom:3px solid rgba(30,27,75,.18);border-radius:0;box-shadow:none;transition:none;
 clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
body.kit .item.sel{background:#FFD764;transform:none}
body.kit .item:hover,body.kit .tp:hover{transform:none;box-shadow:none;filter:brightness(1.03)}
body.kit .tp.on{outline:0;background:#FFE7A0}
body.kit .seg button.on{transform:none}
body.kit .chp button.mal{transform:none}
body.kit .ops .op{border:0;border-bottom:4px solid rgba(0,0,0,.2);border-radius:0;box-shadow:none;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
body.kit #top::before{background:var(--d-crema);border-bottom:3px solid var(--d-borde);box-shadow:none}
body.kit #top a.volver{color:var(--d-mor-osc)}

/* Tres franjas sobre cualquier color: una capa blanca suave a la izquierda y una sombra suave a la derecha (el color de cada pieza se conserva). */
:root{--bandas:linear-gradient(115deg,rgba(255,255,255,.16) 0 38%,rgba(255,255,255,0) 38% 74%,rgba(0,0,0,.08) 74%)}
body.kit .ops .op,body.kit .item,body.kit .tp,body.kit .seg button,body.kit .chp span,body.kit .chp button,body.kit .ac .x{background-image:var(--bandas)}
body.kit .item b,body.kit .tipo b{background-image:var(--bandas)!important;border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;
 clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
body.kit .item.mal b{background-color:#FFB3C0}
body.kit .ac .x{border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;transition:none;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
body.kit .seg button.on{background-color:#241766;color:#fff}
body.kit .item.sel{background-color:#FFD764}

/* selector de tipo: los iconos de color son poligonos con franjas; las fichas y demas piezas lavanda pasan a arena como los botones claros */
body.kit .tp .gl{background-image:var(--bandas)!important;border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;
 clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)}
body.kit .tp,body.kit .seg button,body.kit .chp span,body.kit .chp button,body.kit .item b{background-color:#F1E3BF}
body.kit .tp.on{background-color:#FFE7A0}
body.kit .item.mal b{background-color:#FFB3C0}
body.kit .seg button.on{background-color:#241766}
body.kit .chp button.mal{background-color:#F2395B}

/* simbolo blanco sobre rojo, azul y verde; el amarillo (--r3) conserva el azul oscuro porque el blanco no se lee */
body.kit .tp .gl,body.kit .tipo b{color:#fff}
body.kit .tp .gl[style*="--r3"],body.kit .tipo b[style*="--r3"]{color:var(--d-navy)}

/* boton de "correcta" de cada respuesta: octagono con franjas (antes circulo con borde blanco) */
body.kit .ops .op .ok{border:0;border-bottom:3px solid rgba(0,0,0,.18);border-radius:0;box-shadow:none;background-color:rgba(255,255,255,.38);background-image:var(--bandas);color:#fff;
 clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);transition:none}
body.kit .ops .op .ok.on{background-color:#fff;color:var(--marca-osc);transform:none;box-shadow:none}
body.kit .ops .op .ok:active{transform:scale(.92)}

/* ===== Repaso del editor: lo que seguia con borde redondo, borde blanco o lavanda ===== */
/* numero de la lista: neutro (arena) y rojo de la marca solo si la pregunta esta incompleta */
body.kit .item b{background-color:#FFF8E6;color:var(--d-navy)}
body.kit .item.mal b{background-color:#E8506C;color:#fff}
/* etiqueta de tipo en cada fila de la lista */
body.kit .item em{border:0;border-radius:0;background:#FFF8E6;color:var(--d-suave);padding:3px 8px;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
/* mensaje de error */
body.kit #err{border:0;border-bottom:3px solid rgba(156,18,48,.25);border-radius:0;box-shadow:none;animation:none;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
/* imagenes (vista previa y miniaturas de respuestas) */
body.kit #prev,body.kit .ops .op .mini{border:0;border-radius:0;box-shadow:none;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
/* campos de una linea: borde arena en vez de lavanda y esquinas cortadas (el area de texto grande solo cambia el color para no tapar su esquina de redimensionar) */
body.kit .in,body.kit select,body.kit #titulo,body.kit .ac input{border:3px solid #E3D1A0;border-radius:0;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
body.kit textarea{border:3px solid #E3D1A0;border-radius:6px}
body.kit .ops .op input[type=text]{border:0;border-radius:0;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
body.kit input:focus,body.kit textarea:focus,body.kit select:focus{border-color:var(--marca)!important}

/* lista de preguntas del editor: las mismas tres franjas de los botones (amarillo si esta seleccionada, crema si no) y el numero siempre crema */
body.kit .item{background-image:linear-gradient(115deg,#FFF6DF 0 38%,#F8EAC9 38% 74%,#F0DFB4 74%)}
body.kit .item.sel{background-image:linear-gradient(115deg,#FECF54 0 38%,#FBC53F 38% 74%,#F2BB35 74%)}
body.kit .item b,body.kit .item.mal b{background-color:transparent;background-image:linear-gradient(115deg,#FFFEF9 0 38%,#FFF8E6 38% 74%,#F6EBCF 74%)!important;color:var(--d-navy)}

/* campos de una linea: el borde arena sigue tambien por las esquinas cortadas (cuatro franjas diagonales, una por esquina; el corte es de 8 px y el borde de 3 px) */
body.kit .in,body.kit select,body.kit #titulo,body.kit .ac input{
 background-image:
  linear-gradient(135deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px),
  linear-gradient(225deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px),
  linear-gradient(315deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px),
  linear-gradient(45deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px)}
body.kit textarea{border-radius:0}
body.kit .in,body.kit select,body.kit #titulo,body.kit .ac input{background-origin:border-box;background-clip:border-box}

/* selector de tipo: aparece al instante (sin escalonar las fichas) */
body.kit .tp{animation:none}
body.kit .velo{animation-duration:.1s}

/* ===== Partida en vivo del profesor (sala, preguntas, resultados y podio) =====
   Fondo crema, tarjetas blancas con esquinas cortadas, fichas de colores con las tres franjas. Todo bajo body.kit y con ids propios
   de esa pantalla (#v-lobby, #v-q, #v-fin, #barra) para no tocar el editor. */
:root{--chaf8:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);--chaf12:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);--octo:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
/* textos que eran blancos sobre el morado */
body.kit .esperando,body.kit #v-lobby #vetados,body.kit #v-q #msg,body.kit #v-q .fila,body.kit #v-q .marca,body.kit #v-fin .pd .pn{color:var(--d-suave);text-shadow:none}
body.kit #v-fin h1{color:var(--d-navy);text-shadow:none}
body.kit .esperando img{display:block;width:104px;height:auto;margin:0 auto 6px}
/* iconos de la barra (volumen, pantalla completa, ajustes) */
body.kit #barra .ib{width:46px;height:46px;border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);clip-path:var(--octo);transition:none}
body.kit #barra .ib[aria-expanded="true"]{background-color:#FBC53F}
body.kit #barra .ib:hover{transform:none;filter:brightness(1.04)}
/* sala de espera */
body.kit .qrbox{border:0;border-bottom:4px solid var(--d-borde);border-radius:0;box-shadow:none;background:#fff;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px)}
body.kit .qrlock{border-radius:0}
body.kit .cuenta{border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);clip-path:var(--chaf12)}
body.kit .chips span,body.kit .chips button{border:0;border-bottom:3px solid rgba(30,27,75,.2);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);clip-path:var(--chaf8);transition:none}
body.kit .chips button:hover{transform:none;filter:brightness(1.04)}
body.kit .chips button.sel{background-color:#FBC53F;box-shadow:none}
body.kit #bloq.cerrada-b{background-color:#E8506C;color:#fff}
body.kit #vetados button{border:0;border-bottom:3px solid rgba(30,27,75,.2);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);clip-path:var(--chaf8)}
body.kit #jpanel input{border:3px solid #E3D1A0;border-radius:0;clip-path:var(--chaf8)}
body.kit .aj{border-top-color:#EFE4C8}
body.kit .trk{border:0;border-radius:0;box-shadow:none;background:#E3D1A0;clip-path:var(--chaf8)}
body.kit .trk::after{border-radius:0;box-shadow:none;clip-path:var(--octo)}
/* pregunta */
body.kit #v-q #bar{height:20px;border:0;border-radius:0;box-shadow:none;background:#EADFC0;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
body.kit #v-q #bar i{background:#FBC53F}
body.kit #v-q #tag{border:0;border-radius:0;box-shadow:none;background:#FBC53F;color:var(--d-navy);clip-path:var(--chaf8)}
body.kit #qimg{border:0;border-radius:0;box-shadow:none;clip-path:var(--chaf12)}
body.kit #v-q .op>div{border:0;border-bottom:6px solid rgba(0,0,0,.2);border-radius:0;box-shadow:none;background-image:var(--bandas);clip-path:var(--chaf12)}
body.kit #v-q .op .good{outline:0;transform:scale(1.025);box-shadow:inset 0 0 0 5px var(--d-navy)}
body.kit #v-q .op em{border-radius:0;background:#fff;clip-path:var(--chaf8)}
body.kit #v-q .op.img>div img{border-radius:0;clip-path:var(--chaf8)}
body.kit #v-q .cel b{border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background-image:var(--bandas);clip-path:var(--chaf12)}
body.kit #v-q .pz{display:inline-flex;align-items:center;gap:8px;border:0;border-bottom:4px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);clip-path:var(--chaf8)}
body.kit #v-q .pz b{position:static;min-width:28px;height:28px;border:0;border-radius:0;clip-path:var(--chaf8)}
body.kit #v-q .pz.good{outline:0;transform:none;background-color:var(--r4);box-shadow:inset 0 0 0 4px var(--d-navy)}
body.kit #v-q .pz.nom{background-color:#EBDBB0}
body.kit #top5 li b{border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background-color:#FBC53F;background-image:var(--bandas);clip-path:var(--chaf8)}
body.kit #autobar{border-radius:0;background:#EADFC0;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%)}
body.kit #autobar i{background:#FBC53F}
/* podio */
body.kit #v-fin .pd .bl{border:0;border-radius:0;box-shadow:none;background-image:var(--bandas);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px)}
body.kit #v-fin .resto{padding:18px 26px 18px 48px}


/* ===== Preparar el juego de dibujar (v-dibsetup) y avisos ===== */
body.kit .cab h1{color:var(--d-navy);text-shadow:none;font-size:34px}
body.kit .err{background:#FFE0E5;color:#9C1230;border:0;border-bottom:3px solid rgba(156,18,48,.25);border-radius:0;box-shadow:none;animation:none;clip-path:var(--chaf12)}
body.kit .ds-ayuda{color:var(--d-suave);text-shadow:none}
body.kit .res-juego{color:var(--d-suave);text-shadow:none}
body.kit .ds-chips span,body.kit .ds-lista label{border:0;border-bottom:3px solid rgba(30,27,75,.14);border-radius:0;box-shadow:none;background-color:#F3EAD3;background-image:var(--bandas);clip-path:var(--chaf8)}
body.kit .ds-radio input,body.kit .ds-lista input{-webkit-appearance:none;appearance:none;flex:none;width:24px;height:24px;margin:2px 0 0;border:0;border-bottom:3px solid rgba(30,27,75,.22);background-color:#EBDBB0;background-image:var(--bandas);cursor:pointer}
body.kit .ds-radio input{clip-path:var(--octo)}
body.kit .ds-lista input{clip-path:var(--chaf8);margin:0}
body.kit .ds-radio input:checked{background-color:var(--d-mor);background-image:radial-gradient(circle,#fff 0 4px,transparent 5px),var(--bandas)}
body.kit .ds-lista input:checked{background-color:var(--d-mor);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),var(--bandas);background-size:100% 100%,auto}
body.kit .ds-radio input:focus-visible,body.kit .ds-lista input:focus-visible{outline:3px solid var(--d-ama);outline-offset:2px}
body.kit #ds-crear{white-space:nowrap}

/* ajustes del juego de dibujar a la vista, en la sala de espera: las filas se reparten en columnas */
body.kit .ajl{margin:0 8px 18px;padding:18px 22px 14px}
body.kit .ajl .aj-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 34px;max-height:none;overflow:visible;padding:0}
body.kit .ajl .aj-scroll>h3,body.kit .ajl .aj-scroll>.aj-titulo{grid-column:1/-1}
body.kit .ajl .aj-scroll>h3{margin:0 0 4px;font-size:22px;color:var(--d-navy)}
body.kit .ajl .aj-titulo:empty{display:none}
body.kit .aj-fila{border-top-color:#EFE4C8}
body.kit .aj-seg button{border:0;border-bottom:3px solid rgba(30,27,75,.18);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);clip-path:var(--chaf8)}
body.kit .aj-seg button.on{background-color:#241766;color:#fff}

/* barra deslizante (volumen y similares): pista de polígono arena y control octagonal amarillo */
body.kit input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:28px;cursor:pointer;accent-color:var(--d-ama)}
body.kit input[type=range]::-webkit-slider-runnable-track{height:14px;background:#EADFC0;border:0;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
body.kit input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-6px;border:0;border-bottom:3px solid rgba(30,27,75,.25);background-color:#FBC53F;background-image:var(--bandas);clip-path:var(--octo)}
body.kit input[type=range]::-moz-range-track{height:14px;background:#EADFC0;border:0;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
body.kit input[type=range]::-moz-range-progress{height:14px;background:#F2BB35;clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%)}
body.kit input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:0;background-color:#FBC53F;background-image:var(--bandas);clip-path:var(--octo)}
body.kit input[type=range]:focus-visible{outline:3px solid var(--d-ama);outline-offset:3px}

/* interruptor: sin el borde blanco la perilla debe bajar para quedar centrada (pista de 32 px, perilla de 22 px) */
body.kit .trk::after{top:5px;left:5px}

/* El juego de dibujar trae su hoja de estilos con imagenes viejas de boton (html.gfx-alto .b3.*). Dentro del estilo nuevo se anulan para que la sala de espera use las piezas de siempre. */
html.gfx-alto body.kit .b3.claro,html.gfx-alto body.kit .b3.oro,html.gfx-alto body.kit .b3.rojo{background:linear-gradient(115deg,var(--l) 0 38%,var(--m) 38% 74%,var(--d) 74%);border:0;border-bottom:3px solid rgba(30,27,75,.26);border-radius:0;box-shadow:none;filter:none;color:var(--d-navy)}
html.gfx-alto body.kit .b3.rojo{color:#fff}

/* ===== Desplegable propio (dropdown.js): reemplaza el menu nativo de todos los <select> ===== */
.dd-native{display:none!important}
.dd{display:block;position:relative;min-width:0;--dd-b:#E3D1A0}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font:inherit;font-weight:800;color:var(--d-tinta);cursor:pointer;
 background-color:#fff;border:3px solid var(--dd-b);border-radius:0;padding:11px 13px;min-height:44px;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
 background-image:linear-gradient(135deg,transparent 5.66px,var(--dd-b) 5.66px 9.9px,transparent 9.9px),linear-gradient(225deg,transparent 5.66px,var(--dd-b) 5.66px 9.9px,transparent 9.9px),linear-gradient(315deg,transparent 5.66px,var(--dd-b) 5.66px 9.9px,transparent 9.9px),linear-gradient(45deg,transparent 5.66px,var(--dd-b) 5.66px 9.9px,transparent 9.9px);
 background-origin:border-box;background-clip:border-box}
.dd-btn:hover{--dd-b:#D6BE88}
.dd:has(.dd-btn:focus-visible),.dd-abierto{--dd-b:#6B4DF2}
.dd-btn:focus-visible{outline:none}
.dd-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-chev{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s var(--d-out)}
.dd-abierto .dd-chev{transform:rotate(180deg)}
.dd-off{opacity:.5}.dd-btn:disabled{cursor:default}
.aj-fila .dd{flex:none;min-width:110px}
.aj-fila .dd-btn{padding:7px 9px;min-height:40px;font-size:15px;font-weight:900}
.filtros .dd{--dd-b:transparent;flex:none}
.filtros .dd-btn{border:0;background:none;padding:8px 4px 8px 2px;min-height:40px;max-width:190px;font-size:14px;font-weight:900;color:inherit;clip-path:none}
/* la lista, dibujada en <body> para que ningun contenedor la recorte */
.dd-pop{position:fixed;z-index:300;font-family:Nunito,ui-rounded,system-ui,sans-serif;font-size:16px;filter:drop-shadow(0 6px 10px rgba(30,27,75,.2))}
.dd-lista{background:#fff;padding:6px;overflow-y:auto;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.dd-op{padding:10px 14px;margin-bottom:2px;font-weight:800;color:var(--d-tinta);cursor:pointer;white-space:nowrap;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.dd-op:last-child{margin-bottom:0}
.dd-op.act{background-color:#F3EAD3;background-image:var(--bandas)}
.dd-op.on{background-color:#FFD764;background-image:var(--bandas);color:var(--d-navy);font-weight:900}
.dd-op.off{opacity:.45;cursor:default}
.dd-lista{scrollbar-width:thin;scrollbar-color:#D6BE88 transparent}
.dd-lista::-webkit-scrollbar{width:10px}
.dd-lista::-webkit-scrollbar-track{background:transparent}
.dd-lista::-webkit-scrollbar-thumb{background:#D6BE88;border:2px solid #fff;border-radius:0}

/* ===== Sala de espera: PIN y QR arriba, jugadores debajo, barra de control abajo; los ajustes del juego de dibujar salen de un boton ===== */
body.kit #lob-der{background:none;padding:0 8px;margin:0}
body.kit #lob-der .chips{margin:0;min-height:60px;padding-bottom:6px;justify-content:center}
@media (min-width:980px) and (min-height:620px){
  /* todo cabe en una vista: la lista de jugadores es lo unico que hace scroll (por dentro) */
  body.kit #app:has(#v-lobby:not(.hide)){height:100vh;min-height:0;max-width:1500px;padding-bottom:18px}
  body.kit #v-lobby:not(.hide){display:flex;flex-direction:column;flex:1;min-height:0;gap:14px}
  body.kit .lob-cuerpo{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
  body.kit #lob-izq{flex:none}
  body.kit #lob-izq .ticket{margin:0 8px;padding:18px 30px}
  body.kit #lob-izq .code{font-size:clamp(48px,11vh,110px)}
  body.kit #lob-izq .qrbox{width:clamp(120px,24vh,210px)}
  body.kit #lob-der{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#D6BE88 transparent}
  body.kit #lob-der .chips{justify-content:center;align-content:flex-start}
}
/* Barra de control: una sola pieza blanca (cerrar sala, ajustes, jugadores, jugar yo tambien, empezar). La forma va en ::before para que la ventana de ajustes pueda salir por encima sin recortarse. */
body.kit .lbar{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;margin:0 8px 6px;padding:12px 18px;flex:none;flex-wrap:nowrap}
body.kit .lbar::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border-bottom:4px solid var(--d-borde);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px)}
body.kit .lbar .cuenta{flex:1;justify-content:center;background:none;border:0;clip-path:none;padding:0;font-size:clamp(20px,3vw,30px);color:var(--d-navy)}
body.kit .lbar #empezar{font-size:22px;padding:12px 44px;min-height:54px}
body.kit .lbar #bloq,body.kit .lbar #jugador,body.kit .lbar #ajbtn{min-height:46px}
body.kit .ajw{position:relative}
/* ventana de ajustes del juego de dibujar: sale hacia arriba desde su boton */
body.kit .ajw #ajl{position:absolute;left:0;bottom:calc(100% + 16px);width:min(860px,calc(100vw - 48px));margin:0;z-index:45;max-height:calc(100vh - 150px);overflow-y:auto}
body.kit .ajl{padding:18px 22px 14px}
body.kit .ajl .aj-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 34px;max-height:none;overflow:visible;padding:0}
body.kit .ajl .aj-scroll>h3,body.kit .ajl .aj-scroll>.aj-titulo{grid-column:1/-1}
body.kit .ajl .aj-scroll>h3{margin:0 0 4px;font-size:22px;color:var(--d-navy)}
body.kit .ajl .aj-titulo:empty{display:none}
@media (max-width:760px){body.kit .lbar{flex-wrap:wrap}body.kit .lbar .cuenta{flex:1 1 100%;order:-1}body.kit .lbar #empezar{flex:1}body.kit .ajw #ajl{position:fixed;left:12px;right:12px;bottom:90px;width:auto}}

/* ===== Juego de dibujar (dibujo.css + host-dibujo.js): estilo de polígonos, direccion A (crema) =====
   El nivel de gráficos "alto" con imagenes de papel rasgado ya no se usa (gfx.js lo fija en ligero). Estas reglas reemplazan lo plano de dibujo.css. */
body.kit::before{display:none!important}
body.kit .dz-cin,body.kit .dz-quien-caja::before,body.kit .dz-quien-caja::after,body.kit .dz-estrella{display:none!important}
/* encabezado: ronda, quien dibuja, tiempo */
body.kit:not(.jug) .dz-top,body.kit.jug .dz-top{color:var(--d-navy)}
body.kit .dz-ronda::before{border:0;border-bottom:3px solid var(--d-borde);border-radius:0;box-shadow:none;transform:none;background:#fff;clip-path:var(--chaf8)}
body.kit .dz-quien{filter:none;color:var(--d-navy)}
body.kit .dz-quien::before{background:linear-gradient(115deg,#FECF54 0 38%,#FBC53F 38% 74%,#F2BB35 74%);border-bottom:4px solid rgba(30,27,75,.22);clip-path:var(--chaf12)}
body.kit .dz-quien .dz-av{margin:0 0 0 -2px}
body.kit .dz-quien .dz-av svg{width:38px;filter:none}
body.kit .dz-tiempo{border:0;border-bottom:3px solid rgba(30,27,75,.2);border-radius:0;box-shadow:none;background:#EBDBB0;color:var(--d-navy);clip-path:var(--chaf8)}
body.kit .dz-barra{height:18px;border:0;border-radius:0;background:#EADFC0;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
body.kit .dz-barra i{background:#FBC53F;border-radius:0}
/* tarjetas (marcador y adivinanzas): la pestaña pasa a ser el titulo de la tarjeta */
body.kit .dz-card{--rot:0deg}
body.kit .dz-pestana{position:static;left:auto;top:auto;transform:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0 0 8px;font-family:Fredoka,Nunito,sans-serif;color:var(--d-navy)}
body.kit .dz-pestana svg{color:var(--d-mor)}
body.kit .dz-lista-cab{color:var(--d-suave)}
/* filas del marcador */
body.kit .dz-fila{border:0;border-radius:0;margin-bottom:4px;background:#F7EFDB;clip-path:var(--chaf8)}
body.kit button.dz-fila:hover{background:#EFE3C6}
body.kit .dz-fila.sel{background:#FFE9A8;box-shadow:inset 0 0 0 3px var(--d-mor)}
body.kit .dz-fila.yo{background:#FFE9A8}
body.kit .dz-fila.lider{background:#FFE08A}
body.kit .dz-ins{border:0;border-radius:0;box-shadow:none;clip-path:var(--octo)}
body.kit .dz-ins.dz-ins-lider{border:0;border-radius:0;box-shadow:none;clip-path:var(--chaf8)}
/* pista y palabra */
body.kit .dz-ch{border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background:#FFD764;color:var(--d-navy);clip-path:var(--chaf8)}
body.kit .dz-ch.h{background:#EBDBB0;color:transparent}
body.kit:not(.jug) .dz-num,body.kit.jug .dz-num{color:var(--d-suave);text-shadow:none}
body.kit:not(.jug) .dz-palabra,body.kit.jug .dz-palabra{color:var(--d-navy);text-shadow:none}
/* lienzo (siempre blanco) */
body.kit .dz-lienzo{background:#fff;border:3px solid #E3D1A0;border-radius:0;box-shadow:none;clip-path:var(--chaf12)}
body.kit .dz-lienzo canvas{border:0!important;border-radius:0!important;box-shadow:none!important}
body.kit .dz-velo{border-radius:0;background:rgba(30,27,75,.72)}
body.kit .dz-velo h2{text-shadow:none}
/* adivinanzas */
body.kit .dz-msgs>div{border-radius:0;clip-path:var(--chaf8);background:#F7EFDB}
body.kit .dz-msgs>div:nth-child(odd){background:#F7EFDB}
body.kit .dz-msgs>div.ok{background:#CFF3E3}
body.kit .dz-msgs>div.casi{background:#FFE9A8}
body.kit .dz-inp input{border:3px solid #E3D1A0;border-radius:0;box-shadow:none;background-color:#fff;clip-path:var(--chaf8)}
body.kit .dz-inp input:focus{border-color:#6B4DF2}
body.kit .dz-env{border:0;border-bottom:3px solid rgba(30,27,75,.26);border-radius:0;box-shadow:none;background:linear-gradient(115deg,#FECF54 0 38%,#FBC53F 38% 74%,#F2BB35 74%);color:var(--d-navy);clip-path:var(--chaf8)}
/* herramientas de dibujo (las usa quien dibuja): piezas facetadas */
body.kit .dz-t,body.kit .dz-bt{border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);clip-path:var(--chaf8)}
body.kit .dz-t.on{background-color:#FBC53F;color:var(--d-navy)}
body.kit .dz-paleta,body.kit .dz-grosores{border:0;border-bottom:4px solid var(--d-borde);border-radius:0;box-shadow:none;background:#fff;clip-path:var(--chaf12)}
body.kit .dz-c{border:0;border-radius:0;box-shadow:none;clip-path:var(--octo)}
body.kit .dz-c.on{outline:0;transform:scale(1.2);box-shadow:inset 0 0 0 3px #1E1B4B}
body.kit .dz-g{border-radius:0;clip-path:var(--octo)}
body.kit .dz-g.on{background:#FBC53F}
/* pie del profesor y paneles propios del profesor */
body.kit:not(.jug) .dz-pie .ver,body.kit.jug .dz-pie .ver{color:var(--d-suave);text-shadow:none}
body.kit .dh-gan div{border:0;border-bottom:3px solid rgba(30,27,75,.2);border-radius:0;box-shadow:none;background:#F7EFDB;clip-path:var(--chaf8)}
body.kit .dh-sel{border:0;border-radius:0;box-shadow:none;background:#fff;clip-path:var(--chaf12)}
body.kit .dh-sel button,body.kit .dh-vet button{border:0;border-bottom:3px solid rgba(30,27,75,.2);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);clip-path:var(--chaf8)}
body.kit .dh-sel button.rojo{background-color:#E8506C;color:#fff}
body.kit .dh-autobar{border-radius:0;background:#EADFC0}
body.kit .dh-autobar i{background:#FBC53F}

/* velo sobre el lienzo (esperando, eligiendo palabra...): crema y la campanita */
body.kit .dz-velo{background:#fff;color:var(--d-navy)}
body.kit .dz-velo h2{color:var(--d-navy)}
body.kit .dz-velo img.mas{width:clamp(70px,10vw,120px);height:auto;animation:flota 3.2s ease-in-out infinite}

/* palabras para elegir (quien dibuja, en el celular): fichas de colores con las tres franjas */
body.kit .dz-velo .opc{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px}
body.kit .dz-velo .opc button{border:0;border-bottom:5px solid rgba(0,0,0,.2);border-radius:0;box-shadow:none;padding:12px;font:inherit;font-weight:900;font-size:clamp(19px,5.6vw,24px);color:var(--d-navy);cursor:pointer;background-image:var(--bandas);clip-path:var(--chaf12);transition:none}
body.kit .dz-velo .opc button:nth-child(1){background-color:#38D39F}
body.kit .dz-velo .opc button:nth-child(2){background-color:#4DA3FF}
body.kit .dz-velo .opc button:nth-child(3){background-color:#FFD25A}
body.kit .dz-velo .opc button:nth-child(4){background-color:#FF5C73;color:#fff}
body.kit .dz-velo .opc button:nth-child(5){background-color:#EBDBB0}
body.kit .dz-velo .opc button:active{transform:translateY(3px)}

/* Lienzo del juego de dibujar: UN solo marco (el de dentro). El contenedor no lleva borde y el marco arena se dibuja encima con las esquinas cortadas completas. */
:root{--esq:linear-gradient(135deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px),linear-gradient(225deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px),linear-gradient(315deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px),linear-gradient(45deg,transparent 5.66px,#E3D1A0 5.66px 9.9px,transparent 9.9px)}
body.kit .dz-lienzo{border:0;background:none;box-shadow:none;clip-path:none}
body.kit .dz-lienzo>.lienzo{position:relative;border:0;border-radius:0;box-shadow:none;background:#fff;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
body.kit .dz-lienzo>.lienzo::after,body.kit .dz-lienzo>.dz-velo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:3px solid #E3D1A0;background-image:var(--esq);background-origin:border-box}
body.kit .dz-lienzo>.dz-velo{clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
/* Encabezado: el rotulo de quien dibuja queda SIEMPRE al centro (tres columnas: ronda, quien, tiempo). En el profesor se reserva el espacio de los botones fijos solo en la tercera columna. */
@media (min-width:760px){
  body.kit .dz-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center}
  body.kit .dz-top>.dz-ronda{justify-self:start}
  body.kit .dz-top>.dz-tiempo{justify-self:end}
  body.kit .dz-profe .dz-top{padding-right:0}
  body.kit .dz-profe .dz-top>.dz-tiempo{margin-right:190px}
}

/* Botones de abajo del profesor (ver palabra, saltar turno, terminar): grandes, como acciones de verdad y no como etiquetas */
body.kit .dz-pie .b3{--c:12px;min-height:56px;padding:12px 30px;font-size:19px;gap:10px}
body.kit .dz-pie .b3 svg{width:24px;height:24px}
body.kit .dz-pie{margin-top:18px}

/* Mas aire en la pantalla del profesor del juego de dibujar: el contenido baja para no chocar con "Exit game" y los iconos fijos, y hay mas margen a los lados y entre las piezas */
@media (min-width:760px){
  body.kit.con-barra #app:has(#v-dib:not(.hide)){padding:84px 40px 40px}
  body.kit .dz{gap:20px}
  body.kit .dz-main{margin-top:12px;gap:26px}
  body.kit .dz-card{padding:22px 22px 16px}
  body.kit .dz-pie{margin-top:24px}
}

/* ===== Barra de dibujo de UNA sola linea: herramienta, color y tamano son botones que abren su menu al tocarlos (dibujo-ui.js); siempre visibles: deshacer, rehacer y borrar ===== */
body.kit .dz-herr{display:flex;align-items:center;gap:10px;position:relative}
body.kit .dz-mn{display:flex;align-items:center;justify-content:center;gap:4px;min-width:56px;height:46px;padding:0 10px;border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);cursor:pointer;clip-path:var(--chaf8)}
body.kit .dz-mn[aria-expanded="true"]{background-color:#FBC53F}
body.kit .dz-mn svg{width:22px;height:22px}
body.kit .dz-mn svg.dz-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
body.kit .dz-mn-sw{display:block;width:26px;height:26px;background:#000;clip-path:var(--octo)}
body.kit .dz-mn-dot{display:block;border-radius:50%;background:var(--d-navy)}
body.kit .dz-herr>.dz-botones{margin-left:auto;display:flex;gap:6px}
body.kit .dz-pop{position:absolute;left:0;bottom:calc(100% + 12px);z-index:20;padding:12px;background:#fff;border-bottom:4px solid var(--d-borde);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
body.kit .dz-pop.hide{display:none}
body.kit .dz-pop .dz-tools{display:flex;gap:8px;flex-wrap:wrap}
body.kit .dz-pop .dz-grosores{display:flex;gap:8px;padding:0;border:0;background:none;clip-path:none;box-shadow:none}
body.kit .dz-pop .dz-paleta{display:grid;grid-template-columns:repeat(8,34px);gap:8px;padding:0;border:0;background:none;clip-path:none;box-shadow:none}
body.kit .dz-pop .dz-c{width:34px;height:34px;aspect-ratio:auto}
body.kit .dz-pop .dz-g{width:40px;height:40px}
/* con una sola linea de herramientas el lienzo puede ser mas grande */
body.kit .dz-centro.con-herr .dz-lienzo{width:min(100%,max(220px,calc((100vh - 300px) * 1.3333)))}

/* ===== Profundidad y aire en el juego de dibujar (profesor y jugador) ===== */
/* tarjetas de marcador y adivinanzas: borde de abajo mas grueso y sombra suave que sigue la forma (el filtro va en el contenedor porque clip-path recorta las sombras) */
body.kit .dz-card{border-bottom-width:6px}
body.kit .dz-izq,body.kit .dz-der{filter:drop-shadow(0 8px 10px rgba(30,27,75,.28))}
/* lienzo: sombra suave detras (un rectangulo desenfocado, para no volver a pintar el filtro con cada trazo) */
body.kit .dz-lienzo{isolation:isolate}
body.kit .dz-lienzo::before{content:"";position:absolute;inset:6px 4px -10px;z-index:-1;background:rgba(30,27,75,.34);filter:blur(9px);pointer-events:none}
body.kit .dz-lienzo>.lienzo::after,body.kit .dz-lienzo>.dz-velo::after{border-width:4px}
/* pista con letras: fichas con mas cuerpo y aire */
body.kit .dz-pista{padding:10px 0 14px;min-height:84px}
body.kit .dz-ch{border-bottom-width:5px;filter:drop-shadow(0 3px 0 rgba(30,27,75,.16))}
body.kit .dz-palabra{margin-top:4px}
/* aire en la pantalla del que juega (computadora y celular) */
@media (min-width:760px){
  body.kit.jug #app{padding:34px 44px 40px}
  body.kit.jug .dz{gap:20px}
  body.kit.jug .dz-main{margin-top:14px;gap:28px}
  body.kit.jug .dz-card{padding:22px 22px 16px}
  body.kit.jug .dz-centro{gap:16px}
}
@media (max-width:759px){
  body.kit.jug #app{padding:22px 18px 28px}
  body.kit.jug .dz{gap:16px}
  body.kit.jug .dz-centro{gap:14px}
}

/* ===== Barra de dibujo: una sola tira CENTRADA y pegada (herramienta, color, tamano, deshacer, rehacer, borrar); los menus se abren al pasar el raton ===== */
body.kit .dz-herr{justify-content:center;gap:3px}
body.kit .dz-herr>.dz-botones{display:contents}
body.kit .dz-mnw{position:relative}
body.kit .dz-herr .dz-mn,body.kit .dz-herr .dz-bt{height:46px;min-width:50px;width:auto;padding:0 12px}
body.kit .dz-herr .dz-bt{width:50px;padding:0}
body.kit .dz-popw{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:14px;z-index:30}
body.kit .dz-popw.hide{display:none}
body.kit .dz-popw>.dz-pop{position:relative;left:auto;bottom:auto}
/* el color es un octagono relleno; el tamano es una raya cuyo grosor es el del pincel: asi no se confunden */
body.kit .dz-mn-sw{width:28px;height:28px}
body.kit .dz-mn-dot{width:32px;border-radius:99px;background:var(--d-navy)}
body.kit .dz-g i{width:28px!important;border-radius:99px}
/* los menus de la barra de dibujo se separan del lienzo con una sombra suave (el filtro va en la cajita porque el recorte de la pieza anularia una sombra propia) */
body.kit .dz-popw{filter:drop-shadow(0 6px 10px rgba(30,27,75,.35))}
body.kit .dz-popw>.dz-pop{border-bottom-width:5px}

/* Resumen del turno y avisos del alumno (jugar-dibujo.js): filas y aviso flotante como piezas de poligono */
body.kit .dz-velo .gan div{border:0;border-bottom:3px solid rgba(30,27,75,.2);border-radius:0;box-shadow:none;background:#F7EFDB;clip-path:var(--chaf8);padding:4px 12px}
body.kit .dz-velo .gan div.yo{background:#FFE9A8}
body.kit .daviso{border:0;border-bottom:4px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background:#fff;color:var(--d-navy);clip-path:var(--chaf12);padding:8px 18px}

/* Respuesta correcta (resultados del profesor): una palomita en un octagono blanco al inicio de la ficha, sin anillo oscuro (se cortaba en las esquinas y parecia un error) */
body.kit #v-q .op .good{transform:none;box-shadow:none}
body.kit #v-q .op .good::before{content:"";flex:none;width:44px;height:44px;margin-right:2px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.5 4.5 8.5-9.5' fill='none' stroke='%231FA672' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;clip-path:var(--octo)}
body.kit #v-q .pz.good{box-shadow:none;background-color:#7ED9AE}

/* ===== Profundidad en las tarjetas y barras (como los botones y las respuestas): franjas suaves y borde de abajo mas grueso ===== */
body.kit .papel{background-image:linear-gradient(115deg,#FFFFFF 0 38%,#FFFDF9 38% 74%,#FEFAF1 74%)!important;border-bottom-width:6px}
body.kit .dz-card{border-bottom-width:6px}
body.kit #v-q #bar,body.kit #v-lobby #bar{background-image:linear-gradient(115deg,#F0E6CB 0 38%,#EADFC0 38% 74%,#E0D3AC 74%);border-bottom:4px solid #D3C49A;height:24px}
body.kit #v-q #bar i{background-image:linear-gradient(115deg,#FED158 0 38%,#FBC53F 38% 74%,#F2BB35 74%);border-bottom:4px solid #C9921A}
body.kit .dz-barra{background-image:linear-gradient(115deg,#F0E6CB 0 38%,#EADFC0 38% 74%,#E0D3AC 74%);border-bottom:4px solid #D3C49A;height:24px}
body.kit .dz-barra i{background-image:linear-gradient(115deg,#FED158 0 38%,#FBC53F 38% 74%,#F2BB35 74%);border-bottom:4px solid #C9921A}

/* ===== Fondo propio del juego de dibujar (profesor y jugador): papel crema con adornos en las esquinas ===== */
body.kit:has(#v-dib:not(.hide)),body.kit:has(#v-lobby:not(.hide)),body.kit:has(#v-fin:not(.hide)),body.kit.jug{background:#F6E8CC url(/assets/arte/dingadoo/fondo-dibujo.webp) center/cover no-repeat fixed}
body.kit:has(#v-dib:not(.hide))::before,body.kit:has(#dib:not(.hide))::before{display:none!important}

/* Cierre de turno (profesor y alumno): "The word was" y la palabra en una pieza amarilla, la campanita arriba, filas arena */
body.kit .dz-velo h2.dz-cierre{display:flex;flex-direction:column;align-items:center;gap:8px}
body.kit .dz-velo h2.dz-cierre small{font-size:.5em;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--d-suave)}
body.kit .dz-velo .dz-pal{display:inline-block;padding:6px 26px 8px;background:#FBC53F;border-bottom:5px solid rgba(30,27,75,.22);clip-path:var(--chaf12);font-weight:900;color:var(--d-navy)}
body.kit .dz-velo .dh-gan div{padding:5px 14px}
body.kit .dz-velo{gap:8px;padding:12px}
body.kit .dz-velo img.mas{width:auto;height:clamp(54px,14vh,110px)}
body.kit .dz-velo .dz-pal{padding:2px 22px 4px}
body.kit .dz-velo h2{font-size:clamp(18px,min(4vw,5.2vh),44px);line-height:1.1}
body.kit .dz-velo img.mas{height:clamp(44px,11vh,100px)}

/* ===== Barra de dibujo con todo a la vista: una tarjeta del ancho del lienzo, centrada con el, herramientas arriba y colores abajo ===== */
body.kit .dz-herr{flex-direction:column;align-items:stretch;gap:12px;padding:12px 14px;background:#fff;border-bottom:5px solid var(--d-borde);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px)}
body.kit .dz-herr.hide{display:none}
body.kit .dz-centro.con-herr .dz-herr{width:min(100%,max(220px,calc((100vh - 340px) * 1.3333)));margin:0 auto;box-sizing:border-box}
body.kit .dz-centro.con-herr .dz-lienzo{width:min(100%,max(220px,calc((100vh - 340px) * 1.3333)))}
body.kit .dz-f1{display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;gap:10px 14px}
body.kit .dz-f1 .dz-tools,body.kit .dz-f1 .dz-grosores,body.kit .dz-f1>.dz-botones{display:flex;gap:6px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;clip-path:none;margin:0}
body.kit .dz-herr .dz-t,body.kit .dz-herr .dz-bt,body.kit .dz-herr .dz-g{width:42px;height:42px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-bottom:3px solid rgba(30,27,75,.22);border-radius:0;box-shadow:none;background-color:#EBDBB0;background-image:var(--bandas);color:var(--d-navy);clip-path:var(--chaf8);transition:none;cursor:pointer}
body.kit .dz-herr .dz-t.on,body.kit .dz-herr .dz-g.on{background-color:#FBC53F}
body.kit .dz-herr .dz-bt:disabled{opacity:.4;cursor:default}
body.kit .dz-herr .dz-t:active,body.kit .dz-herr .dz-bt:active:not(:disabled),body.kit .dz-herr .dz-g:active{transform:translateY(2px);box-shadow:none}
svg.dz-ik{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.kit .dz-herr .dz-g i{display:block;width:22px!important;height:max(2px,calc(var(--g) * var(--esc,.5) * 1px))!important;border-radius:99px;background:var(--d-navy)}
body.kit .dz-herr .dz-paleta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;clip-path:none}
body.kit .dz-herr .dz-c{position:relative;width:30px;height:30px;aspect-ratio:auto;padding:0;border:0;border-radius:0;box-shadow:none;clip-path:var(--octo);cursor:pointer;transition:none}
body.kit .dz-herr .dz-c.on::after{content:"";position:absolute;inset:9px;background:#fff;border:2px solid rgba(30,27,75,.55);clip-path:var(--octo);box-sizing:border-box}
body.kit .dz-velo .gan{max-width:420px;gap:7px;font-size:clamp(15px,2.2vw,22px)}
body.kit .dz-velo .gan div{padding:5px 14px}
@container (min-width:600px){
  body.kit .dz-herr .dz-t,body.kit .dz-herr .dz-bt,body.kit .dz-herr .dz-g{width:36px;height:36px}
  body.kit .dz-f1{flex-wrap:nowrap;gap:8px}
  body.kit .dz-f1 .dz-tools,body.kit .dz-f1 .dz-grosores,body.kit .dz-f1>.dz-botones{gap:4px}
  body.kit .dz-herr .dz-paleta{display:grid;grid-template-columns:repeat(24,1fr);gap:4px}
  body.kit .dz-herr .dz-c{width:100%;height:auto;aspect-ratio:1/1;max-width:30px;justify-self:center}
}

/* Profesor que juega: el lienzo mide siempre lo mismo y la barra de dibujo tiene su sitio reservado (oculta cuando no le toca), asi nada se mueve ni hace falta scroll para ver los botones de abajo */
/* el profesor que juega usa toda la altura de la pantalla (sin el 90 % de aire): la columna central se estira y el lienzo toma lo que sobre, en proporcion 4:3, asi nunca hace falta scroll */
body.kit .dz-profe .dz-centro.profe-juega .dz-herr.hide{display:flex!important;visibility:hidden}
/* profesor que juega: menos aire entre filas para darle altura al lienzo */

/* ===== Todo se adapta al tamano del lienzo: barra de dibujo y velos (fin de turno, esperando...) ===== */
body.kit .dz-lienzo{container-type:inline-size}
body.kit .dz-velo{overflow:hidden;gap:clamp(4px,1.6cqi,10px);padding:clamp(6px,3cqi,16px)}
body.kit .dz-velo h2{font-size:clamp(14px,5.4cqi,44px)}
body.kit .dz-velo h2.dz-cierre small{font-size:.5em}
body.kit .dz-velo img.mas{height:clamp(34px,13cqi,100px);width:auto}
body.kit .dz-velo .dz-pal{padding:1px clamp(10px,4cqi,22px) 3px}
body.kit .dz-velo .dh-gan,body.kit .dz-velo .gan{font-size:clamp(11px,3.6cqi,22px);gap:clamp(3px,1.2cqi,7px);max-width:min(420px,92cqi)}
body.kit .dz-velo .dh-gan div,body.kit .dz-velo .gan div{padding:clamp(2px,.8cqi,5px) clamp(8px,3cqi,14px)}
body.kit .dz-velo .dh-autobar{max-width:min(420px,92cqi);height:clamp(5px,1.6cqi,8px)}
@container (min-width:440px) and (max-width:599px){
  body.kit .dz-herr{padding:10px 12px;gap:8px}
  body.kit .dz-f1{flex-wrap:nowrap;gap:6px;justify-content:space-between}
  body.kit .dz-f1 .dz-tools,body.kit .dz-f1 .dz-grosores,body.kit .dz-f1>.dz-botones{gap:2px}
  body.kit .dz-herr .dz-t,body.kit .dz-herr .dz-bt,body.kit .dz-herr .dz-g{width:28px;height:28px}
  body.kit .dz-herr svg.dz-ik{width:18px;height:18px}
  body.kit .dz-herr .dz-g i{width:18px!important}
  body.kit .dz-herr .dz-paleta{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
  body.kit .dz-herr .dz-c{width:100%;height:auto;aspect-ratio:1/1;max-width:26px;justify-self:center}
  body.kit .dz-herr .dz-c.on::after{inset:25%}
}
@container (max-width:439px){
  body.kit .dz-herr{padding:8px 10px;gap:8px}
  body.kit .dz-herr .dz-t,body.kit .dz-herr .dz-bt,body.kit .dz-herr .dz-g{width:32px;height:32px}
  body.kit .dz-herr svg.dz-ik{width:20px;height:20px}
  body.kit .dz-herr .dz-paleta{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
  body.kit .dz-herr .dz-c{width:100%;height:auto;aspect-ratio:1/1;max-width:30px;justify-self:center}
  body.kit .dz-herr .dz-c.on::after{inset:25%}
}

/* El modo "profesor que juega" que llena la pantalla solo vale en la vista ancha (tres columnas); en pantallas mas angostas todo vuelve a fluir normal */
@media (min-width:980px){
  body.kit #app:has(.profe-juega){height:100vh;min-height:0;box-sizing:border-box;overflow:hidden}
  body.kit #app:has(.profe-juega) .dz-profe{transform:none;height:calc(100vh - 128px);min-height:0;box-sizing:border-box}
  body.kit #app:has(.profe-juega) .dz-profe .dz-main{flex:1;min-height:0}
  body.kit .dz-profe .dz-centro.profe-juega{min-height:0;height:100%;display:flex;flex-direction:column}
  body.kit .dz-profe .dz-centro.profe-juega .dz-lienzo{flex:1 1 0;min-height:0;width:auto!important;aspect-ratio:4/3;max-width:100%;align-self:center}
  body.kit .dz-profe .dz-centro.profe-juega .dz-herr{width:min(100%,640px)!important;flex:none;margin:0 auto}
  body.kit #app:has(.profe-juega){padding-top:70px;padding-bottom:18px}
  body.kit .dz-profe:has(.profe-juega) .dz-pie{margin-top:10px}
  body.kit .dz-profe .dz-centro.profe-juega .dz-pista{min-height:56px;padding:2px 0 6px;flex:none}
  body.kit .dz-profe:has(.profe-juega){gap:10px}
  body.kit .dz-profe:has(.profe-juega) .dz-barra{margin-top:0;margin-bottom:0}
  body.kit .dz-profe .dz-centro.profe-juega .dz-pista{min-height:44px;padding:0 0 4px}
  body.kit .dz-profe .dz-centro.profe-juega{gap:8px}
  body.kit .dz-profe .dz-centro.profe-juega .dz-lienzo{max-height:75cqi}
}
body.kit .dz-herr .dz-t,body.kit .dz-herr .dz-bt,body.kit .dz-herr .dz-g{min-width:0}

/* QR ampliable y PIN que copia el enlace (sala de espera del profesor) */
body.kit .qrbox{cursor:pointer}
/* al pasar el mouse sobre el QR sale una capa con el texto "Expand" */
body.kit .qrbox::after{content:attr(data-expandir);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(30,27,75,.62);color:#fff;font-weight:900;font-size:clamp(16px,2.4vh,22px);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .15s;pointer-events:none;clip-path:inherit}
body.kit .qrbox:hover::after,body.kit .qrbox:focus-visible::after{opacity:1}
body.kit #cod{cursor:pointer;position:relative}
body.kit .pin-col{position:relative}
body.kit .copiado{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,6px);padding:6px 16px;background:#1F9D6B;color:#fff;font-weight:900;font-size:14px;clip-path:var(--chaf8);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
body.kit .copiado.on{opacity:1;transform:translate(-50%,0)}
.qrg{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(30,27,75,.62);cursor:zoom-out;animation:abre .18s ease-out}
.qrg-caja{display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(14px,3vh,28px);background:#fff;border-bottom:8px solid #D8C79E;clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%,0 22px);max-height:94vh;box-sizing:border-box}
.qrg-svg{width:min(66vh,84vw);height:min(66vh,84vw);display:block}
.qrg-url{font-weight:900;font-size:clamp(16px,3vh,28px);color:#6B5FB5}
.qrg-pin{font-weight:900;font-size:clamp(34px,8vh,84px);letter-spacing:.1em;color:#4A3FB5;line-height:1}

/* Pausa, lista de jugadores en partida y cambiar nombre */
.pausa-v{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(30,27,75,.7);animation:abre .18s ease-out}
.pausa-caja{display:flex;flex-direction:column;align-items:center;gap:10px;padding:clamp(18px,4vh,36px) clamp(26px,6vw,64px);background:#fff;border-bottom:8px solid #D8C79E;clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%,0 22px);text-align:center}
.pausa-caja img{height:clamp(70px,16vh,140px);width:auto}
.pausa-caja h2{margin:0;font-size:clamp(28px,6vh,56px);color:var(--d-navy)}
.pausa-caja p{margin:0 0 6px;color:var(--d-suave);font-weight:800}
.jug-pop{width:min(460px,92vw);max-height:76vh;overflow:auto}
.jug-lista{display:flex;flex-direction:column;gap:6px}
.jug-fila{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#F7EFDB;clip-path:var(--chaf8)}
.jug-fila .jug-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;color:var(--d-navy)}
.jug-fila .b3{min-height:32px;padding:4px 10px;font-size:12px}
.jug-fila.ed input{flex:1;min-width:0}
.jug-vacio{color:var(--d-suave);font-weight:800}
.ren-fila{display:flex;gap:6px;margin:8px 0 4px}
.ren-fila input{flex:1;min-width:0}

/* Tarjeta "partida en curso" en My Games (el profesor cerro la pestana y puede volver) */
.dreanudar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin:14px 0 18px;background:#fff;border-bottom:5px solid var(--d-borde);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%,0 14px)}
.dreanudar.hide{display:none}
.dreanudar .tx{flex:1;min-width:200px}
.dreanudar b{display:block;font-size:18px;color:var(--d-navy)}
.dreanudar small{color:var(--d-suave);font-weight:800}

/* Modo equipos: circulito de color, etiqueta del jugador, barras de puntaje y resumen en la sala de espera */
.eq-dot{display:inline-block!important;width:12px!important;height:12px!important;min-width:0;padding:0!important;margin:0 6px 0 4px!important;vertical-align:middle;background:var(--eq,#999)!important;clip-path:var(--octo)!important;border:0!important;flex:none;box-shadow:none!important;transform:none!important}
.eq-chip{position:fixed;left:10px;top:10px;z-index:60;display:inline-flex;align-items:center;gap:2px;padding:5px 12px 5px 8px;background:#fff;border-bottom:3px solid var(--eq,#D8C79E);color:var(--d-navy,#1E1B4B);font-weight:900;font-size:13px;clip-path:var(--chaf8);pointer-events:none}
.eq-chip .eq-dot{background:var(--eq)}
.eq-chip.hide{display:none}
body:has(#dib:not(.hide)) .eq-chip{display:none}
.eq-lobby{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 12px}
.eq-pill{display:inline-flex;align-items:center;padding:5px 12px 5px 6px;background:#fff;border-bottom:3px solid var(--eq);font-weight:900;color:var(--d-navy);clip-path:var(--chaf8)}
.chips button{--eq:transparent}
.chips button .eq-dot{margin-left:6px}
#eq5{--rot:0deg;padding:14px 22px 14px;margin:10px 8px 0}
#eq5 small{display:block;font-weight:900;color:var(--d-suave);font-size:14px;margin-bottom:6px}
#eq5 ol{display:flex}
#eq5 ol{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.eq-fila{display:grid;grid-template-columns:24px minmax(150px,1.1fr) 2.2fr auto;gap:10px;align-items:center;font-weight:900;color:var(--d-navy)}
.eq-fila .eq-n{white-space:nowrap}
.eq-fila .eq-bar{display:block;height:14px;background:#EADFC0;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
.eq-fila .eq-bar u{display:block;height:100%;background:var(--eq);text-decoration:none;transition:width .5s}
.eq-cuarto{text-align:center;color:var(--d-suave);font-weight:800;margin:6px 0}
.dz-fila .n .eq-dot{margin-left:0}
.dz-eq{margin:0 0 8px}
.dz-eq .eq-fila{grid-template-columns:18px minmax(60px,1fr) 1.4fr auto;font-size:13px;margin-bottom:4px}

/* ventana de confirmacion propia */
.conf-dg{z-index:500}
.conf-dg .pausa-caja{max-width:min(520px,92vw)}
.conf-dg .conf-tit{font-size:clamp(20px,3.4vh,28px);line-height:1.25}
.conf-bot{display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap}
/* pista al pasar el mouse por el PIN: se puede tocar para copiar el enlace */
body.kit #cod::after{content:attr(data-copiar);position:absolute;left:50%;top:100%;transform:translate(-50%,2px);white-space:nowrap;padding:6px 14px;background:rgba(30,27,75,.88);color:#fff;font-weight:900;font-size:13px;letter-spacing:.03em;clip-path:var(--chaf8);opacity:0;pointer-events:none;transition:opacity .15s;z-index:5}
body.kit #cod:hover::after,body.kit #cod:focus-visible::after{opacity:1}
body.kit #cod.ya::after{opacity:0}
body.kit #cod:hover{filter:brightness(1.1)}
.chips button{cursor:default;pointer-events:none}

/* ═════════ MOVIMIENTO (9 oct 2026) ═════════
   Reglas del sistema (basadas en las skills de Emil Kowalski, ver .claude/skills): solo transform y opacity; nada de scale(0) (se nace desde .9 a .97);
   entradas con ease-out fuerte; la interfaz se queda por debajo de 300 ms (lo unico mas largo es la celebracion del final); lo que se repite mucho
   (herramientas del lienzo, marcador, reloj) casi no se mueve; y todo lo que el usuario puede disparar rapido usa transiciones, no keyframes. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--mo-y:8px;--mo-s:.97}
@media (prefers-reduced-motion:reduce){:root{--mo-y:0px;--mo-s:1}}
@keyframes mo-in{from{opacity:0;transform:translateY(var(--mo-y)) scale(var(--mo-s))}to{opacity:1;transform:none}}
@keyframes mo-view{from{opacity:0;transform:translateY(var(--mo-y))}to{opacity:1;transform:none}} /* pantallas enteras: solo fundido y 8 px de subida; escalar una pantalla completa se ve como un zoom */
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes mo-drop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* 1. Presionar: todos los botones y piezas tocables responden al instante y vuelven suave (antes varios tenian transition:none) */
body.kit .b3,body.kit .dz-t,body.kit .dz-bt,body.kit .dz-g,body.kit .dz-c,body.kit #o button,body.kit .pieza,body.kit .item,body.kit .tp,body.kit .seg button,body.kit .chp span,body.kit .chp button,body.kit #barra .ib,body.kit .dd-btn,body.kit .dd-op,body.kit .jug-fila .b3{transition:transform .13s var(--ease-out),background-color .13s ease,opacity .13s ease}
/* 2. Pasar el mouse: ver el bloque "Botones vivos" al final (antes se habia quitado por completo y los botones se sentian muertos) */
/* 3. Pantallas del profesor y el dibujo: el contenido sube un poco y aparece en vez de teletransportarse (las pantallas del celular ya traen su propia entrada) */
/* (sin animacion al cambiar de pantalla: se sentia como un destello; las pantallas cambian al instante y solo se animan piezas pequenas) */
/* 4. Preguntas: las respuestas entran una tras otra (40 ms entre cada una) y la ficha nueva del jugador aparece con un pop corto */
body.kit #ops>*,body.kit #o>button{animation:mo-in .22s var(--ease-out) backwards}
body.kit #ops>*:nth-child(2),body.kit #o>button:nth-child(2){animation-delay:40ms}
body.kit #ops>*:nth-child(3),body.kit #o>button:nth-child(3){animation-delay:80ms}
body.kit #ops>*:nth-child(4),body.kit #o>button:nth-child(4){animation-delay:120ms}
body.kit #ops>*:nth-child(n+5),body.kit #o>button:nth-child(n+5){animation-delay:160ms}
body.kit #top5 li,body.kit .resto li{animation-duration:.28s}
body.kit .chips span.nuevo,body.kit .chips button.nuevo,body.kit .dz-ch.nuevo{animation:mo-pop .22s var(--ease-out) backwards}
/* 5. Ventanas sobre la pantalla (QR grande, pausa, confirmar): el fondo aparece y la caja crece desde .9; antes se escalaba todo el fondo */
.qrg,.pausa-v{animation:mo-fade .18s var(--ease-out)}
.qrg-caja,.pausa-caja{animation:mo-pop .22s var(--ease-out) backwards}
/* 6. Menus desplegables: nacen desde el lado de donde se abren; la flechita gira */
.dd-pop{transform-origin:top left;animation:mo-drop .16s var(--ease-out)}
.dd-pop.sube{transform-origin:bottom left}
.dd-chev{transition:transform .16s var(--ease-out)}
.dd-abierto .dd-chev{transform:rotate(180deg)}
/* 7. Paneles del profesor (volumen, ajustes, jugadores): nacen desde la esquina del boton, rapido */
body.kit .pop{animation:mo-drop .16s var(--ease-out);transform-origin:top right}
/* 8. Resultado del turno y de la pregunta: la pieza central aparece sin el rebote viejo (escala 1.14 con giro) */
body.jug .sello.pop,body.kit .sello.pop{animation:mo-pop .26s var(--ease-out) both}
body.kit .anim{animation-duration:.28s}
/* 9. Barras de puntaje de equipo: crecen con transform (antes cambiaban el ancho) */
.eq-fila .eq-bar u{width:100%;transform-origin:left center;transform:scaleX(var(--p,0));transition:transform .3s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  body.kit #ops>*,body.kit #o>button{animation:mo-fade .15s linear backwards}
  .dd-abierto .dd-chev{transform:none}
}

/* ═════════ Menos viaje, menos rebote (9 oct 2026) ═════════
   Las animaciones heredadas del tema viejo viajaban 18 px con escala, rebotaban con giro (pop) y la mascota flotaba 10 px girando sin parar: todo se sentia "volando".
   Se redefinen con el mismo nombre (kit.css se carga despues de tema.css), asi cambian en todas las pantallas a la vez. */
@keyframes entra{from{opacity:0;transform:translateY(var(--mo-y))}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes dentra{from{opacity:0;transform:translateY(var(--mo-y))}to{opacity:1;transform:none}}
body.kit .dc{animation-duration:.28s;animation-delay:calc(min(var(--i,0),8) * 35ms)} /* las tarjetas ya no esperan hasta casi un segundo: el retraso tiene tope */
body.kit .code,body.kit .fin h1{animation-duration:.35s}
body.kit .pd{animation-duration:.45s;animation-delay:calc(var(--i) * 130ms)}
body.kit .dz-velo,body.kit .dh-gan div{animation-duration:.24s}
body.kit .mascota.flota,body.kit .esperando svg,body.kit .dz-velo img.mas{animation-duration:4s}
/* el editor se vuelve a dibujar completo con cada cambio: sus piezas no deben entrar de nuevo cada vez */
body.kit #editor>*,body.kit .chp span,body.kit .chp button{animation:none}
@media (prefers-reduced-motion:reduce){
  body.kit .mascota.flota,body.kit .esperando svg,body.kit .dz-velo img.mas{animation:none}
}

body.kit .dc,.dc{animation:none}
/* el editor se vuelve a dibujar con cada cambio de pregunta: ninguna de sus piezas debe animarse al entrar */
body.kit #lista .item,body.kit #lista .item *,body.kit #cuerpo *{animation:none}

/* Reordenar preguntas arrastrando: las demas se hacen a un lado con transiciones de transform (interrumpibles); la pieza agarrada se levanta 2 % y al soltar se asienta */
body.kit #lista .item{cursor:grab}
body.kit #lista.reordenando{user-select:none}
body.kit #lista.reordenando .item{transition:transform .2s var(--ease-out)}
body.kit #lista.reordenando .item.arrastrando{transition:none;position:relative;z-index:3;cursor:grabbing;filter:drop-shadow(0 6px 8px rgba(30,27,75,.25))}
body.kit #lista.reordenando .item.arrastrando.soltando{transition:transform .2s var(--ease-out)}
@media (prefers-reduced-motion:reduce){body.kit #lista.reordenando .item,body.kit #lista.reordenando .item.arrastrando.soltando{transition:none}}
/* asa de puntitos de cada pregunta de la lista: siempre visible (no se anima), un poco mas fuerte al pasar el mouse */
body.kit #lista .item .asa{flex:none;width:10px;height:16px;margin-left:auto;fill:currentColor;color:var(--d-suave);opacity:.5}
body.kit #lista .item em+.asa{margin-left:6px}
body.kit #lista .item:hover .asa,body.kit #lista .item.arrastrando .asa{opacity:.9}
body.kit #lista .item.sel .asa{color:var(--d-navy);opacity:.6}
/* etiqueta del tipo de pregunta: azul marino con letras blancas, igual para todos los tipos (se lee sobre cualquier fondo) */
body.kit #lista .item em{font-size:12px;padding:3px 9px;background:#1E1B4B;color:#fff;border-bottom:2px solid rgba(0,0,0,.35)}

/* Ventana de ajustes del quiz y barra de "guardado" del editor */
body.kit .aj-caja{max-width:min(640px,94vw);width:100%;align-items:stretch;text-align:left;max-height:92vh;overflow:auto;gap:6px}
body.kit .aj-caja h2{text-align:left}
body.kit .aj-sub{margin:0 0 4px;color:var(--d-suave);font-weight:800}
body.kit .aj-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
@media (max-width:560px){body.kit .aj-rejilla{grid-template-columns:1fr}}
body.kit .aj-campo{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;min-width:0}
body.kit .aj-ayuda{color:var(--d-suave);font-weight:800;font-size:12.5px;line-height:1.35}
body.kit .aj-prev{display:none;width:100%;max-height:170px;object-fit:cover;clip-path:var(--chaf8);margin:0 0 10px;background:#EBDBB0}
body.kit .aj-caja .conf-bot{justify-content:flex-end}
body.kit #sig{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:1560px;margin:12px auto 0;padding:10px 16px;background:#fff;border-bottom:4px solid var(--d-borde);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px)}
body.kit #sig.hide{display:none}
body.kit #sig .sig-t{flex:1;min-width:140px;font-weight:900;color:#1F9D6B}
/* portada de un quiz sobre el arte de la tarjeta */
body.kit .mundo>img.portada,.mundo>img.portada{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#EBDBB0}
body.kit .mundo .ico,.mundo .ico,.mundo .num{z-index:2}
body.kit .aj-caja h2{font-size:clamp(24px,4vh,32px)}

/* ═════════ My Games fase 2: estrella, menu de la tarjeta, carpetas, papelera ═════════ */
.dcarp{margin:0 0 6px}
.dnota{grid-column:1/-1;margin:0;font-weight:800;color:var(--d-suave)}
.dc.enpapelera .mundo{filter:grayscale(.7);opacity:.75}
.mundo>.estrella{position:absolute;right:6px;top:6px;z-index:2;width:36px;height:36px;padding:0;border:0;cursor:pointer;background:none;color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .12s var(--ease-out)}
.mundo>.estrella svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(30,27,75,.55))}
.mundo>.estrella.on{color:#FFC933}.mundo>.estrella.on svg{fill:#FFC933}
.mundo:has(>.estrella) .ico{display:none}
.dcard.ir{cursor:pointer}
.mundo>.estrella:active{transform:scale(.92)}
.mundo>.estrella:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.dc .dacc .dmas svg{width:20px;height:20px}
.mtar{position:fixed;z-index:400;min-width:210px;transform-origin:top right;animation:mo-drop .16s var(--ease-out);filter:drop-shadow(0 4px 0 rgba(30,27,75,.26))}
.mtar-in{background:#fff;padding:6px;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.mtar-op{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:none;color:var(--d-navy);font:800 15px/1.2 Nunito,sans-serif;text-align:left;cursor:pointer}
.mtar-op svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mtar-op:hover,.mtar-op:focus-visible{background:#F3EBD6;outline:none}
.mtar-op.rojo{color:#B3173A}
.mtar-sep{height:2px;margin:5px 8px;background:#EFE4C8}
.toast-dg{position:fixed;left:50%;bottom:24px;z-index:500;display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--d-navy);color:#fff;font-weight:800;max-width:min(92vw,520px);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.toast-dg.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-dg button{border:0;background:none;color:#FFD966;font:900 15px Nunito,sans-serif;cursor:pointer;padding:2px 4px;text-decoration:underline}
.carp-lista{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto;padding:2px}
.carp-op{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:0;background:#F3EBD6;color:var(--d-navy);font:800 16px Nunito,sans-serif;text-align:left;cursor:pointer;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.carp-op svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carp-op:hover,.carp-op:focus-visible{background:#EBDBB0;outline:none}
.carp-op.on{background:#FFE58A}
.carp-nueva{background:none;box-shadow:none}
.aj-caja .in{width:100%;padding:11px 14px;border:0;border-bottom:3px solid #D8C79E;background:#FBF6E8;color:var(--d-navy);font:800 17px Nunito,sans-serif;box-sizing:border-box}
.aj-caja .in:focus{outline:none;border-bottom-color:var(--d-navy)}
.aj-caja .err{color:#9C1230;font-weight:800;min-height:0}
.aj-carp{display:flex;gap:8px;align-items:center}.aj-carp>:first-child{flex:1;min-width:0}
.aj-carp .dd{flex:1;min-width:0}
.dcard .pie .sh{flex:none}.dcard .pie .meta{min-width:0}

/* Respuesta a lo que el usuario toca: estrella con rebote al marcar y tarjeta que se levanta (solo transform, menos de 300 ms) */
@keyframes mo-estrella{0%{transform:scale(.7)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
.mundo>.estrella.pop svg{animation:mo-estrella .26s var(--ease-out)}
.dcard .sh>.fac{transition:transform .14s var(--ease-out),filter .14s var(--ease-out)}
@media (hover:hover){.dcard .sh>.fac:hover{transform:translateY(-2px);filter:brightness(1.07)}.mundo>.estrella:hover{transform:scale(1.12)}.dcard .dmas:hover{transform:translateY(-2px)}}
.dcard .sh>.fac:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.mundo>.estrella.pop svg{animation:none}.dcard .sh>.fac,.dcard .sh>.fac:hover{transition:none;transform:none}}
.dstat{padding:0 6px;font-size:13px;font-weight:800;color:var(--d-suave)}.list .dstat{padding:0;margin-top:4px}
.dc .dacc{gap:10px}.dcard>h3{font-size:21px}

/* Tarjetas clicables (Discover y My Games): toda la tarjeta responde al mouse, salvo cuando el mouse esta sobre uno de sus botones (cada boton tiene su propio efecto) */
.dcard.ir{transition:transform .18s var(--ease-out)}
@media (hover:hover){.dcard.ir:hover:not(:has(button:hover)){transform:translateY(-4px)}}
.dcard.ir:active:not(:has(button:active)){transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.dcard.ir,.dcard.ir:hover{transition:none;transform:none}}

/* ═════════ Botones vivos (9 oct 2026) ═════════
   Todo boton tocable responde igual: al pasar el mouse sube 2 px y se ilumina un poco; al presionar se hunde. Solo transform y filter, 140 ms con ease-out.
   Solo en dispositivos con mouse (en el celular no hay "hover"). Una sola regla para todos, asi una pieza nueva no se queda sin respuesta: basta que sea .fac, .b3 o .ib. */
.fac,body.kit .b3,body.kit #barra .ib,body.kit .dd-btn,body.kit .av-b{transition:transform .14s var(--ease-out),filter .14s var(--ease-out),background-color .14s ease,opacity .14s ease}
@media (hover:hover){
  .fac:not(:disabled):not(.pronto):hover,body.kit .b3:not(:disabled):hover,body.kit #barra .ib:hover,body.kit .dd-btn:hover,body.kit .av-b:hover:hover{transform:translateY(-2px);filter:brightness(1.07)}
}
.fac:not(:disabled):not(.pronto):active,body.kit .b3:not(:disabled):active,body.kit #barra .ib:active,body.kit .dd-btn:active,body.kit .av-b:active:active{transform:translateY(2px) scale(.98);filter:none}
@media (prefers-reduced-motion:reduce){.fac,body.kit .b3,body.kit #barra .ib,body.kit .dd-btn,body.kit .av-b{transition:none}.fac:hover,body.kit .b3:hover,body.kit #barra .ib:hover,body.kit .dd-btn:hover{transform:none}}

/* Reloj de la pregunta (junto a la barra de tiempo): solo cambia el texto, sin animacion; en los ultimos 5 segundos pasa a rojo */
.barra-t{display:flex;align-items:center;gap:12px;margin:0 8px 20px}
.barra-t #bar{flex:1;min-width:0;margin:0!important}
.reloj{flex:none;min-width:58px;height:44px;padding:0 12px;display:flex;align-items:center;justify-content:center;font:700 26px/1 Fredoka,sans-serif;font-variant-numeric:tabular-nums;color:var(--d-navy);background-color:#EBDBB0;background-image:var(--bandas);border-bottom:4px solid rgba(30,27,75,.22);clip-path:var(--chaf8)}
.reloj.poco{background-color:#F2395B;color:#fff}
.reloj.hide{display:none}
body.jug .barra-t{margin:6px 4px 14px}
body.jug .reloj{min-width:50px;height:38px;font-size:22px}
body.kit #v-q .reloj{min-width:84px;height:60px;font-size:38px}

/* Cierre de la pregunta en 2 pasos: 1) estadisticas y explicacion, 2) tabla de posiciones con los lugares que cambiaron */
body.kit #v-q.paso-tabla #qp,body.kit #v-q.paso-tabla #qimg,body.kit #v-q.paso-tabla #ops,body.kit #v-q.paso-tabla #alt,body.kit #v-q.paso-tabla #cierre-info{display:none}
body.kit #v-q:not(.paso-tabla) #eq5{display:none}
#cierre-info{margin:22px 8px 0;display:flex;flex-direction:column;gap:14px;align-items:center}
#cierre-info.hide{display:none}
#stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#stats .st{font-weight:900;font-size:clamp(16px,2.4vw,22px);padding:8px 18px;border-bottom:4px solid rgba(30,27,75,.22);clip-path:var(--chaf8);background-image:var(--bandas)}
#stats .st.ok{background-color:#9BE08E;color:#0F3D08}
#stats .st.mal{background-color:#FF9AA9;color:#6B0F22}
#stats .st.nada{background-color:#EBDBB0;color:var(--d-navy)}
#expl{width:100%;max-width:880px;padding:14px 22px;text-align:left}
#expl small{display:block;font-weight:900;color:var(--d-suave);font-size:14px;margin-bottom:4px}
#expl p{margin:0;font-weight:800;font-size:clamp(18px,2.6vw,26px);line-height:1.35;color:var(--d-navy)}
body.kit #top5 ol.tabla{display:block;position:relative;margin:0;padding:0;list-style:none}
body.kit #top5 ol.tabla li{position:absolute;left:0;right:0;top:0;height:56px;animation:none;transition:transform .5s var(--ease-out),opacity .3s var(--ease-out);will-change:transform;display:flex;align-items:center;gap:12px}
body.kit #top5 ol.tabla li i.mv{flex:none;display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:900;font-size:.8em;padding:2px 10px;clip-path:var(--chaf8)}
body.kit #top5 ol.tabla li i.mv::before{content:"";width:10px;height:9px;background:currentColor}
body.kit #top5 ol.tabla li i.mv.up{background:#9BE08E;color:#0F3D08}
body.kit #top5 ol.tabla li i.mv.up::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
body.kit #top5 ol.tabla li i.mv.dn{background:#FF9AA9;color:#6B0F22}
body.kit #top5 ol.tabla li i.mv.dn::before{clip-path:polygon(0 0,100% 0,50% 100%)}
@media (prefers-reduced-motion:reduce){body.kit #top5 ol.tabla li{transition:none}}
.m-ex{margin:12px 0 0;padding:10px 14px;font-weight:800;font-size:15px;line-height:1.35;text-align:left;color:#4A3400;background:linear-gradient(115deg,#FFF3C4 0 38%,#FCE9A3 38% 74%,#F8DE86 74%);border-bottom:3px solid rgba(74,52,0,.25);clip-path:var(--chaf8)}.m-ex.hide{display:none}
body.kit #v-dib .reloj{min-width:72px;height:52px;font-size:32px}

/* Pantalla de la pregunta del profesor: la pregunta arriba y las opciones pegadas abajo.
   Los botones (Close now / Leaderboard / Next) flotan abajo a la derecha: asi aparecer o cambiar nunca empuja el contenido ni obliga a hacer scroll. */
body.kit #v-q:not(.hide){display:flex;flex-direction:column;min-height:calc(100vh - 168px)}
body.kit #v-q #ops,body.kit #v-q #alt{margin-top:auto}
body.kit #v-q #cierre-info{margin-bottom:18px}
body.kit #v-q .pie{position:fixed;right:22px;bottom:16px;z-index:30;margin:0;display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
body.kit #v-q .pie #saltar.hide{display:none}
body.kit #v-q .pie #msg:not(:empty){padding:8px 14px;background:#EBDBB0;clip-path:var(--chaf8);font-weight:900;font-size:14px}
/* El QR de la sala: marco arena para que se distinga del blanco de la tarjeta (el blanco del propio QR se conserva: hace falta para que lo lean las camaras) */
body.kit .qrbox{background:#E4D3A2;padding:8px;border-bottom-color:#C9B67F}

/* Panel de jugadores: avatar antes del nombre y buscador */
.jug-fila .jug-av{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.jug-fila .jug-av svg{width:30px;height:30px;display:block}
.jug-busca{width:100%;box-sizing:border-box;margin:4px 0 8px;padding:9px 12px;border:0;border-bottom:3px solid #D8C79E;background:#FBF6E8;color:var(--d-navy);font:800 15px Nunito,sans-serif}
.jug-busca:focus{outline:none;border-bottom-color:var(--d-navy)}
.jug-cuenta{display:block;margin:0 0 6px;font-weight:800;color:var(--d-suave)}
body.kit .dz-barra-t{display:flex;align-items:center;gap:12px}
body.kit .dz-barra-t .dz-barra{flex:1 1 auto;min-width:0}
.jug-fila .b3.ic{flex:none;width:34px;min-width:34px;padding:0}
.jug-fila .b3.ic svg{width:18px;height:18px}

/* Botones de respuesta (opcion A elegida por Bryan, 9 oct 2026): colores mas profundos con el texto en blanco y sin sombra; el amarillo pasa a ambar para que el blanco se lea */
body.kit{--rp0:#E02D4E;--rp1:#2570DA;--rp2:#DB9500;--rp3:#129A6B}
body.kit #o button.o0,body.kit #ops>div.o0{background-color:var(--rp0)}
body.kit #o button.o1,body.kit #ops>div.o1{background-color:var(--rp1)}
body.kit #o button.o2,body.kit #ops>div.o2{background-color:var(--rp2)}
body.kit #o button.o3,body.kit #ops>div.o3{background-color:var(--rp3)}
body.kit #o.vf button.o0{background-color:var(--rp3)}
body.kit #o.vf button.o1{background-color:var(--rp0)}
body.kit #o button,body.kit #ops>div{color:#fff;text-shadow:none}
body.kit #ops>div i{color:var(--d-navy)}

/* Avisos de error: pieza facetada en rojo profundo con texto blanco (antes un rosa pastel que desentonaba) */
body.kit .err,.dlib .err{background-color:#E02D4E;background-image:linear-gradient(115deg,#EE3A5A 0 38%,#E02D4E 38% 74%,#CC2444 74%);color:#fff;border:0;border-bottom:4px solid rgba(0,0,0,.2);border-radius:0;box-shadow:none;font-weight:800}
body.kit .err:empty,.dlib .err:empty{display:none}
body.kit #err:not(:empty){background-color:#E02D4E;background-image:linear-gradient(115deg,#EE3A5A 0 38%,#E02D4E 38% 74%,#CC2444 74%);color:#fff;border-bottom:4px solid rgba(0,0,0,.2)}

/* Sala de espera del alumno: personaje y estado (listo / espera) */
.espera{margin-top:6px}
.espera-av{display:flex;justify-content:center;margin:2px 0 4px}
.espera-av svg{width:112px;height:auto;display:block}
.espera-ayuda{margin:10px 0 8px;font-weight:800;font-size:14px;color:var(--d-suave);line-height:1.35}
.listo-fila{display:flex;gap:10px;justify-content:center}
.listo-fila .b3{flex:1;min-width:0;width:auto}
.espera.hide{display:none}

/* Fichas de la sala de espera: marca de "listo" (verde) o "pide esperar" (ambar) que el alumno manda desde su celular */
body.kit .chips button{position:relative;display:inline-flex;align-items:center}
body.kit .chips button .est{flex:none;margin-left:6px;width:20px;height:20px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;clip-path:var(--octo);pointer-events:none}
body.kit .chips button .est svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
body.kit .chips button .est.ok{background:#1FA66A;color:#fff}
body.kit .chips button .est.esp{background:#F2B500;color:#4A3300}
body.kit .chips button .est.esp svg rect{fill:currentColor;stroke:none}

/* Imagen de la pregunta en el editor: caja 16:9 con controles encima (se ve como en el juego) */
.media-caja{margin:6px 0 4px;display:flex;flex-direction:column;gap:8px}
.media-caja .media-img{display:none;position:relative;aspect-ratio:16/9;max-height:380px;width:100%;background:#2A2650;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px);border-bottom:5px solid #D8C79E}
.media-caja.tiene .media-img{display:block}
.media-caja .media-img img#prev{width:100%;height:100%;object-fit:contain;display:block;border:0;border-radius:0;box-shadow:none;clip-path:none;margin:0;max-height:none}
.media-ct{position:absolute;right:10px;top:10px;display:flex;gap:8px}
.media-ct .b3{min-height:34px;padding:4px 12px;font-size:13px}
.media-caja .media-vacia{display:flex;align-items:center;justify-content:center;height:120px;border:3px dashed #D8C79E;background:#FBF6E8;color:var(--d-suave);font-weight:800;font-size:15px}
.media-caja.tiene .media-vacia{display:none}
.media-caja.tiene:not(.edita) input.in{display:none}
.media-falla{display:none;margin:0;font-weight:800;font-size:13px;color:#B3173A}

/* ═════════ Editor como una app de pantalla completa (9 oct 2026, inspirado en Kahoot) ═════════
   Tres columnas que caben en la pantalla sin hacer scroll de la pagina: lista de preguntas | lienzo (pregunta, imagen y respuestas, como se vera en el juego) |
   propiedades (tipo, tiempo, puntos, explicacion y acciones). Cada columna hace su propio scroll si hace falta. En pantallas angostas vuelve a una sola columna. */
@media (min-width:901px){
  body.ed{height:100vh;display:flex;flex-direction:column;overflow:hidden}
  body.ed #cuerpo{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr) 320px;gap:16px;width:100%;max-width:none;margin:0;padding:12px clamp(12px,2vw,28px) 14px;box-sizing:border-box}
  body.ed #cuerpo>*{min-height:0}
  body.ed .izq{display:flex;flex-direction:column;min-height:0}
  body.ed #lista{flex:0 1 auto;min-height:0;overflow:auto;padding:4px 8px 6px 4px;gap:10px}
  body.ed .addrow{flex:none;margin-top:8px}
  body.ed #editor{display:flex;flex-direction:column;overflow:auto;padding:14px 18px 16px;gap:4px}
  body.ed .lienzo-comun{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  body.ed .lienzo-propio{flex:none}
  body.ed #editor label.l{margin:6px 0 4px}
  body.ed #editor textarea{min-height:64px;font-size:24px;text-align:center}
  body.ed .media-caja{flex:1 1 auto;min-height:140px}
  body.ed .media-caja.tiene .media-img{flex:1 1 auto;aspect-ratio:auto;max-height:none;min-height:140px}
  body.ed .media-caja .media-img img#prev{position:absolute;inset:0}
  body.ed .media-caja .media-vacia{flex:1 1 auto;height:auto;min-height:100px}
  body.ed #props{overflow:auto;padding:16px 16px 14px}
  body.ed #props .acc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  body.ed #props .fila{display:grid;grid-template-columns:1fr;gap:10px}
  body.ed #props textarea{min-height:110px;font-size:17px;line-height:1.35}
  body.ed #editor,body.ed #props{overflow-x:hidden}
  body.ed .ops{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ed .ops.una{grid-template-columns:minmax(0,1fr)}
  body.ed .op{min-width:0}
  body.ed .op input[type=text]{min-width:0;width:100%}
  body.ed #props .fila>div{min-width:0}
  body.ed #props select,body.ed #props .dd{min-width:0;max-width:100%}
}
@media (min-width:901px) and (max-width:1200px){body.ed #cuerpo{grid-template-columns:200px minmax(0,1fr) 270px}}
@media (max-width:900px){#cuerpo{grid-template-columns:1fr;gap:18px}body.ed #props{padding:16px}}

/* Respuestas del editor: cuadro que crece con el texto en lugar de una linea que se corta */
.op textarea.resp{flex:1;min-width:0;width:100%;min-height:44px;height:44px;margin:0;padding:11px;border:0;border-radius:0;font-size:16px;font-weight:900;line-height:1.25;resize:none;overflow:hidden;background:#fff;color:var(--tinta);text-align:left;box-sizing:border-box;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.op textarea.resp:focus{outline:none}
body.ed #editor .op textarea.resp{font-size:17px;text-align:left;min-height:44px}
/* Subir y bajar una pregunta: con mouse se arrastra desde la lista; los botones quedan solo para pantallas tactiles */
@media (hover:hover) and (pointer:fine){.solo-tactil{display:none!important}}

/* Portada en los ajustes del quiz: el marco tiene la forma de la tarjeta; se arrastra la imagen para elegir que parte se ve */
.aj-marco{position:relative;aspect-ratio:2.2/1;width:100%;overflow:hidden;background:#EBDBB0;display:flex;align-items:center;justify-content:center;cursor:default;touch-action:none;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px)}
.aj-marco.tiene{cursor:grab}.aj-marco.arrastra{cursor:grabbing}
.aj-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.aj-marco.tiene img{display:block}
.aj-vacio{font-weight:800;color:var(--d-suave)}.aj-marco.tiene .aj-vacio{display:none}
.aj-caja textarea.in{resize:vertical;min-height:64px;font-size:16px;text-align:left;line-height:1.35}
.aj-mover{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 12px;background:rgba(36,23,102,.82);color:#fff;font-weight:800;font-size:12.5px;border-radius:999px;pointer-events:none;display:none;white-space:nowrap;transition:opacity .2s}
.aj-marco.tiene .aj-mover{display:block}.aj-marco.arrastra .aj-mover{opacity:0}
/* Ajustes en dos columnas para que todo quepa sin scroll en pantallas anchas */
.aj-cols{display:block}
@media (min-width:820px){body.kit .aj-caja{max-width:min(1020px,94vw);padding:26px 40px 22px}.aj-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 36px;align-items:start}body.kit .aj-caja h2{margin:0 0 4px}.aj-caja textarea.in{min-height:84px}body.kit .aj-caja .conf-bot{margin-top:2px}}

/* ===== Scroll vertical compartido: mismo aspecto en todas las listas y ventanas con scroll ===== */
/* Las esquinas recortadas se comen la punta de la barra; por eso el carril empieza y termina 12px adentro (botones vacios arriba y abajo). */
.dd-lista,body.kit #lob-der,body.kit .aj-caja,.jug-pop,.carp-lista,body.ed #lista,body.ed #editor,body.ed #props,body.kit .ajw #ajl{scrollbar-width:auto;scrollbar-color:auto}
.dd-lista::-webkit-scrollbar,body.kit #lob-der::-webkit-scrollbar,body.kit .aj-caja::-webkit-scrollbar,.jug-pop::-webkit-scrollbar,.carp-lista::-webkit-scrollbar,body.ed #lista::-webkit-scrollbar,body.ed #editor::-webkit-scrollbar,body.ed #props::-webkit-scrollbar,body.kit .ajw #ajl::-webkit-scrollbar{width:14px}
.dd-lista::-webkit-scrollbar-track,body.kit #lob-der::-webkit-scrollbar-track,body.kit .aj-caja::-webkit-scrollbar-track,.jug-pop::-webkit-scrollbar-track,.carp-lista::-webkit-scrollbar-track,body.ed #lista::-webkit-scrollbar-track,body.ed #editor::-webkit-scrollbar-track,body.ed #props::-webkit-scrollbar-track,body.kit .ajw #ajl::-webkit-scrollbar-track{background:transparent}
.dd-lista::-webkit-scrollbar-thumb,body.kit #lob-der::-webkit-scrollbar-thumb,body.kit .aj-caja::-webkit-scrollbar-thumb,.jug-pop::-webkit-scrollbar-thumb,.carp-lista::-webkit-scrollbar-thumb,body.ed #lista::-webkit-scrollbar-thumb,body.ed #editor::-webkit-scrollbar-thumb,body.ed #props::-webkit-scrollbar-thumb,body.kit .ajw #ajl::-webkit-scrollbar-thumb{background:#D6BE88;border:4px solid transparent;background-clip:padding-box;border-radius:0}
.dd-lista::-webkit-scrollbar-thumb:hover,body.kit .aj-caja::-webkit-scrollbar-thumb:hover,body.kit #lob-der::-webkit-scrollbar-thumb:hover{background:#C4A868;background-clip:padding-box}
.dd-lista::-webkit-scrollbar-button:single-button,body.kit #lob-der::-webkit-scrollbar-button:single-button,body.kit .aj-caja::-webkit-scrollbar-button:single-button,.jug-pop::-webkit-scrollbar-button:single-button,.carp-lista::-webkit-scrollbar-button:single-button,body.ed #lista::-webkit-scrollbar-button:single-button,body.ed #editor::-webkit-scrollbar-button:single-button,body.ed #props::-webkit-scrollbar-button:single-button,body.kit .ajw #ajl::-webkit-scrollbar-button:single-button{display:block;height:12px;width:14px;background:transparent}
@supports not selector(::-webkit-scrollbar){.dd-lista,body.kit #lob-der,body.kit .aj-caja,.jug-pop,.carp-lista,body.ed #lista,body.ed #editor,body.ed #props,body.kit .ajw #ajl{scrollbar-width:thin;scrollbar-color:#D6BE88 transparent}}
.aj-caja textarea.in{scrollbar-width:auto;scrollbar-color:auto}
.aj-caja textarea.in::-webkit-scrollbar{width:14px}
.aj-caja textarea.in::-webkit-scrollbar-track{background:transparent}
.aj-caja textarea.in::-webkit-scrollbar-thumb{background:#D6BE88;border:4px solid transparent;background-clip:padding-box;border-radius:0}
.aj-caja textarea.in::-webkit-scrollbar-button:single-button{display:block;height:4px;width:14px;background:transparent}

/* Encabezado del panel de pregunta = desplegable de tipo, con el icono del tipo encima a la izquierda */
body.ed .cabtipo{position:relative;display:block}
body.ed .cabtipo .tipo-gl{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;min-width:42px;height:30px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;background-image:var(--bandas);border-bottom:3px solid rgba(30,27,75,.22);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%,0 6px)}
body.ed .cabtipo .tipo-gl[style*="--r3"]{color:var(--d-navy)}
body.ed .cabtipo .dd-btn{padding-left:66px;min-height:48px;font-size:17px;font-weight:900;color:var(--d-navy)}

/* Lista de tipos con definicion: cada fila lleva el icono de color, el nombre y que hace */
.tp-pop .dd-lista{padding:6px}
.tp-pop .tp-op{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;border:0;background:none;text-align:left;font:inherit;white-space:normal;padding:9px 12px}
.tp-pop .tp-op.on{background-color:#FFD764}
.tp-pop .tp-op:hover,.tp-pop .tp-op:focus-visible{background-color:#F3EAD3;outline:none}.tp-pop .tp-op.on:hover,.tp-pop .tp-op.on:focus-visible{background-color:#FFD764}
.tp-gl{flex:none;min-width:42px;height:30px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;background-image:var(--bandas);border-bottom:3px solid rgba(30,27,75,.22);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%,0 6px)}
.tp-gl[style*="--r3"]{color:var(--d-navy)}
.tp-tx{display:flex;flex-direction:column;gap:2px;min-width:0}.tp-tx b{font-weight:900;color:var(--d-navy);font-size:15.5px}.tp-tx small{font-weight:800;font-size:12.5px;line-height:1.3;color:var(--d-suave)}

/* La imagen de la pregunta se ve sola: sin barras azules a los lados; el marco recortado y los botones van pegados a la propia imagen */
.media-caja .media-img{background:transparent;clip-path:none;border-bottom:0;aspect-ratio:auto;height:auto}
.media-caja.tiene .media-img{display:flex;justify-content:center;align-items:flex-start}
.media-fig{position:relative;display:flex;max-width:100%;min-height:0;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px);border-bottom:5px solid #D8C79E;background:#EBDBB0}
.media-caja .media-img img#prev{position:static;width:auto;height:auto;max-width:100%;max-height:380px;object-fit:contain}
body.ed .media-caja.tiene .media-img{flex:0 1 auto;min-height:0;align-items:center}
body.ed .media-caja .media-img img#prev{position:static;inset:auto;max-height:min(380px,42vh)}
/* La imagen toma el alto que sobra en el editor (nunca se sale de su caja) */
.media-caja .media-img,body.ed .media-caja.tiene .media-img{display:block;position:relative;flex:1 1 auto;min-height:150px;width:100%}
.media-fig{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);max-width:100%;background:transparent}
.media-caja .media-img img#prev,body.ed .media-caja .media-img img#prev{position:static;height:100%;width:auto;max-width:100%;max-height:none;object-fit:contain;display:block}
/* Version final: la imagen llena la caja con "contain" sobre fondo transparente; no hay barras ni marco recortado */
.media-fig{position:absolute;inset:0;left:0;transform:none;max-width:none;clip-path:none;border-bottom:0;background:transparent}
.media-caja .media-img img#prev,body.ed .media-caja .media-img img#prev{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center}
/* Sin imagen la caja de vista previa no se muestra (solo el aviso punteado) */
.media-caja:not(.tiene) .media-img{display:none}
.tp-gl{width:56px;min-width:56px;padding:0;box-sizing:border-box}

/* Vista "elige el tipo" en el centro del editor */
body.ed .vt-cab{display:flex;align-items:center;gap:14px;margin-bottom:14px}
body.ed .vt-cab h2{margin:0;font-size:22px}
body.ed .vt-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
body.ed .vt-grid .tp{min-height:84px}
/* Todas las tarjetas de tipo miden lo mismo */
body.ed .vt-grid{grid-auto-rows:142px}
body.ed .vt-grid .tp{min-height:0;height:100%;box-sizing:border-box;overflow:hidden;align-items:flex-start}