/* ============================================================================ LA PIEL DE OLIBOTS SOBRE LOS LABORATORIOS Marvin, mirando el laboratorio de pistas dentro de Olibots: «no estás respetando la paleta de colores, te trajiste a Campvs y esto es Olibots». Tenía razón: los laboratorios vienen con la marca del Campus puesta —el navy, el fucsia, el degradado, «Campvs AI · Robótica II»—. ⭐ ESTA HOJA NO TOCA NI UNA LÍNEA DEL LABORATORIO. Se inyecta la ÚLTIMA en el y lo único que hace es redefinir las variables de color y unos pocos remates. Así: · el laboratorio se sigue trayendo del Campus tal cual, sin parchear cada archivo; · si mañana el Campus cambia sus estilos, esto sigue mandando encima; · y el Campus conserva SU marca, que es lo correcto: son dos productos. Y de paso resuelve lo segundo que pidió Marvin: MÓVIL PRIMERO. Un portal abierto al mundo se abre desde el teléfono, y ahí los controles tienen que caber y poder tocarse con el pulgar. ============================================================================ */ /* ---------- 1. La paleta ---------- Se reescriben las variables que el laboratorio ya usa en todas partes. Con esto solo, la barra, los acentos y los botones cambian de marca de golpe. */ :root, html body { --navy: #12151C; /* el grafito de Olibots ocupa el sitio del navy de Campvs */ --celeste: #3DD6F5; /* cian */ --fucsia: #FFB020; /* ⭐ el fucsia pasa a ÁMBAR: es el color de acción de Olibots, y el laboratorio lo usa para el botón grande y para los realces */ --amarillo: #FFB020; --accent: #3DD6F5; --ink: #E4E8F0; --line: #2A3140; --muted: #8794AB; /* Sin degradado: la marca de Olibots no los usa, y en la barra se veía el de Campvs. */ --grad: linear-gradient(90deg, #FFB020, #3DD6F5); } /* ---------- 2. La barra de arriba ---------- */ .aps-top { background: #12151C !important; background-image: none !important; border-bottom: 2px solid #2A3140 !important; box-shadow: none !important; padding: 5px 10px !important; } .aps-name .app, .aps-name .app .doticon { color: #E4E8F0 !important; } .aps-name .app { font-family: 'Chakra Petch', system-ui, sans-serif !important; letter-spacing: .02em; } /* «Campvs AI · Robótica II» no pinta nada aquí. El nombre de la disciplina ya está al lado. */ .aps-name .by { display: none !important; } .aps-wm { background: none !important; -webkit-text-fill-color: #8794AB; color: #8794AB !important; } .aps-right .lab { color: #8794AB !important; } /* Los botones de la barra: oscuros, no blancos. */ .iconbtn { background: #1F2430 !important; color: #E4E8F0 !important; border: 1px solid #2A3140 !important; } .iconbtn:hover { border-color: #3DD6F5 !important; } /* ---------- 3. Los controles del juego ---------- */ #act { background: #FFB020 !important; color: #12151C !important; box-shadow: 0 6px 18px rgba(255, 176, 32, .40) !important; font-family: 'Chakra Petch', system-ui, sans-serif !important; letter-spacing: .04em; } #joy { background: rgba(18, 21, 28, .55) !important; border-color: #39435A !important; } .chip { background: rgba(18, 21, 28, .86) !important; border-color: #2A3140 !important; color: #E4E8F0 !important; } /* ---------- 4. MÓVIL PRIMERO ---------- 🚨 Medido en el teléfono de Marvin: la barra se llevaba 90 px de alto en apaisado, que es un cuarto de la pantalla, y los botones quedaban a 28 px cuando el mínimo para tocar con el pulgar son 44. Aquí la barra se encoge, los botones crecen y lo que no cabe se va. */ @media (max-width: 900px) { .aps-top { padding: 4px 8px !important; gap: 7px !important; } .aps-logo { height: 20px !important; } .aps-wm { display: none !important; } .aps-name .app { font-size: 12.5px !important; } .aps-right { gap: 5px !important; } .aps-right .lab { display: none !important; } .iconbtn { padding: 7px 9px !important; font-size: 12px !important; min-height: 34px; } /* Los controles, más grandes y más al alcance del pulgar. */ #joy { width: 108px !important; height: 108px !important; left: 14px !important; bottom: 16px !important; } #act { width: 86px !important; height: 86px !important; right: 16px !important; bottom: 24px !important; } .chip { padding: 5px 10px !important; font-size: 12px !important; } } /* Teléfono APAISADO: es donde de verdad se juega, y donde menos alto hay. */ @media (max-height: 560px) and (min-aspect-ratio: 1/1) { .aps-top { padding: 3px 8px !important; } .aps-logo { height: 17px !important; } .aps-name .app { font-size: 11.5px !important; } .iconbtn { padding: 5px 8px !important; font-size: 11.5px !important; min-height: 30px; } #joy { width: 92px !important; height: 92px !important; bottom: 10px !important; } #act { width: 74px !important; height: 74px !important; bottom: 14px !important; } } /* Teléfono DE PIE: el mando ocupa la mitad inferior, que es donde llega la mano. */ @media (max-width: 620px) and (max-aspect-ratio: 1/1) { #joy { bottom: 22px !important; } #act { bottom: 30px !important; } } /* ============================================================================ 5. MÓVIL PRIMERO · SEGUNDA PASADA Medido en un teléfono de 390 px: la barra del laboratorio de pistas pedía 512 px de ancho —se salía 122 px— y TODOS los controles estaban entre 27 y 36 px de alto, cuando el mínimo para acertar con el pulgar son 44. Un portal abierto al mundo se abre desde el teléfono: si ahí no se puede tocar un botón, da igual lo bien que se vea. ============================================================================ */ /* ⭐ La consulta `pointer: coarse` = se toca con el DEDO, no con un ratón. Es el criterio correcto para los tamaños mínimos: un teléfono GIRADO mide 844 px de ancho y con una regla de ancho se quedaba fuera —justo el caso en el que más se juega—. Lo que manda no es el tamaño de la pantalla, es con qué se toca. */ @media (pointer: coarse) { /* ---- La barra de pistas: fuera los saltos a otros laboratorios ---- En Olibots se cambia de disciplina desde la portada, no desde dentro de una. Esos cinco botones son los que desbordaban, y aquí no llevan a ninguna parte que haga falta. */ #robotsBtn, #miRobotBtn, #alRobotBtn, .aps-right a[href*="sumo"], .aps-right a[href*="futbol"] { display: none !important; } /* Lo que queda, al tamaño del pulgar. */ .aps-right .iconbtn, #menuBtn, #modeManual, #modeProg, #restartBtn, #helpBtn, #recenterBtn { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 16px !important; padding: 0 10px !important; } .aps-top { padding: 6px 8px !important; } /* ---- Sumo y fútbol: el panel de programación ---- Sus desplegables y pestañas venían de escritorio, con 29 a 35 px de alto. */ #selTema, #miRobot3d, #selRival, #miNombre, #selHueco1, #selHueco2, #selHueco3, #btnAyuda, #tabBloques, #tabPython { min-height: 44px !important; font-size: 15px !important; } #pbtns .btn { min-height: 48px !important; font-size: 15px !important; } /* El tirador del panel: 16 px de alto no se agarra con el dedo. */ #progToggle { min-height: 30px !important; min-width: 76px !important; } } /* Y en apaisado el tirador es vertical: crece a lo ancho, no a lo alto. */ @media (max-height: 560px) and (min-aspect-ratio: 1/1) { #progToggle { min-width: 26px !important; min-height: 76px !important; } } /* Teléfono girado: hay ancho de sobra pero el alto escasea. 40 px sigue siendo tocable y deja sitio al editor, que es a lo que se ha venido. */ @media (pointer: coarse) and (max-height: 560px) { #selTema, #miRobot3d, #selRival, #miNombre, #selHueco1, #selHueco2, #selHueco3, #btnAyuda, #tabBloques, #tabPython { min-height: 40px !important; font-size: 14px !important; } #pbtns .btn { min-height: 42px !important; } }