@font-face{font-family:Poppins;src:url('./fuentes/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('./fuentes/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('./fuentes/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('./fuentes/Poppins-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{--papel:#ecebe5;--panel:#f7f6f1;--tinta:#27372f;--tenue:#637169;--linea:#d8dcd3;--acento:#315e48;--carton:#b68b57;--servo:#315a94}*{box-sizing:border-box}body{margin:0;background:var(--papel);color:var(--tinta);font:14px/1.5 Poppins,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;border:1px solid var(--linea);background:transparent;color:var(--tinta);border-radius:5px;transition:background .15s}button:hover:not(:disabled){background:#e3e8df}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,#lienzo:focus-visible{outline:3px solid var(--servo);outline-offset:4px}a{color:inherit}header{height:92px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linea);gap:20px}.marca{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:700;letter-spacing:2px}.marca small{display:block;font-size:9px;font-weight:500;letter-spacing:1.8px;margin-top:2px}.logo-colegio{width:72px;height:72px;object-fit:contain;flex-shrink:0;border-radius:4px}.estado{color:var(--tenue);font-size:12px;display:flex;gap:9px;align-items:center}.estado i{width:7px;height:7px;background:var(--acento);border-radius:50%}.descarga{font-size:12px;text-decoration:none;border-bottom:1px solid var(--tinta);padding:6px 0}main{display:grid;grid-template-columns:minmax(0,1fr) 365px;min-height:780px}.visor{min-height:780px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#f8f6ee 0%,var(--papel) 65%)}.titulo{position:absolute;top:33px;left:40px;pointer-events:none;z-index:1}.etiqueta{font:10px/1.5 Poppins,sans-serif;letter-spacing:1.6px;color:var(--tenue)}h1{font:600 38px/1.18 Poppins,sans-serif;letter-spacing:-1.3px;margin:13px 0 14px}p{margin:0;color:var(--tenue)}.titulo p{font-size:12px}#lienzo{position:absolute;inset:110px 0 68px}canvas{display:block;width:100%;height:100%;touch-action:none}#carga{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--linea);padding:14px 22px;border-radius:6px;max-width:80%;z-index:2}#carga[hidden]{display:none}.vistas{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);display:flex;border:1px solid var(--linea);border-radius:6px;padding:4px;background:var(--panel)}.vistas button{border:0;padding:8px 16px;font-size:11px}.vistas .activo{background:var(--tinta);color:var(--panel)}.pie-visor{position:absolute;bottom:0;width:100%;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--linea);font-size:10px;color:var(--tenue)}.pie-visor b{font:9px Poppins,sans-serif;letter-spacing:1px;margin-left:12px}aside{padding:32px 28px 25px;background:var(--panel);border-left:1px solid var(--linea)}h2{font:600 24px/1.3 Poppins,sans-serif;letter-spacing:-.5px;margin:8px 0}.cabecera-panel p{font-size:12px}.articulacion{padding:25px 0 22px;border-bottom:1px solid var(--linea)}.fila{display:flex;align-items:center;justify-content:space-between}h3{margin:0;font-size:14px;font-weight:600}h3 span{font:10px Poppins,sans-serif;color:var(--tenue);margin-right:10px}output{font:20px/1 Poppins,sans-serif;letter-spacing:-1px}.articulacion p{font-size:11px;margin:8px 0 16px}input[type=range]{width:100%;margin:0;height:18px;accent-color:var(--acento);cursor:pointer}.limites{display:flex;justify-content:space-between;font:9px Poppins,sans-serif;color:var(--tenue);margin:3px 0 14px}.botonera{display:flex;gap:8px}.botonera button{flex:1;padding:9px 3px;font-size:11px}.acciones{margin-top:23px;display:grid;gap:9px}.acciones button{padding:12px;font-size:12px}.acciones .primario{background:var(--tinta);color:var(--panel);border-color:var(--tinta)}.acciones .primario:hover{background:var(--acento)}#demostracion span{float:right;margin-right:5px}.nota{font-size:10px;margin-top:18px;line-height:1.6}footer{border-top:1px solid var(--linea);padding:19px 40px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--tenue)}footer>span:first-child{font-family:Poppins,sans-serif;letter-spacing:1px}.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1450px){main{min-height:calc(100vh - 150px)}.visor{min-height:850px}}@media(max-width:850px){header{height:76px;padding:0 20px}.estado{display:none}main{grid-template-columns:1fr}.visor{min-height:620px}.titulo{left:24px;top:24px}h1{font-size:36px}aside{border-left:0;border-top:1px solid var(--linea);padding:28px 24px}.articulacion{padding:22px 0}.botonera button{padding:13px}footer{padding:20px 24px;flex-direction:column;gap:7px}.pie-visor{padding:17px 20px}.pie-visor b{display:none}#lienzo{inset:130px 0 68px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Identidad escolar y controles cómodos para pantallas táctiles. */
header{height:auto;min-height:108px;padding-top:12px;padding-bottom:12px}.marca{min-width:0}.marca>span{min-width:0}.marca small{line-height:1.7}.descarga{white-space:nowrap}h1{letter-spacing:-1px}output{font-variant-numeric:tabular-nums;letter-spacing:0;font-size:19px}.vistas button,.botonera button,.acciones button{min-height:44px}input[type=range]{height:32px;touch-action:pan-y}.pie-visor{flex-wrap:wrap}footer{align-items:flex-start;padding-top:28px;padding-bottom:28px}.credito,.fuente-tarea{display:flex;flex-direction:column;gap:7px}.credito p{font-size:13px;color:var(--tinta)}.credito strong{font-weight:600}.fuente-tarea a{font-size:12px;color:var(--acento);text-underline-offset:4px}.fuente-tarea>span:last-child{max-width:400px}.etiqueta{letter-spacing:1px}.fuente-tarea a{min-height:36px;display:flex;align-items:center}
@media(min-width:851px) and (max-width:1100px){header{padding-left:24px;padding-right:24px}.estado{display:none}main{grid-template-columns:minmax(0,1fr) 320px}.titulo{left:24px}h1{font-size:32px}aside{padding-left:22px;padding-right:22px}.pie-visor{padding:18px 22px;gap:5px}.pie-visor b{display:none}footer{padding-left:24px;padding-right:24px}}
@media(max-width:850px){header{min-height:94px;padding:12px 20px;gap:12px}.logo-colegio{width:64px;height:64px}.marca{letter-spacing:1px}.marca small{font-size:8px;letter-spacing:1px}main{min-height:0}.visor{min-height:640px}h1{font-size:34px}.titulo{right:20px}#lienzo{inset:178px 0 78px}.vistas{bottom:78px}.vistas button{padding:8px 14px}.pie-visor{min-height:65px}.botonera{gap:12px}.botonera button{font-size:13px;min-height:48px}.acciones button{min-height:48px}.articulacion p,.cabecera-panel p{font-size:12px}.limites{font-size:10px}.nota{font-size:11px}footer{gap:24px}.fuente-tarea>span:last-child{max-width:none}}
@media(max-width:420px){header{padding:10px 16px;gap:8px}.logo-colegio{width:52px;height:52px}.marca{gap:9px;font-size:12px}.marca small{font-size:7px;letter-spacing:.5px}.descarga{font-size:10px}.visor{min-height:580px}.titulo{left:20px;top:24px}h1{font-size:30px}#lienzo{inset:170px 0 88px}.vistas{bottom:86px}.vistas button{padding:8px 12px}.pie-visor{padding:14px 20px;gap:4px;font-size:9px;min-height:76px}aside{padding:26px 20px}h2{font-size:23px}.credito p{line-height:1.8}}
/* Azules del emblema del Gimnasio Montreal. */
:root{--tinta:#183358;--tenue:#5b6b80;--acento:#0756a5;--servo:#0756a5}
button{background:#eaf2fc;border-color:#bfd2ec;color:#0756a5}
button:hover:not(:disabled){background:#d7e7fb}
button:active:not(:disabled){background:#bfd8f7}
.vistas .activo,.acciones .primario{background:#0756a5;border-color:#0756a5;color:#fff}
.vistas .activo:hover:not(:disabled),.acciones .primario:hover:not(:disabled){background:#063d7c}
/* Pantalla táctil: 70 % para la figura y 30 % para sus controles. */
@media(max-width:850px){
 header{height:68px;min-height:68px;padding:6px 14px;gap:10px}
 .logo-colegio{width:50px;height:50px}.marca{gap:9px;font-size:12px}.marca small{font-size:7px;letter-spacing:.5px}.descarga{font-size:10px}
 main{height:calc(100vh - 68px);height:calc(100svh - 68px);min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,7fr) minmax(0,3fr)}
 .visor{position:relative;top:auto;height:auto;min-height:0;display:grid;grid-template-rows:48px minmax(0,1fr);overflow:hidden;border-bottom:1px solid var(--linea)}
 .titulo,.pie-visor{display:none}
 .vistas{position:static;left:auto;bottom:auto;transform:none;grid-row:1;justify-self:center;align-self:center;margin:0;padding:2px;z-index:1}
 .vistas button{min-height:40px;padding:6px 15px;font-size:11px}
 #lienzo{position:relative;inset:auto;grid-row:2;min-height:0;width:100%;height:100%}
 #carga{top:50%;font-size:12px}
 aside{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:6px 12px;display:grid;grid-template-rows:repeat(3,minmax(44px,1fr)) auto;gap:3px;border-top:0}
 .cabecera-panel,.articulacion>p,.articulacion>input,.articulacion>.limites,.nota{display:none}
 .articulacion{padding:3px 0;display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;align-items:center;min-height:44px}
 .fila{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
 .fila h3{font-size:11px;line-height:1.25}.fila h3 span{display:none}.fila output{font-size:11px;line-height:1.25;color:var(--tenue)}
 .botonera{gap:6px}.botonera button{min-width:0;min-height:40px;padding:5px 3px;font-size:11px}
 .acciones{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.acciones button{min-height:40px;padding:5px 4px;font-size:10px}#demostracion span{margin:0 3px}
 footer{padding:24px 20px;gap:20px}.credito p{font-size:12px}
}
@media(max-width:360px){.articulacion{grid-template-columns:86px minmax(0,1fr);gap:5px}.botonera button{font-size:10px}.vistas button{padding-left:12px;padding-right:12px}.marca small{font-size:6px}.descarga{font-size:9px}}

/* Instrucción de agarre en la barra de cámara, fuera del lienzo móvil. */
.vistas{display:grid;grid-template-columns:repeat(3,auto)}
.estado-agarre{grid-column:1/-1;max-width:100%;text-align:center;padding:5px 7px 2px;font-size:10px;line-height:1.4;color:var(--tinta)}
@media(max-width:850px){.visor{grid-template-rows:72px minmax(0,1fr)}.vistas{max-width:calc(100% - 20px)}.estado-agarre{font-size:9px;padding-top:3px}}

/* Acciones de recuperación siempre accesibles en el panel compacto. */
#levantar-objeto{font-weight:600}
@media(max-width:850px){
 aside{grid-template-rows:repeat(3,minmax(44px,1fr)) auto}
 .acciones{grid-template-columns:1fr 1fr;gap:4px}
 .acciones button{min-height:36px;font-size:10px}
}