/* Piezas comunes en pantallas pequeñas: menú de hamburguesa y barra inferior. La cargan todas las páginas.
   El menú lo engancha js/view/site-shell.js (clases fu-head, fu-menu y fu-burger). La barra inferior
   (fu-dock) solo se ve en la vista compacta de cada página, que el <body> declara con una clase:
     fu-compact-1200  laboratorio del runner: por debajo de 1200 × 580 px
     fu-compact-960   doble rendija: por debajo de 960 px de ancho o 580 de alto
     fu-compact-850   resto de páginas con barra: por debajo de 850 px de ancho o 580 de alto
   --fu-dock-h es la altura de la barra cuando está a la vista (0 si no): la usa el tutor para flotar encima. */
.fu-burger{display:none;position:relative;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid rgba(244,239,230,.28);border-radius:12px;color:#f4efe6;background:rgba(17,18,22,.9);cursor:pointer;-webkit-tap-highlight-color:transparent}
.fu-burger span,.fu-burger span::before,.fu-burger span::after{position:absolute;left:12px;width:18px;height:2px;border-radius:2px;background:currentColor;content:'';transition:transform .2s ease,opacity .2s ease}
.fu-burger span{top:20px}
.fu-burger span::before{left:0;top:-6px}
.fu-burger span::after{left:0;top:6px}
.fu-head.is-open .fu-burger span{background:transparent}
.fu-head.is-open .fu-burger span::before{transform:translateY(6px) rotate(45deg)}
.fu-head.is-open .fu-burger span::after{transform:translateY(-6px) rotate(-45deg)}
.fu-burger:focus-visible,.fu-dock-b:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:850px){
.fu-head{position:relative!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:12px}
.fu-head .fu-burger{display:block;flex:0 0 auto;order:5}
/* Lo que no es marca ni menú (botones de entrada de la cabecera) se guarda: sus destinos están en el menú o en la barra. */
.fu-head>a:not(:first-child),.fu-head>.nav-actions,.fu-head>.preview-entry{display:none!important}
.fu-head .fu-menu{display:none!important}
.fu-head.is-open .fu-menu{display:flex!important;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;flex-direction:column;align-items:stretch;gap:2px;width:auto!important;margin:0!important;padding:8px!important;overflow:visible!important;border:1px solid rgba(232,181,109,.5)!important;border-radius:16px!important;background:#0d0e12!important;box-shadow:0 24px 60px rgba(0,0,0,.7)}
.fu-head.is-open .fu-menu a{display:block!important;padding:13px 14px!important;border-radius:10px!important;color:#f4efe6!important;background:transparent!important;font-size:.92rem!important;letter-spacing:0!important;text-align:left;text-decoration:none!important;text-transform:none!important}
.fu-head.is-open .fu-menu a:active,.fu-head.is-open .fu-menu a:hover{background:rgba(232,181,109,.14)!important}
}

/* ── Barra inferior ─────────────────────────────────────────────────────────────────────────────── */
.fu-dock{display:none}
.fu-dock-b{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:6px 2px 4px;border:0;border-radius:12px;color:#9a948b;background:none;font:600 .66rem/1.1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fu-dock-b::before{content:'';flex:0 0 auto;width:23px;height:23px;background:currentColor;-webkit-mask:var(--fu-icon) center/contain no-repeat;mask:var(--fu-icon) center/contain no-repeat}
.fu-dock-b span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fu-dock-b[aria-pressed=true],.fu-dock-b[aria-current]{color:#f4efe6}
.fu-dock-b[aria-pressed=true]::before,.fu-dock-b[aria-current]::before{background:#e8b56d}
.fu-dock-b[aria-pressed=true]::after,.fu-dock-b[aria-current]::after{content:'';position:absolute;top:0;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px;background:#e8b56d}
.fu-dock-b:active{background:rgba(232,181,109,.14)}
/* Iconos: trazos de 24 × 24 usados como máscara, para que tomen el color del botón. */
.fu-dock-b[data-icon=tiempo]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5v7l6-3.5z'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=parametros]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 12h3M11 12h9M4 17h11M19 17h1'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=aula]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5 12 5l9.5 4.5L12 14z'/%3E%3Cpath d='M6.5 11.8V16c1.6 1.5 3.4 2.2 5.5 2.2s3.900-.7 5.500-2.200v-4.200M21.500 9.500v5'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=graficas]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='M7.5 15.500 11 11l3 2.500 5-7'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=escenarios]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=laboratorio]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.500 3.500h5M10.500 3.500v5.500L5 18.500a1.500 1.500 0 0 0 1.300 2.200h11.400a1.500 1.500 0 0 0 1.300-2.200L13.500 9V3.500'/%3E%3Cpath d='M7.800 15h8.400'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=teoria]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.500C10 5 7.500 4.500 4 4.500v13c3.500 0 6 .5 8 2 2-1.500 4.500-2 8-2v-13c-3.500 0-6 .5-8 2zM12 6.500v13'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=inicio]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.500 12 4.500l8 7M6.500 10v9.500h11V10'/%3E%3C/svg%3E")}
.fu-dock-b[data-icon=glosario]{--fu-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.500h11.500a2.500 2.500 0 0 1 2.500 2.500v12.500H7.500A2.500 2.500 0 0 1 5 17z'/%3E%3Cpath d='M9 9h6M9 12.500h4'/%3E%3C/svg%3E")}

@media (max-width:1199px),(max-height:579px){
body.fu-compact-1200{--fu-dock-h:58px;padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
body.fu-compact-1200 .fu-dock{display:flex}
}
@media (max-width:960px),(max-height:579px){
body.fu-compact-960{--fu-dock-h:58px;padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
body.fu-compact-960 .fu-dock{display:flex}
}
@media (max-width:850px),(max-height:579px){
body.fu-compact-850{--fu-dock-h:58px;padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
body.fu-compact-850 .fu-dock{display:flex}
}
.fu-dock{position:fixed;left:0;right:0;bottom:0;z-index:50;box-sizing:border-box;height:calc(58px + env(safe-area-inset-bottom,0px));padding:0 4px env(safe-area-inset-bottom,0px);border-top:1px solid rgba(244,239,230,.18);background:rgba(8,9,13,.96);box-shadow:0 -8px 28px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* Teléfono tumbado: barra más baja, con el icono y el rótulo en la misma línea. */
@media (max-height:579px) and (min-width:600px){
body.fu-compact-1200,body.fu-compact-960,body.fu-compact-850{--fu-dock-h:46px;padding-bottom:calc(46px + env(safe-area-inset-bottom,0px))}
.fu-dock{height:calc(46px + env(safe-area-inset-bottom,0px))}
.fu-dock-b{flex-direction:row;gap:7px;font-size:.72rem}
.fu-dock-b::before{width:20px;height:20px}
}