:root{ /* Paleta de marca (logo nuevo): #F2F6F7 fondo, #0C2A50 azul principal, #617389 gris/azulado secundario. --azul-osc y los "-cl" (tints claros) estan derivados de esos tres para hover/headings y fondos de badges. */ --azul: #0C2A50; --azul-osc: #091E3A; --azul-cl: #DDE1E6; --verde: #2E8B57; --verde-cl: #E4F4EC; --naranja: #C9772B; --naranja-cl: #FBEEE0; --gris: #617389; --gris-cl: #EFF1F3; --borde: #E2E5EA; --blanco: #FFFFFF; --sombra: 0 2px 10px rgba(12,42,80,0.08); /* Superficies: usadas por body, tarjetas/modales y texto principal, para que el modo oscuro (mas abajo) pueda pisarlas todas de una sola vez. */ --fondo: #F2F6F7; --superficie: #FFFFFF; --superficie-input: #FBFCFE; --texto: #1B2430; --texto-label: #374151; } *{box-sizing:border-box;} /* Los navegadores NO le pasan el font-family del body a button/input/select/ textarea por defecto (usan la fuente nativa del sistema operativo, que no es la misma que el resto del texto) -- por eso, sin esta regla, cada boton nuevo se termina viendo con una tipografia distinta al resto de la app a menos que alguien se acuerde de agregarle "font-family:inherit" a mano. Con esto queda garantizado en un solo lugar: toda la app usa siempre la misma fuente (la del body de arriba), y lo unico que puede variar entre textos es el peso (bold), el tamano o el estilo (italica), nunca la familia tipografica en si. */ button, input, select, textarea, optgroup{ font-family:inherit; } /* En mobile (sobre todo Android/WebKit), al tocar un boton el navegador pinta un flash de highlight rectangular por default, sin importar el border-radius del boton -- se nota feo en botones redondos como el "+" del FAB. Se desactiva ese highlight nativo en todos lados y se deja el feedback al toque en manos de :active (transform:scale, cambios de fondo, etc), que si respeta la forma real del elemento. */ button, a, .avatar-edit-wrap, .card-boton, .feed-item, .fam-post, .fam-card-clickeable{ -webkit-tap-highlight-color: transparent; } /* min-height:100% en html + 100vh en body para que el color de fondo (clave en modo oscuro) cubra toda la pantalla aunque el contenido de la pestaña sea corto y no llegue a llenar el alto del viewport. overflow-y:scroll + scrollbar-gutter:stable reservan el ancho de la barra de scroll siempre (haya o no contenido suficiente para scrollear): sin esto, las pestañas sin scroll quedaban un poco mas anchas que las que si lo tenian, y como .wrap se centra con margin:0 auto, las cards se veian con mas aire de un lado que del otro (mas notorio en el panel de responsable). */ html{ background:var(--fondo); min-height:100%; overflow-y:scroll; scrollbar-gutter:stable; } body{ margin:0; min-height:100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--fondo); color:var(--texto); } /* Accesibilidad: tamano de letra configurable (persiste por dispositivo). Usamos zoom en vez de reescribir cada font-size, para que escale todo el diseno (texto, iconos, espaciados) de forma proporcional y consistente. */ body.letra-grande{ zoom:1.15; } /* Accesibilidad: modo oscuro (azul noche, no negro puro). La clase se pone en (no en ): asi la variable --fondo tambien le llega al propio , que es quien de verdad cubre todo el viewport cuando el contenido de una pestania es mas corto que la pantalla (si la clase estuviera solo en body, el html de atras quedaba blanco en esos casos, como pasaba en el panel de responsables). Como casi todo el CSS ya esta escrito en base a estas variables, con pisarlas en :root/html alcanza para que se propague a los 3 paneles, tarjetas, modales, inputs y la pildora de navegacion. */ html.modo-oscuro{ --azul-osc: #8FC1EA; --azul-cl: #17324A; --verde-cl: #113328; --naranja-cl: #3A2A18; --gris: #93A1B5; --gris-cl: #17293C; --borde: #24384F; --fondo: #0B1A2B; --superficie: #122437; --superficie-input: #0F2033; --texto: #E7ECF2; --texto-label: #B7C2D0; } html.modo-oscuro .card, html.modo-oscuro .modal, html.modo-oscuro .acc-section, html.modo-oscuro .fam-card, html.modo-oscuro .fam-post, html.modo-oscuro .mensajes-layout, html.modo-oscuro .bottom-nav-inner, html.modo-oscuro .login-demo-lista button, html.modo-oscuro .perfil-datos-card, html.modo-oscuro .btn-lapiz-perfil, html.modo-oscuro .btn-like-wrap{ background:var(--superficie); } html.modo-oscuro .perfil-datos-card .fila span:last-child{ color:var(--texto); } /* La sombra difuminada de la pildora y del "+" esta pensada en tonos azulados de fondo claro (rgba(20,40,70,x)): contra el fondo oscuro (--fondo/--superficie, ya de por si azul muy oscuro) practicamente no se nota. En oscuro se usa una sombra neutra en negro, bien difuminada, para que la pildora y el "+" sigan leyendose "flotando" arriba del contenido. */ html.modo-oscuro .bottom-nav-inner{ box-shadow:0 12px 32px rgba(0,0,0,.5), 0 3px 12px rgba(0,0,0,.35); } html.modo-oscuro .fab-btn{ box-shadow:0 5px 18px rgba(0,0,0,.55); } /* Excepcion puntual: .bottom-nav button.active usa var(--azul) (que se mantiene igual en oscuro, para no perder la identidad de marca), asi que necesita un valor mas claro aparte para que el texto se siga leyendo. */ html.modo-oscuro .bottom-nav button.active{ color:#8FC1EA; } body.login-bg{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background: linear-gradient(160deg, #0C2A50 0%, #091E3A 60%, #050F1D 100%); padding:20px; } /* Animacion de apertura de la pantalla de ingreso: simple y corta, se dispara sola al cargar la pagina (no hace falta JS, el card no se oculta nunca despues). */ @keyframes entradaLogin{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } } .login-card{ background:#fff; border-radius:16px; padding:32px 28px; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,.25); animation: entradaLogin .5s ease-out; } .login-logo{ display:flex; align-items:center; gap:10px; margin-bottom:4px; } .login-logo h1{ font-size:22px; margin:0; color:var(--azul-osc); } .login-sub{ font-size:13px; color:var(--gris); margin:0 0 18px; } .login-error{ color:#B3261E; font-size:12.5px; margin-top:8px; min-height:16px; } .login-demo{ margin-top:20px; background:var(--azul-cl); border-radius:10px; padding:12px 14px; font-size:12px; color:#333; max-height:260px; overflow-y:auto; } .login-demo p{ margin:0 0 8px; } .login-demo ul{ margin:0; padding-left:0; } .login-demo code{ background:#fff; padding:1px 5px; border-radius:4px; font-size:11.5px; } .login-demo-lista{ list-style:none; display:flex; flex-direction:column; gap:5px; } .login-demo-lista li{ margin:0; } .login-demo-lista button{ width:100%; text-align:left; background:#fff; border:1px solid var(--borde); border-radius:8px; padding:7px 10px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:1px; } .login-demo-lista button:hover{ background:var(--gris-cl); border-color:var(--azul); } .login-demo-lista button b{ font-size:12px; color:var(--azul-osc); } .login-demo-lista button span{ font-size:11px; color:var(--gris); } label{ display:block; font-size:12.5px; font-weight:600; color:var(--texto-label); margin:12px 0 4px; } input[type=text], input[type=password], input[type=date], input[type=file], input[type=email], input[type=tel], input[type=number], textarea, select{ width:100%; padding:10px 12px; border:1px solid var(--borde); border-radius:9px; /* 16px minimo a proposito: por debajo de eso, Safari/iOS hace zoom solo al tocar el campo (lo interpreta como que el sitio no esta pensado para mobile) y despues el layout queda con zoom hasta que se saca a mano. */ font-size:16px; font-family:inherit; background:var(--superficie-input); color:var(--texto); } textarea{ resize:vertical; min-height:70px; } /* Checkbox nativo, pero con el mismo modelo/color que el resto de la app (antes se dejaba el checkbox tal cual lo dibuja el navegador -- sin accent-color -- en varios checklists: usuarios y sus casillas de tildar para borrado masivo, cursos a cargo de un docente, alumnos de una tarea o publicacion, participantes de un grupo nuevo. Se notaba sobre todo en modo oscuro, pero el problema real era que nunca tomaba el celeste de la app, no el modo oscuro en si). accent-color tinie tanto el tilde como el cuadrado sin tildar, y lo respeta tambien el modo oscuro sin hacer falta una regla aparte. */ input[type="checkbox"]{ width:auto; flex-shrink:0; transform:scale(1.2); accent-color:var(--azul); cursor:pointer; } /* Menu de acciones custom (Usuarios: "Eliminar", "Asignar X/s a...", "Quitar X a..."), en vez de un nativo, cuyo popup de opciones lo dibuja el sistema operativo y no se puede animar. Se reemplaza por un boton + lista propia (mismos datos, mismo onchange logico) para poder darle una animacion de despliegue acorde al resto de la app (mismo estilo pop que el menu del FAB: nace pegado arriba, encogido, y crece hasta su tamano real). */ .filtro-dropdown{ position:relative; } .filtro-dropdown-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border:1px solid var(--borde); border-radius:9px; background:var(--superficie-input); font-size:15px; font-family:inherit; color:var(--texto); cursor:pointer; text-align:left; } .filtro-dropdown-chevron{ flex-shrink:0; color:var(--gris); transition:transform .22s cubic-bezier(.34,1.35,.64,1); } .filtro-dropdown.filtro-dropdown-abierto .filtro-dropdown-chevron{ transform:rotate(180deg); } .filtro-dropdown-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:5; background:var(--superficie); border:1px solid var(--borde); border-radius:10px; box-shadow:var(--sombra); padding:6px; max-height:260px; overflow-y:auto; transform-origin:top center; transform:scaleY(.85) translateY(-4px); opacity:0; pointer-events:none; transition:transform .18s cubic-bezier(.34,1.35,.64,1), opacity .14s ease; } .filtro-dropdown.filtro-dropdown-abierto .filtro-dropdown-menu{ transform:scaleY(1) translateY(0); opacity:1; pointer-events:auto; } .filtro-dropdown-item{ display:block; width:100%; text-align:left; padding:9px 10px; border:none; background:none; border-radius:7px; font-size:13.5px; font-family:inherit; color:var(--texto); cursor:pointer; } .filtro-dropdown-item:hover{ background:var(--gris-cl); } .filtro-dropdown-item.activo{ background:var(--azul-cl); color:var(--azul); font-weight:600; } /* En oscuro, --azul se mantiene igual a proposito (identidad de marca, ver html.modo-oscuro mas arriba), pero eso deja texto azul muy oscuro sobre un fondo (--azul-cl en oscuro) que tambien es azul oscuro: casi no se lee. --azul-osc SI se remapea a un celeste claro en oscuro (misma excepcion que usa .bottom-nav button.active), asi que sirve para el texto aca tambien. */ html.modo-oscuro .filtro-dropdown-item.activo{ color:var(--azul-osc); } /* Transicion al cambiar de pestania (Inicio/Pedidos/Avisos/Mas, etc): la pestania que queda a la vista entra con un fade + deslizamiento sutil en vez de aparecer de golpe. Se dispara agregando .tab-fade-in justo despues de sacarle el .hide (ver animarCambioPestania en app.js); al ser una animation (no transition) no importa el estado previo de opacity. */ @keyframes tabFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } .tab-fade-in{ animation:tabFadeIn .22s ease; } .admin-user-row .quien{ align-items:flex-start; flex-direction:column; gap:2px; } .admin-user-row .quien-linea{ display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; min-width:0; } .meta-chica{ font-size:11px; color:var(--gris); } .quien-con-meta{ align-items:flex-start !important; flex-direction:column; gap:2px; } .quien-con-meta .quien-linea{ display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; min-width:0; } /* Boton flotante "+": atajo para crear (publicacion, tarea, usuario, etc) sin tener que ir a buscar el acordeon correspondiente. Solo docente y direccion. Por defecto flota arriba de la pildora (nunca se superponen). Al scrollear la ventana principal, se agrega body.fab-compacto: el + se achica un poco y se desliza a la derecha de la pildora (que tambien se achica un toque para dejarle lugar), en vez de quedar montado arriba. */ .fab{ position:fixed; right:20px; bottom:100px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:10px; transition: right .22s ease, bottom .22s ease, opacity .18s ease; opacity:1; /* El contenedor no tiene fondo ni bordes propios, pero SI ocupa una caja de layout real: como transform:scale (ver .fab-menu) no achica la caja, el .fab-menu "cerrado" sigue midiendo su alto/ancho completo (varios items) aunque sea invisible. Sin este pointer-events:none, esa zona invisible tapaba toques en el contenido de abajo (ej. las cards de la pestania Usuarios en preceptoria, donde el + queda siempre fijo arriba). Se reactiva puntualmente en .fab-btn (siempre) y en .fab-menu solo mientras esta abierto (ver mas abajo, ya estaba bien resuelto ahi). */ pointer-events:none; } /* Mismo mecanismo que .bottom-nav.hide/.modal-bg.hide: pisa el .hide generico (display:none) para poder animar la desaparicion con un fade en vez de un corte seco, cada vez que el + se oculta/reaparece junto con la pildora (ver ocultarNavAlEntrarAConfig/mostrarNavAlSalirDeConfig en app.js). */ .fab.hide{ display:flex !important; opacity:0; pointer-events:none; } .fab.hide .fab-btn{ pointer-events:none; } .fab-btn{ width:56px; height:56px; border-radius:50%; background:var(--azul); color:#fff; border:none; cursor:pointer; box-shadow:0 6px 18px rgba(20,40,70,.28); line-height:1; display:flex; align-items:center; justify-content:center; transition: width .22s ease, height .22s ease, transform .1s ease; pointer-events:auto; } .fab-btn:active{ transform:scale(.93); } /* "Pop" al tocar el +: se achica de golpe y rebota mas alla de su tamano normal antes de asentarse, para que se sienta la apertura del menu (ver alternarFabMenu en app.js, que agrega y saca esta clase). */ @keyframes fabPop{ 0%{ transform:scale(1); } 35%{ transform:scale(.86); } 70%{ transform:scale(1.08); } 100%{ transform:scale(1); } } .fab-btn.fab-pop{ animation:fabPop .38s cubic-bezier(.34,1.2,.64,1); } /* El "+" es un SVG (no el caracter de texto): un glifo de fuente nunca queda perfectamente centrado en su propio recuadro segun la tipografia, un SVG dentro de un boton con flex centrado si. */ .fab-btn svg{ width:46%; height:46%; flex-shrink:0; } .fab-btn:hover{ background:var(--azul-osc); } body.fab-compacto .fab{ right:10px; bottom:24px; } body.fab-compacto .fab-btn{ width:44px; height:44px; } /* Al scrollear, el + pasa a flotar al lado de la pildora: los dos tienen que quedar del mismo alto y alineados. En vez de achicar la pildora entera con un transform:scale (que no da un alto exacto y desalinea contra el +, que tiene un tamano fijo en px), se le esconde el texto a los botones (quedan solo los iconos, como en .nav-compacta) y se le fija una altura de boton que, sumada al padding del marco (.bottom-nav-inner), da exactamente el mismo alto que el circulo del + (44px en mobile, 52px en PC). */ body.fab-compacto .bottom-nav-inner .nav-label{ max-height:0; opacity:0; } /* Al scrollear la pildora no solo se achica: se ESTIRA para ocupar todo el ancho libre a la izquierda del + (ver el "left" del bloque de mas abajo), y cada boton pasa a ser un segmento flexible de ancho IGUAL (flex:1 1 0, en vez de su ancho natural fijo) para repartirse ese ancho entre todos, sin dejar aire de sobra de un lado. */ body.fab-compacto .bottom-nav-inner{ gap:0; } body.fab-compacto .bottom-nav button{ flex:1 1 0; padding:0 4px; gap:0; height:32px; } @media (max-width:720px){ /* En mobile, cuando el + pasa a flotar al lado de la pildora (fab-compacto), la pildora deja de centrarse por el flex del contenedor padre (.bottom-nav) y pasa a fixed ella misma, anclada por los DOS lados: contra el borde izquierdo de la pantalla (con el mismo margen de 10px que el + tiene del lado derecho, ver .fab mas arriba) y contra el borde derecho con un "right" que ya descuenta el ancho del + (44px), su propio margen (10px) y un aire fijo entre los dos (8px): 10+44+8 = 62px. Al quedar anclada por los dos lados a la vez, el ancho sale solo (ocupa todo lo que hay entre el borde de la pantalla y el +, ver flex:1 1 0 de arriba) y los dos quedan siempre pegados como un solo conjunto, sin importar el viewport. Antes se centraba la pildora entera (ancho automatico, chico) y se la corria con un translateX que combinaba vw + un porcentaje propio para dejar su borde izquierdo a 10px del borde de la pantalla. En la practica ese calculo (basado en 50vw) podia quedar corrido -- por ejemplo si el navegador reserva lugar para una scrollbar, vw no siempre coincide exactamente con el ancho visible real -- y la pildora terminaba recortada contra el borde izquierdo, ademas de dejar (al ser chica) un hueco grande hasta el +. Anclar los dos bordes directamente evita las dos cosas. */ body.fab-compacto .bottom-nav-inner{ position:fixed; left:10px; right:62px; bottom:16px; z-index:20; transform:none; transition:left .22s ease, right .22s ease, bottom .22s ease; } /* .fab queda a 24px del piso al scrollear (regla de arriba); .bottom-nav por defecto esta a 16px (ver .bottom-nav mas arriba): sin este ajuste quedaban 8px desalineados entre si. */ body.fab-compacto .fab{ bottom:16px; } } /* El menu de opciones "sale" de atras del boton +: arranca achicado y pegado a la esquina inferior derecha (transform-origin), y crece hasta su tamano normal con un rebote sutil, como si hubiera estado escondido ahi. Ya no se usa .hide para mostrarlo/ocultarlo (no se puede animar desde display:none): alternarFabMenu()/cerrarFabMenu() en app.js togglean la clase .fab-menu-abierto en su lugar. Mientras esta cerrado sigue en el DOM pero invisible y sin poder recibir clicks (pointer-events:none). */ .fab-menu{ display:flex; flex-direction:column; gap:4px; background:var(--superficie); border:1px solid var(--borde); border-radius:12px; padding:8px; box-shadow:var(--sombra); min-width:210px; position:relative; z-index:46; transform-origin:bottom right; transform:scale(.3) translateY(14px); opacity:0; pointer-events:none; transition:transform .24s cubic-bezier(.34,1.35,.64,1), opacity .16s ease; } .fab-menu.fab-menu-abierto{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; } .fab-menu-item{ text-align:left; background:none; border:none; padding:9px 12px; font-size:13px; font-weight:600; color:var(--texto-label); border-radius:8px; cursor:pointer; font-family:inherit; transition:transform .1s ease; } .fab-menu-item:hover{ background:var(--gris-cl); } .fab-menu-item:active{ transform:scale(.97); } /* Al abrir el menu del +, se desenfoca el fondo (igual que un modal) para que las opciones queden claramente arriba de todo lo demas. El blur entra en transicion (arranca en 0 y llega a su valor final) en vez de aparecer de golpe -- misma logica que el menu: ya no se usa .hide, sino la clase .fab-backdrop-abierto. */ .fab-backdrop{ position:fixed; inset:0; z-index:40; background:rgba(9,30,58,.28); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); opacity:0; pointer-events:none; transition:opacity .2s ease, backdrop-filter .2s ease, -webkit-backdrop-filter .2s ease; } .fab-backdrop.fab-backdrop-abierto{ backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px); opacity:1; pointer-events:auto; } @media (min-width:1000px){ /* En PC el + tambien se ve chico comparado con el resto de la pantalla: bastante mas grande que antes (68px), para que no quede perdido en todo el espacio vacio alrededor. */ .fab-btn{ width:92px; height:92px; } body.fab-compacto .fab-btn{ width:64px; height:64px; } /* La pildora, al scrollear, caia en la regla generica de mas arriba (pensada para mobile: height:32px) -- un salto enorme respecto del tamano grande de PC (64px, ver "En PC la pildora se ve chica..." mas arriba) que se sentia roto en vez de una animacion sutil. En PC alcanza con un achique chico, solo para que se note que la pagina "esta viva" al scrollear -- no hace falta compactarla tanto como en mobile (ahi si hace falta, para dejarle lugar al + al lado; en PC el + no se mueve al lado de la pildora, se queda flotando donde estaba). */ body.fab-compacto .bottom-nav-inner{ gap:4px; } body.fab-compacto .bottom-nav button{ padding:0 16px; height:54px; } } .lista-firmas{ margin-top:10px; border-top:1px solid var(--borde); padding-top:8px; } .firma-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; font-size:12px; } .firma-item span{ color:var(--gris); } .firma-item button{ flex-shrink:0; } /* Docente y admin trabajan sobre todo desde una PC: en pantallas anchas organizamos el contenido de cada pestaña en 2 columnas explicitas (.panel-col). Los wrappers no producen ninguna caja en pantallas angostas (display:contents), asi que ahi todo cae en una sola columna, sin ningun cambio (el panel de familia no se toca, se sigue usando sobre todo desde el celular). */ .panel-cols, .panel-cols > .panel-col{ display:contents; } @media (min-width:1000px){ #viewAdmin.wrap, #viewMensajes.wrap, #viewProveedor.wrap{ max-width:1500px; } #viewDocente.wrap{ max-width:1100px; } .panel-cols{ display:flex; align-items:flex-start; gap:20px; } .panel-cols > .panel-col{ display:block; flex:1; min-width:0; } /* Proveedor: el formulario para publicar queda mas angosto y fijo a la izquierda, el feed de sus publicaciones ocupa el resto del ancho. */ .panel-col-prov-form{ flex:0.7; position:sticky; top:20px; } .panel-col-prov-feed{ flex:1.3; } } /* Pestañas de docente y direccion: los paneles quedan bien separados de la pildora flotante de abajo, que ahora es fixed en todos los paneles (no solo en el de responsables). #viewMensajes queda afuera a proposito: ahi la pildora flota superpuesta sobre la card en vez de dejarle un hueco reservado (ver .mensajes-layout). */ #viewDocente, #viewAdmin, #viewAdminConfig, #viewPerfilDocente, #viewPerfilAdmin{ padding-bottom:90px; } #viewMensajes{ padding-bottom:20px; } @media (min-width:1000px){ /* En PC la pildora es mas grande (ver .bottom-nav mas arriba), asi que necesita un poco mas de aire abajo (se habia quedado afuera #viewPerfilAdmin, con la misma pildora que el resto). */ #viewDocente, #viewAdmin, #viewAdminConfig, #viewPerfilDocente, #viewPerfilAdmin{ padding-bottom:110px; } } /* Preceptoria: su pildora es mas alta que la del resto (ver body.nav-preceptoria .bottom-nav button mas arriba, 60px/74px vs 52px/64px) Y nunca se achica al scrollear (nunca entra en fab-compacto, ver permiteCompacto en app.js) -- el padding-bottom fijo de arriba, calibrado contra la pildora regular (que ademas se achica), se quedaba corto para #viewAdmin (la unica vista donde la pildora de preceptoria realmente flota visible; en Configuración y Mi perfil queda oculta, ahi el padding de arriba no importa). Solo se pisa para preceptoria, el resto de los paneles no se toca. */ body.nav-preceptoria #viewAdmin{ padding-bottom:98px; } @media (min-width:1000px){ body.nav-preceptoria #viewAdmin{ padding-bottom:130px; } }