/* ============================================================================ 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; } } /* ============================================================================ 6. SUMO Y FÚTBOL · el tema oscuro de Olibots 🚨 Marvin, mirando su teléfono: «la única que está con branding es la WRO, sumo y fútbol todavía tienen Campvs». Y tenía razón. Todo lo de arriba está escrito contra las clases del laboratorio de PISTAS (`.aps-top`, `.iconbtn`, `#act`), que es el que miré cuando lo hice. El sumo y el fútbol son archivos distintos, con su propia estructura y —esto es lo que se me escapó— con un tema CLARO de colores fijos: `header{background:#fff}`, `body{background:#eef2f8}`. Redefinir variables no los tocaba, porque esos colores no son variables. Aquí va el tema oscuro completo para los dos. Sigue sin tocarse ni una línea de sus archivos. ⚠️ Se engancha con la clase `ob-deporte`, que pone traer-labs en el de estos dos, y NO con `:has()`: esa consulta no existe en los Android viejos que hay en un salón, y ahí el laboratorio se habría quedado con el tema claro sin que nadie se enterara. ============================================================================ */ /* El lienzo */ body.ob-deporte { background: #12151C !important; color: #E4E8F0 !important; } #arena { background: #12151C !important; } /* La cabecera */ body.ob-deporte header { background: #181C25 !important; border-bottom: 1px solid #2A3140 !important; } body.ob-deporte header .marca { color: #E4E8F0 !important; font-family: 'Chakra Petch', system-ui, sans-serif !important; } body.ob-deporte header .sub { color: #8794AB !important; } /* Botones y desplegables */ body.ob-deporte .btn { background: #FFB020 !important; color: #12151C !important; font-weight: 700; } body.ob-deporte .btn.alt { background: #1F2430 !important; color: #E4E8F0 !important; border: 1px solid #2A3140 !important; } body.ob-deporte .btn.alt:hover { border-color: #3DD6F5 !important; } body.ob-deporte .campo, body.ob-deporte select.campo, body.ob-deporte input.campo { background: #12151C !important; color: #E4E8F0 !important; border: 1px solid #2A3140 !important; } /* El panel de programación */ body.ob-deporte #prog { background: #181C25 !important; border-left-color: #2A3140 !important; border-top-color: #2A3140 !important; } body.ob-deporte .pgHead { border-bottom-color: #2A3140 !important; } body.ob-deporte .pgHead .tit { color: #E4E8F0 !important; } body.ob-deporte #progToggle { background: #1F2430 !important; color: #8794AB !important; border-color: #2A3140 !important; } body.ob-deporte #modeBar button { background: #12151C !important; color: #8794AB !important; border-color: #2A3140 !important; } body.ob-deporte #modeBar button.on { background: #181C25 !important; color: #E4E8F0 !important; box-shadow: inset 0 -3px 0 #FFB020 !important; } body.ob-deporte #editorArea { border-top-color: #2A3140 !important; } body.ob-deporte textarea#pyCode, body.ob-deporte textarea#codRival { background: #12151C !important; color: #E4E8F0 !important; border-color: #2A3140 !important; } body.ob-deporte #xlate { background: #12151C !important; border-top-color: #2A3140 !important; } body.ob-deporte #xlateHead { color: #8794AB !important; } body.ob-deporte #xlateBody { color: #A9B4C8 !important; } body.ob-deporte #rivalBar, body.ob-deporte .huecoBar { border-top-color: #2A3140 !important; } body.ob-deporte .et, body.ob-deporte .etSalon, body.ob-deporte #guardado { color: #8794AB !important; } body.ob-deporte #pbtns { border-top-color: #2A3140 !important; } /* El marcador sobre la escena */ body.ob-deporte .placa { background: rgba(18,21,28,.90) !important; border: 1px solid #2A3140 !important; } body.ob-deporte #reloj { background: #FFB020 !important; color: #12151C !important; font-family: 'Chakra Petch', system-ui, sans-serif !important; } body.ob-deporte #anuncio { background: rgba(18,21,28,.96) !important; border: 1px solid #39435A !important; } /* Blockly: su lienzo también venía claro */ body.ob-deporte .blocklyMainBackground { fill: #12151C !important; stroke: none !important; } body.ob-deporte .blocklyToolboxDiv { background: #181C25 !important; } /* ⚠️ Aquí decía `.blocklyTreeLabel`, que es de Blockly 10 y ANTERIORES: contra Blockly 13 esa regla no hacía nada y las categorías se quedaban en el blanco por defecto de Blockly. En sumo y fútbol el toolbox va oscuro, así que la etiqueta clara SÍ se lee; la seleccionada se pinta con el color vivo de su categoría y va en blanco puro. */ body.ob-deporte .blocklyToolbox { background-color: #181C25 !important; } body.ob-deporte .blocklyToolboxCategoryLabel { color: #E4E8F0 !important; font-weight: 600; } body.ob-deporte .blocklyToolboxSelected .blocklyToolboxCategoryLabel { color: #fff !important; font-weight: 800; } body.ob-deporte .blocklyFlyoutBackground { fill: #1F2430 !important; } /* ---- Y el fallo de la barra de PISTAS en teléfono: los botones se montaban encima del nombre. El nombre encoge y, si no cabe, desaparece: el título de la pestaña ya lo dice. ---- */ @media (pointer: coarse) { .aps-brand, .aps-name { min-width: 0 !important; overflow: hidden !important; } .aps-name .app { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .aps-right { flex: none !important; } } @media (max-width: 560px) { .aps-name { display: none !important; } } /* ============================================================================ 7. EN EL TELÉFONO NO SE REPARTE: SE ALTERNA 🚨 Marvin: «no puedo ver en el celular la consola de coding». Medido: el editor de bloques tenía 136 px en vertical y 85 en apaisado. No es que se viera mal — es que no se puede programar ahí. La cuenta: el panel medía 441 px y su cabecera, sus pestañas, la tira de Python, el rival y los botones se llevaban 268. Quedaban 136 para lo único a lo que se ha venido. ⭐ Repartir la pantalla entre el simulador y el editor le da un trozo inservible a cada uno. Así que en el teléfono manda uno de los dos, a pantalla completa, y el tirador cambia entre ellos. Y el ciclo sale solo: entras y programas con toda la pantalla, pulsas Combatir —que ya pliega el panel— y ves el combate con toda la pantalla. Es como funciona cualquier aplicación de móvil. ============================================================================ */ /* ⭐ El criterio es la ALTURA, no la anchura: un teléfono GIRADO mide 915 px de ancho y una regla de `max-width:900px` lo dejaba fuera justo cuando más falta hacía (el editor se quedaba en 106 px). Una tablet apaisada de 1024×768 sí tiene sitio para repartir, y por eso queda fuera de las dos. */ @media (pointer: coarse) and (max-width: 900px), (pointer: coarse) and (max-height: 600px) { /* El panel toma la caja entera; la arena cede su sitio y lo recupera al plegarlo. Un hermano no se puede seleccionar hacia atrás en CSS: por eso el plegado marca una clase en el contenedor. */ body.ob-deporte #arena { flex: 0 0 0 !important; min-height: 0 !important; } body.ob-deporte #prog { height: auto !important; flex: 1 1 auto !important; max-width: none !important; width: auto !important; } body.ob-deporte #app.panel-plegado #arena { flex: 1 1 auto !important; } body.ob-deporte #app.panel-plegado #prog { flex: none !important; } /* Lo que no es el editor, al mínimo: cada píxel de aquí es un píxel de programación. */ body.ob-deporte #xlate, body.ob-deporte #guardado { display: none !important; } body.ob-deporte .pgHead { padding: 7px 10px 6px !important; } body.ob-deporte .err { padding: 0 10px !important; } /* ---- El tirador deja de ser un asa y pasa a ser un botón que dice qué hace ---- Un asa de 30 px con una flecha no la encuentra nadie en un teléfono. */ body.ob-deporte #progToggle { position: static !important; transform: none !important; width: 100% !important; max-width: none !important; height: 44px !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid #2A3140 !important; background: #1F2430 !important; color: #E4E8F0 !important; font-family: 'Chakra Petch', system-ui, sans-serif !important; font-size: 13.5px !important; letter-spacing: .04em; font-size: 0 !important; } body.ob-deporte #progToggle::after { content: "▾ VER EL COMBATE"; font-size: 13.5px; font-weight: 700; } body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ PROGRAMAR"; } body.ob-deporte #app.panel-plegado #progToggle { border-bottom: 0 !important; border-top: 1px solid #2A3140 !important; background: #FFB020 !important; color: #12151C !important; } } /* ---- Teléfono GIRADO: 412 px de alto no dan para todo. Se va lo que se puede consultar al volver al combate; queda lo que hace falta para programar. ---- */ @media (pointer: coarse) and (max-height: 600px) { /* ⭐ En apaisado el laboratorio pone simulador y panel LADO A LADO, así que el panel ya tiene todo el alto que hay —363 px en un teléfono girado— y ensancharlo no da ni un píxel más de editor. Lo que sirve es volver a la columna y quedarse con la caja entera. Aun así el techo es duro: 412 px de alto dan ~200 de editor, contra los 556 que hay en vertical. Programar con bloques se hace con el teléfono DE PIE; esto es el mínimo digno. */ body.ob-deporte #cuerpo { flex-direction: column !important; } body.ob-deporte #prog { width: auto !important; max-width: none !important; } body.ob-deporte #app.panel-plegado #prog { width: auto !important; } /* ⚠️ Aquí el tirador NO puede ir en el flujo: en vertical sobra sitio y una barra ancha se agradece, pero con 363 px de alto esos 76 px son el 21% de todo lo que hay. Vuelve a flotar sobre el borde, como pestaña, y no le quita ni un píxel al editor. */ body.ob-deporte #progToggle { position: absolute !important; left: auto !important; right: 8px !important; top: 2px !important; bottom: auto !important; transform: none !important; width: auto !important; height: 26px !important; padding: 0 10px !important; border-radius: 13px !important; border: 0 !important; z-index: 9 !important; } body.ob-deporte #progToggle::after { font-size: 11px; } /* Y el resto del cromo, al hueso. */ body.ob-deporte .pgHead { padding: 4px 8px !important; font-size: 12px !important; } body.ob-deporte #modeBar { padding: 2px 6px !important; } body.ob-deporte .err:empty, body.ob-deporte #err0:empty { display: none !important; } /* Los selectores de equipo se arman antes de programar y en vertical están todos. En el fútbol son TRES barras de 59 px: 177 px de los 363 que hay, casi la mitad del panel. */ body.ob-deporte #rivalBar, body.ob-deporte .huecoBar, body.ob-deporte #huecoBar, body.ob-deporte [id^="salonHueco"], body.ob-deporte [class*="salonHueco"] { display: none !important; } body.ob-deporte .pgHead .tit, body.ob-deporte .pgHead .punto { display: none !important; } body.ob-deporte .pgHead { padding: 5px 8px !important; } body.ob-deporte #progToggle { height: 34px !important; } body.ob-deporte #progToggle::after { font-size: 12px; } body.ob-deporte #pbtns button, body.ob-deporte .pgBtns button { padding: 7px 4px !important; font-size: 12px !important; } } /* ============================================================================ 8. EL TELÉFONO GIRADO NO ES PARA PROGRAMAR, Y SE DICE Medido: con el teléfono de pie el editor tiene 556 px; girado, 208. No es un fallo que se pueda arreglar con CSS — es que 412 px de alto menos la cabecera, las pestañas y los botones no dejan sitio para bloques. Recortar más sería mutilar el laboratorio para fingir que cabe. Así que cada postura hace lo que sabe hacer: girado se ve el combate a lo ancho, de pie se programa. Y en vez de dejar al estudiante peleando con una franja de 200 px, se le dice en una banda de 24 px que no estorba y no bloquea: quien quiera seguir ahí, sigue. ============================================================================ */ @media (pointer: coarse) and (max-height: 600px) and (min-aspect-ratio: 1/1) { body.ob-deporte #editorArea, body.ob-pista #editorArea { position: relative; } body.ob-deporte #editorArea::before, body.ob-pista #editorArea::before { content: "↻ Gira el teléfono: el editor se hace 3 veces más grande"; position: absolute; left: 0; right: 0; top: 0; z-index: 8; background: #FFB020; color: #12151C; font: 700 11px/24px 'Chakra Petch', system-ui, sans-serif; text-align: center; letter-spacing: .02em; pointer-events: none; } html[lang="en"] body.ob-deporte #editorArea::before, html[lang="en"] body.ob-pista #editorArea::before { content: "↻ Turn your phone: the editor gets 3× bigger"; } } /* ============================================================================ 9. EL MISMO SISTEMA EN LAS PISTAS (RoboMission y Campvs Robot League) Marvin, 5-sep-2026: «el sistema de programar que hiciste para sumo y futbol con el boton de programar que te saca la consola de codigo y luego cuando haces play la de los robots, está muy buena, la quiero también para Robo missions». Aquí el panel ya se abre a casi toda la pantalla (686 px de editor en vertical, medido) y ya se pliega solo al pulsar Ejecutar. Lo que faltaba era lo que hace que se ENTIENDA: un tirador que diga qué va a pasar. Decía «⇤», que no significa nada para nadie. ⚠️ El texto lo pone el laboratorio con JS (`textContent='⇥'/'⇤'`), así que no se puede cambiar desde CSS: se apaga con `font-size:0` y se escribe en `::after`. En pistas la clase de plegado vive en `#prog` —no en un ancestro como en el sumo—, y el tirador es hijo suyo, así que el selector sale directo. ============================================================================ */ body.ob-pista #progToggle { font-size: 0 !important; } body.ob-pista #progToggle::after { content: "◂ VER LA PISTA"; font-size: 11px; font-weight: 700; font-family: 'Chakra Petch', system-ui, sans-serif; letter-spacing: .03em; white-space: nowrap; } body.ob-pista #prog.collapsed #progToggle::after { content: "PROGRAMAR ▸"; } @media (pointer: coarse) and (max-width: 900px) { /* En el teléfono el tirador deja de ser un asa de 30 px en el borde y pasa a ser barra: es el mando con el que se va y se vuelve, y tiene que verse sin buscarlo. */ body.ob-pista #progToggle { position: static !important; transform: none !important; width: 100% !important; height: 40px !important; max-width: none !important; border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(0,0,0,.12) !important; } body.ob-pista #progToggle::after { content: "▾ VER LA PISTA"; font-size: 13px; } body.ob-pista #prog.collapsed { width: 100% !important; } body.ob-pista #prog.collapsed #progToggle::after { content: "▴ PROGRAMAR"; } } /* ============================================================================ 10. EL TIRADOR, EN LOS OCHO IDIOMAS 🚨 Su texto vive en `content:` de una regla CSS, asi que no lo alcanza ningun traductor: ni las llamadas L() del laboratorio ni el barrido del DOM. Marvin lo vio en su captura: la pagina entera en ingles y el boton diciendo «VER EL COMBATE». Se resuelve con el atributo `lang` del , que idiomas.js ya pone. No es elegante repetir la regla ocho veces, pero la alternativa —mover el texto al JS— obligaria a que cada laboratorio supiera de este boton, y el boton es de Olibots, no suyo. ============================================================================ */ html[lang="en"] body.ob-deporte #progToggle::after { content: "▾ WATCH THE MATCH"; } html[lang="en"] body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ PROGRAM"; } html[lang="pt"] body.ob-deporte #progToggle::after { content: "▾ VER A PARTIDA"; } html[lang="pt"] body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ PROGRAMAR"; } html[lang="fr"] body.ob-deporte #progToggle::after { content: "▾ VOIR LE MATCH"; } html[lang="fr"] body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ PROGRAMMER"; } html[lang="de"] body.ob-deporte #progToggle::after { content: "▾ KAMPF ANSEHEN"; } html[lang="de"] body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ PROGRAMMIEREN"; } html[lang="it"] body.ob-deporte #progToggle::after { content: "▾ VEDI LA SFIDA"; } html[lang="it"] body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ PROGRAMMA"; } html[lang="zh"] body.ob-deporte #progToggle::after { content: "▾ 观看比赛"; } html[lang="zh"] body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ 编程"; } html[lang="ja"] body.ob-deporte #progToggle::after { content: "▾ 対戦を見る"; } html[lang="ja"] body.ob-deporte #app.panel-plegado #progToggle::after { content: "▴ プログラム"; } /* Y el de las pistas, que dice otra cosa: alli se vuelve a la PISTA, no a un combate. */ html[lang="en"] body.ob-pista #progToggle::after { content: "▾ SEE THE TRACK"; } html[lang="en"] body.ob-pista #prog.collapsed #progToggle::after { content: "▴ PROGRAM"; } html[lang="pt"] body.ob-pista #progToggle::after { content: "▾ VER A PISTA"; } html[lang="pt"] body.ob-pista #prog.collapsed #progToggle::after { content: "▴ PROGRAMAR"; } html[lang="fr"] body.ob-pista #progToggle::after { content: "▾ VOIR LA PISTE"; } html[lang="fr"] body.ob-pista #prog.collapsed #progToggle::after { content: "▴ PROGRAMMER"; } html[lang="de"] body.ob-pista #progToggle::after { content: "▾ STRECKE ANSEHEN"; } html[lang="de"] body.ob-pista #prog.collapsed #progToggle::after { content: "▴ PROGRAMMIEREN"; } html[lang="it"] body.ob-pista #progToggle::after { content: "▾ VEDI LA PISTA"; } html[lang="it"] body.ob-pista #prog.collapsed #progToggle::after { content: "▴ PROGRAMMA"; } html[lang="zh"] body.ob-pista #progToggle::after { content: "▾ 查看赛道"; } html[lang="zh"] body.ob-pista #prog.collapsed #progToggle::after { content: "▴ 编程"; } html[lang="ja"] body.ob-pista #progToggle::after { content: "▾ コースを見る"; } html[lang="ja"] body.ob-pista #prog.collapsed #progToggle::after { content: "▴ プログラム"; }