/* Tokens del portal - los valores del diseño, en un solo lugar. Todo lo demas del CSS usa estas variables: si hay que cambiar un color o una tipografia, se cambia aca y no en veinte archivos. Es lo que en el portal viejo se hizo a medias y termino con el nombre del municipio copiado a mano en cinco lugares. Lo que varia por municipio esta marcado con MARCA: eso lo pisa el tema de la instalacion, sin tocar este archivo. */ :root { /* --- Identidad. MARCA --- */ --petroleo: #13495b; /* el color principal: barra, botones, titulos */ --petroleo-osc: #0e3a49; /* el mismo, al pasar el mouse */ --teal: #157d73; /* los destacados y el "Bienvenido" */ /* La barra superior. MARCA */ --barra: linear-gradient(100deg, #0f5f57 0%, #13495b 46%, #1d4fd0 100%); --barra-sub: #aed0dd; /* el nombre del municipio, abajo del portal */ --barra-borde: rgba(255,255,255,.34); /* el borde del boton de linea sobre la barra */ --sobre-barra: #fff; /* lo que se lee arriba de la barra o de un boton lleno */ /* El overlay de espera: el vidrio y el anillo, con los extremos del degradado de la barra */ --vidrio: rgba(244,248,250,.72); --anillo-base: rgba(29,79,208,.12); --anillo-verde: #0f5f57; --anillo-azul: #1d4fd0; /* --- Texto --- */ --tinta-base: #18222f; /* el color del body */ --tinta: #0e2f3a; /* titulos */ --tinta-cuerpo: #1a2535; /* lo que se lee */ --tinta-media: #475467; --tinta-suave: #5a6b73; /* bajadas y aclaraciones */ --tinta-tenue: #677287; /* datos secundarios y la etiqueta del campo. Llega al minimo de la norma sobre los DOS fondos donde cae: el blanco y el gris del encabezado de una tabla */ --tinta-simbolo: #8a94a6; /* el mas/menos que despliega un año. Es un SIMBOLO, no texto: la norma no le mide contraste, y por eso puede ser mas claro que --tinta-tenue sin romper nada */ --tinta-apagada: #98a2b3; /* Solo lo deshabilitado, que la norma exime. No para texto que se lee: no llega al minimo de contraste */ --tinta-lista: #3a4a53; /* los items de la bienvenida */ --enlace: #1e7c9b; --gris-simbolo: #b0bac6; /* el chevron que despliega un grupo. Es mas claro que --tinta-apagada: es un simbolo y la norma no le mide contraste, igual que --tinta-simbolo */ --rota-glifo: #7fa8bb; /* el glifo que avisa que esa columna rota. Va con su propio color y NO con --petroleo a media opacidad: una capa de opacidad ensucia lo que tiene abajo */ /* --- Fondos --- */ --fondo: #e6e9ee; /* el fondo de la ventana */ --fondo-claro: #f5f8fa; /* el del escenario, arriba de los nodos */ --papel: #fff; --fondo-suave: #f6f8fa; /* avisos al pie de un campo, y el encabezado de una tabla */ --fondo-total: #eef2f6; /* la barra de totales de la tabla de deuda: mas oscura que el encabezado, para que la tabla cierre y no se confunda con el */ --fondo-hover: #f2f6fa; --fila-hover: #f7fafc; /* el de una fila de la tabla de deuda: mas claro, porque abajo hay muchas filas seguidas y el otro las ensucia */ /* --- Lineas --- */ --linea-suave: #eef1f5; --linea-fila: #f1f4f8; /* entre filas de la tabla de deuda: se repite decenas de veces seguidas, asi que va mas suave que --linea-suave */ --linea-campo: #d4dce6; --linea-marca: #c8d2dc; /* el borde de la casilla cuando esta vacia. Es el de la maqueta. OJO: da 1.53 sobre blanco y la norma pide 3.0 para lo que no es texto, asi que no llega. El nuestro daba 1.38, peor. */ --linea-tarjeta: #e3e8ef; /* la tarjeta apoyada: la cabecera, un grupo, una caja */ --linea-flotante:#e0e6ee; /* lo que flota por encima: un menu, un desplegable. Medio tono mas oscuro que la tarjeta, para que se despegue del fondo */ --linea-pie: #e6eaf0; /* La que cierra la barra de totales, arriba de todo el resto. La maqueta la pone en #d4dce4, dos unidades de azul mas oscura que --linea-campo: no se distingue, asi que apunta ahi en vez de agregar el color de nuevo. */ --linea-fuerte: var(--linea-campo); /* El plan de pagos: la misma tabla de deuda, en azul. Son los cuatro colores que cambian. */ --plan-fondo: #dceef4; /* la cabecera y la barra de totales del plan */ --plan-linea: #cfe4ec; /* los separadores de adentro */ --plan-linea-fuerte: #b9d6e2; /* lo que cierra: el borde de la barra y el de la caja */ --plan-tinta: #3f6d7d; /* los rotulos. La maqueta pone #4a7d8e y da 3.81 sobre ese fondo, o sea que no llega al minimo. Este da 4.76. */ /* --- Estados --- */ --ok: #1f8a5b; /* y el tilde de un año elegido entero */ /* El tilde de un año elegido A MEDIAS. Es --ok aclarado, y sale de la maqueta 5a. OJO: da 2.36 sobre blanco y la norma pide 3.0 para lo que no es texto, asi que no llega -igual que --linea-marca, que da 1.53-. Se toma como viene: oscurecerlo ya no seria traducir el diseño, seria cambiarlo (24-08). */ --ok-suave: #6bb894; --ok-linea: #bfe0cd; /* Los dos del cartel en verde, para que haga juego con el de error, que ya los tenia. Salen de la maqueta 4a. */ --ok-fondo: #e9f6ef; /* y la fila del año elegido entero. La maqueta pone #e9f4ee, dos unidades de verde mas: no se distingue, asi que apunta aca en vez de agregar el color de nuevo */ --ok-fondo-tenue: #f7fbf9; /* la fila del año elegido a medias */ --ok-texto: #15734a; --verde-sip: #116539; /* el verde del portal SIP: los numeros del calendario de vencimiento */ --error: #c0392b; --error-texto: #a8362a; --error-fondo: #fdecea; --error-linea: #f0c9c4; --error-icono: #d24a3d; --error-campo: #e8a09a; --foco: #2b90b6; --foco-halo: rgba(43,144,182,.13); --autofill: #fef9c3; /* el amarillo con el que el navegador marca lo que autocompleto */ /* Los tres tonos del cartel que se abre solo: sali bien, espera un poco, algo falló */ --bien-fondo: #e9f6ef; --bien-linea: #bfe3cd; --bien-texto: #15734a; --espera-fondo: #fdf3e2; --espera-linea: #f0dcb8; --espera-texto: #996512; --info-fondo: #eaf3f6; --info-linea: #cfe2e9; --info-texto: #2c5666; --pastilla-fondo: #e3eff3; /* la pastilla de acento: el contador de un grupo, el periodo elegido. Es prima de --info-fondo pero no la misma: esta es una marca, aquella es el fondo de un aviso. */ --ambar: #c77d12; /* el reloj del "vence en 24 horas" */ --neutro-fondo: #f2f4f7; --neutro-icono: #667085; /* --- Un color por tipo de imponible: el glifo y su pastilla --- */ --inmueble: #e8730f; --inmueble-tinte: #fdf0e4; --rodado: #7c3aed; --rodado-tinte: #f2ecfd; --comercio: #2563eb; --comercio-tinte: #e9effd; --cementerio: #8a5a34; --cementerio-tinte: #f4eee7; /* La pastilla cuadrada donde vive ese glifo, en la fila de una cuenta. Va aparte de --ico-anillo, que mide lo mismo pero es el anillo de resultado: son dos piezas. */ /* El carril donde cae la suma de un grupo en Mis cuentas, para que cierre contra los montos de las filas. NO es un numero elegido: es lo que ocupan el chevron, Imprimir y el menu al final de la fila. Si se les cambia el tamaño o se agrega uno, hay que rehacer la cuenta. */ /* Las cuatro columnas de la tabla de un año. Estaban solo como valor de reserva de un var() que nadie definia, o sea escritas a mano y fuera de toda banda. */ --anio-col-per: 80px; --anio-col-ori: 88px; --anio-col-rot: 84px; --anio-col-act: 104px; --carril-deuda: 99px; /* Hasta donde puede achicarse el monto de una fila cuando el alias pide lugar para leerse entero. Es un piso: abajo de esto el numero deja de decir algo. */ --carril-monto: 72px; --glifo-caja: 38px; /* medido en la maqueta. NO son los 44 del area tactil: el glifo es la pastilla de color, y quien se toca es la fila entera. */ /* La fila de deuda elegida. Es el unico valor de la tabla del diseño que no tenia equivalente: el resto se resolvio con los tokens que ya estaban. */ --fila-marcada: #f3f8fb; /* El techo al que se abre una fila de periodo -mide unos 46-. No es su alto: es un limite, que de 'auto' no se puede transicionar. Va ajustado sobre ese real: mas holgado dejaba tiempo muerto al abrir y al cerrar -la fila llegaba a 46 y el max-height seguia subiendo sin verse-. El margen sobre 46 es por si una fila mide un poco mas. */ --alto-fila: 56px; /* Las dos casillas de marcar. La del año mide una unidad mas que la de la tabla, y con ella se calcula ademas el sangrado de los periodos, que arrancan debajo del mas/menos del año. Las dos entran a la banda del celular: si no, el cuerpo crece y la casilla se queda, quedando chica al lado de su propio numero (Maxi, 24-08). */ --marca-tabla: 19px; --marca-caja: 20px; /* --- Tipografias. MARCA --- */ --tipo-titulo: 'Libre Franklin', system-ui, sans-serif; --tipo-ui: 'Public Sans', system-ui, sans-serif; /* --- Peso de letra --- */ /* No se colapsan: cada uno es un archivo de fuente distinto, juntar dos cambia la letra. El 500 esta declarado y no lo usa nadie. */ --peso-cuerpo: 400; /* el que ya viene; solo hace falta escribirlo para volver de un bold */ --peso-medio: 600; --peso-fuerte: 700; /* botones, enlaces, lo que se destaca */ --peso-titulo: 800; /* --- Interlineado --- */ --alto-icono: 1; /* un icono no lleva interlineado */ --alto-h1: 1.08; --alto-titulo: 1.16; --alto-compacto: 1.3; /* dos renglones que van juntos */ --alto-texto: 1.5; /* el cuerpo */ /* Los tamanos de letra. Son DOS escalas y no una: el texto y los iconos. El mismo numero puede ser las dos cosas, asi que se elige por lo que es, no por cuanto mide. Siete pasos, uno por rol, y ningun medio punto. Salen de la pantalla 9 de la maqueta, que lo argumenta asi: entre 13.5 y 14 no hay diferencia que se vea, y el medio punto lo unico que hace es desordenar. Antes habia trece escalones y cinco eran medios. */ --tam-rotulo: 11px; /* encabezado de tabla y pastilla: mayusculas con espaciado */ --tam-meta: 12px; /* metadato: bajada de tarjeta, ayuda, el numero del imponible */ --tam-dato: 13px; /* dato de tabla: los montos y el texto secundario */ --tam-base: 14px; /* texto base: botones, campos, bajadas */ --tam-bloque: 15px; /* titulo de bloque: el nombre de un recurso, un total */ --tam-tarjeta: 18px; /* titulo de tarjeta y de modal */ --tam-monto: 20px; /* el total a pagar de la barra: resalta un punto sobre un titulo de tarjeta sin llegar al de pantalla (Maxi, 28-08) */ --tam-pantalla: 28px; /* titulo de pantalla. La maqueta lo pone en 32 y quedaba grande al lado del resto: Maxi lo midio contra el titulo del login, que es este, y esa es la relacion que manda (23-08). */ /* Los dos que bajan en el telefono, y son los unicos. Del 15 para abajo no se toca nada: son los tamanos con los que se leen los datos, y achicarlos arruina una tabla en un celular. */ --tam-tarjeta-cel: 16px; /* El texto de la barra va aparte de la escala del cuerpo: la barra esta abstraida del zoom del celular -Maxi la quiere con proporcion fija-. El titulo va un 10% mas chico que el de tarjeta, para quedar en proporcion con el logo. */ --barra-titulo: 16px; --barra-muni: 11px; /* Acceso no entra en la escala, y es a proposito: es la unica pantalla publicada y probada de punta a punta. Su escalera de titulo es propia -42 en ancho, 34 al apretarse, 28 en telefono- y se toca solo si hace falta. */ --tam-acceso-h1: 42px; --tam-acceso-h1-medio: 34px; /* Mide lo mismo que --tam-pantalla y NO es un duplicado por descuido: Acceso quedo congelada y el titulo general se bajo a 28 para igualarla. Si algun dia el general se mueve, este se queda. */ --tam-acceso-titulo: 28px; --tam-acceso-mosaico: 22px; --tam-acceso-boton: 15.5px; /* El calendario de vencimiento (5c/5d). Va con medidas FIJAS, no la escala proporcional del telefono: siguiendola, los dias quedaban mas chicos que sus encabezados (Maxi). Igual que Acceso y la barra, tiene su propia micro-escala. Los -cel son el ajuste del telefono, tambien fijos: su corte es 720 -en tablet ya agranda para el dedo-, no el 480 de la escala. */ --venc-dow: 10px; /* los encabezados L M M J V S D */ --venc-dow-cel: 11px; --venc-dia: 14px; /* el numero de cada dia -era 13.5, sin medio punto- */ --venc-boton: 13px; /* Cancelar y Aceptar del pie -era 12.5- */ --venc-mes-cel: 15px; /* el mes, un punto sobre los dias, solo en el telefono */ --venc-celda: 2px; /* la separacion entre celdas del calendario */ --venc-radio-cel: 9px; /* el radio de las celdas tactiles en el telefono */ /* Los iconos. Van aparte de --ico-ancho y --ico-gap, que son la geometria del campo. Son los que la maqueta usa de verdad, contados sobre sus doce pantallas. Ojo: su pantalla 9 declara cuatro -24 20 17 15- y sus propias pantallas usan tambien 12, 18 y 38. Manda lo medido. Se fueron el 19, que la maqueta no usa ni una vez, y el 28, que no usaba nadie. */ --ico-micro: 12px; /* el que acompaña al rotulo de la columna que rota */ --ico-detalle: 15px; /* adentro de una pastilla o de un encabezado */ --ico-linea: 17px; /* acompaña un texto de 12 o 13 */ --ico-chico: 18px; /* el chevron que despliega */ --ico-base: 20px; /* el mas usado: botones y filas clickeables */ --ico-grande: 24px; /* el glifo que identifica una seccion */ --ico-anillo: 44px; --ico-anillo-cel: 34px; /* el mismo glifo en telefono. Es de la maqueta movil, que lo baja de 44 */ /* el anillo de resultado. No es un glifo, es la pieza entera */ --ico-aviso: 38px; /* el glifo adentro del circulo de un modal de confirmacion. Ahi el glifo no acompaña a un texto: es la ilustracion del aviso, y por eso esta fuera de la escala de los demas. */ /* --- Ancho del contenido. El diseño esta dibujado a este ancho: mas alla se estira y deja de parecerse a la maqueta. Los fondos siguen yendo de punta a punta. --- */ --ancho-max: 1180px; /* --- El campo: el icono de la izquierda y su separacion del texto --- */ --ico-ancho: 19px; --ico-gap: 9px; --campo-pad-x: 12px; /* el relleno lateral del recuadro */ --campo-pad-y: 11px; /* y el de arriba y abajo */ /* Los espacios: relleno, margen y separacion. Cada escalon se quedo con el valor que mas se usaba. Los bordes NO entran: van en pixeles enteros. */ --aire-1: 3px; --aire-2: 5px; --aire-3: 6px; --aire-4: 8px; --aire-5: 10px; --aire-6: 12px; --aire-7: 14px; --aire-8: 18px; --aire-9: 20px; --aire-10: 26px; --aire-11: 34px; --aire-12: 40px; --aire-13: 48px; --aire-14: 54px; /* --- Bordes redondeados --- */ --r-mini: 5px; /* la casilla de marcar y los periodos: piezas de 19 px */ --r-chico: 8px; --r-medio: 10px; --r-campo: 11px; --r-boton: 12px; --r-caja: 14px; --r-modal: 16px; --r-pilula: 30px; /* Las dos franjas del sitio. NO miden lo mismo, y es a proposito (Maxi, 21-08): la barra se queda en 72, que es como se veia bien, y el pie va a 80 porque su logo mide 52 -es el elemento mas alto de las dos- y con 72 le quedaban 10 de aire contra los 13 de la barra. Cada una vale lo mismo en todas las pantallas y a cualquier tamaño, que era el pedido: lo que se saco fue que el pie cambiara entre Acceso y el resto. OJO si se toca: mirar el logo del pie: su texto va dentro de la imagen, asi que su tamano aparente sale del alto que le demos. A 58 la letra chica cae en 11.6px, que es --tam-nano; mas abajo se sale de la escala del sitio y se ve desproporcionada. */ --franja: 78px; --franja-pie: 80px; /* Las tres piezas que miden en pixeles y no salen de ninguna escala. Estaban escritas a mano en componentes.css y no habia forma de moverlas por banda. */ /* El area tactil minima. Va en pixeles CSS porque esa es la unidad que la norma usa, y por eso mismo tiene que bajar donde el navegador infla el pixel: si no, el boton mide mas de lo que tiene que medir contra el dedo. */ --toque: 44px; --menu-ancho: 250px; --logo-barra: 50px; --logo-pie: 58px; --pastilla-iniciales: 30px; /* --- Sombras --- */ --sombra-elegido: 0 6px 14px rgba(19,73,91,.25); /* el tipo marcado en Asociar: se levanta */ --sombra-menu: 0 16px 40px rgba(14,47,58,.18); --sombra-hoja: 0 30px 80px rgba(14,47,58,.40); --velo: rgba(14,47,58,.55); /* el fondo oscuro detras de un modal */ /* --- Las capas --- */ /* Sin escala, el que llega ultimo elige un numero mas grande y gana. Con la cuenta corriente llegan el modal, el desplegable de medios de pago y el velo de carga, los tres a la vez. */ --z-campo: 2; /* el ojo y los iconos de adentro del campo */ --z-menu: 60; /* el desplegable del usuario */ --z-cargando: 2000; /* tapa todo, hasta un modal: mientras carga no se toca nada */ /* --- Los cortes de pantalla --- */ /* En CSS no se pueden escribir con una variable, asi que tenerlos en un solo lugar es esta lista. Antes de agregar uno nuevo, mirar si alguno de estos sirve. 1280 el escenario del acceso se aprieta acceso 1024 se apila: la ilustracion arriba y, con formulario, se va acceso 720 el telefono: la barra se parte, los pares se apilan componentes acceso cuenta 560 los botones de la cuenta pasan a uno por fila cuenta 420 telefono angosto: se va el municipio, el campo se aprieta componentes Y uno por ALTO, que no es lo mismo: 700, la palanca del aire. Y uno por CONTENEDOR, que tampoco: 760, donde la tabla se vuelve tarjetas (componentes). */ /* --- Tiempos de las transiciones del diseño --- */ --curva: cubic-bezier(.62,.02,.3,1); --curva-ui: cubic-bezier(.4,0,.2,1); --t-lenta: .45s; --t-media: .34s; --t-rapida: .22s; /* La coreografia del acceso: el escenario gira y el contenido entra atras, escalonado. Los siete van juntos: mover uno solo desincroniza el paso. */ --t-escena: .66s; /* el giro del escenario */ --t-fundido-sale: .36s; /* el que se va: se apaga y se corre */ --t-desliz-sale: .5s; --t-demora-sale: .2s; --t-fundido-entra: .42s; /* el que llega, un toque despues */ --t-desliz-entra: .55s; --t-demora-entra: .24s; --t-demora-mosaicos: .12s; /* los mosaicos se apagan apenas despues de empezar a plegarse */ /* El anillo que gira mientras carga. No es una transicion: es su propio ritmo. */ /* Las dos del campo. Van con su valor exacto y no con el escalon de al lado: el canonico las tiene fijadas, en particular la del mensaje. */ --t-mensaje: .28s; /* el mensaje que se abre adentro del campo */ --t-campo: .18s; /* el borde y el halo al cambiar de estado */ /* El umbral antes de que aparezca el overlay de espera en un submit. Si la pantalla nueva llega antes, no se muestra: asi lo instantaneo -los mails, que ahora salen sin esperar el SMTP- no flashea, y la carga de verdad -que pasa el umbral- si lo muestra. El pago no espera esto: va de una, que ahi la espera es real y sale del portal. */ --t-espera-umbral: .75s; --t-giro: 1.4s; --t-giro-lento: 3s; } /* La banda del CELULAR: cualquier viewport de hasta 480 px CSS. El escritorio va a mas de 480. Aca no hay tamaños escritos: hay una UNIDAD, y cada token dice cuantas de esas mide. La unidad es el ancho de la pantalla dividido 448, que es lo que Chrome de Android le da al telefono para el que se calibro todo. Va por ancho y no por bandas porque el ancho CSS es proporcional al tamaño del pixel: el navegador elige ese numero justamente para que un pixel CSS mida mas o menos lo mismo en cualquier aparato. Firefox de Android parte la misma pantalla en 336 -su pixel es un tercio mas grande- y la cuenta lo baja sola al 0,75: por eso la banda de densidad que habia aca DEJO DE EXISTIR, no se perdio. Antes eran dos escalones, uno a 336 y otro a 448, y todo lo del medio recibia el factor del vecino grande: un Pixel da 412, entraba en la banda de 448 y se le iba de tamaño (24-08). El piso y el techo acotan los bordes -una ventana de escritorio apretada, un plegable-. El piso NO puede subir de 0,75: ese es justo el valor que necesita Firefox. Los coeficientes son los de escritorio mas un 14%, elegido por Maxi el 25-08 mirando: el 25% que llevaban antes le parecio grande y el de escritorio pelado, chico. El 14 no es a ojo: deja el texto base en 16, que es el piso que los campos necesitan para que Safari no haga zoom al tocarlos. Abajo de eso el max(16px, --tam-base) de .fld muerde y el texto que se escribe queda mas grande que el resto de la pantalla. Para moverlo se cambian los coeficientes, no la unidad: la unidad es geometria, no gusto. */ @media (max-width: 480px) { :root { --u: clamp(0.75px, 100vw / 448, 1.08px); --tam-rotulo : calc(12.6 * var(--u)); --tam-meta : calc(13.7 * var(--u)); --tam-dato : calc(14.9 * var(--u)); --tam-base : calc(16 * var(--u)); --tam-bloque : calc(17.1 * var(--u)); --tam-tarjeta : calc(20.6 * var(--u)); --tam-pantalla : calc(32 * var(--u)); --tam-tarjeta-cel : calc(18.3 * var(--u)); /* Acceso entra igual: la razon no es de diseño, es el tamaño del pixel. */ --tam-acceso-h1 : calc(48 * var(--u)); --tam-acceso-h1-medio : calc(38.9 * var(--u)); --tam-acceso-titulo : calc(32 * var(--u)); --tam-acceso-mosaico : calc(25.1 * var(--u)); --tam-acceso-boton : calc(17.7 * var(--u)); --ico-micro : calc(13.7 * var(--u)); --ico-detalle : calc(17.1 * var(--u)); --ico-linea : calc(19.4 * var(--u)); --ico-chico : calc(20.6 * var(--u)); --ico-base : calc(22.9 * var(--u)); --ico-grande : calc(27.4 * var(--u)); --ico-anillo : calc(50.3 * var(--u)); --ico-anillo-cel : calc(38.9 * var(--u)); --ico-aviso : calc(43.4 * var(--u)); --glifo-caja : calc(43.4 * var(--u)); /* La barra queda AFUERA del zoom -Maxi la quiere con proporcion fija-, pero SI sigue la unidad: si no, se ve de distinto tamaño en cada navegador. */ --barra-titulo : calc(19 * var(--u)); --barra-muni : calc(13 * var(--u)); --franja : calc(78 * var(--u)); --franja-pie : calc(80 * var(--u)); --logo-barra : calc(50 * var(--u)); --logo-pie : calc(58 * var(--u)); --pastilla-iniciales : calc(30 * var(--u)); --toque : calc(44 * var(--u)); --menu-ancho : calc(250 * var(--u)); --marca-tabla : calc(21.7 * var(--u)); --marca-caja : calc(22.9 * var(--u)); --anio-col-per : calc(80 * var(--u)); --anio-col-ori : calc(88 * var(--u)); --anio-col-rot : calc(84 * var(--u)); --anio-col-act : calc(104 * var(--u)); } } /* La palanca. En una pantalla baja -una notebook de 768 con la escala al 125% queda en 614- el formulario no entraba y habia que scrollear para llegar al boton. Aca se juntan los bloques entre si; la letra y el aire de adentro de cada pieza quedan igual. Medido en el registro a 1024x576: el boton pasa de 26 px abajo del pliegue a 12 arriba. */ @media (max-height: 700px) { :root { --aire-6: 10px; --aire-7: 12px; --aire-8: 14px; --aire-9: 16px; --aire-10: 20px; --aire-11: 26px; --aire-12: 30px; --aire-13: 34px; --aire-14: 38px; } }