:root { --amarillo: #EFC85F; --amarillo-suave: #FFF8DC; --negro: #1E1E1E; --gris-oscuro: #2D2D2D; --gris-medio: #555; --gris-suave: #f5f5f5; --blanco: #fff; --borde: #e8e8e8; --sombra: 0 2px 8px rgba(0, 0, 0, .07); --radio: 14px; --error: #c0392b; --exito: #16a34a; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background: var(--gris-suave); color: var(--negro); min-height: 100vh; } /* ARMAZÓN FIJO — la cabecera y la barra de abajo no se mueven al desplazar. La clase la pone header.js, así que solo la llevan las páginas internas; el login y las pantallas sueltas de acceso siguen siendo páginas normales que se desplazan enteras. Antes la cabecera era `sticky` y la barra de abajo `fixed`. Sobre el papel eso las deja quietas, pero en el móvil no: al desplazar, el navegador esconde y saca su propia barra de direcciones, la altura visible de la ventana cambia a mitad del gesto y los dos elementos dan un salto. Por eso solo pasaba en las pantallas con contenido largo — las cortas no llegan a desplazarse y nunca se notaba. La solución es que el documento NO se desplace en absoluto: la ventana se reparte en tres, y lo único que se mueve es el contenido de en medio. Así el navegador no tiene motivo para esconder su barra, y las nuestras no pueden moverse porque no están flotando sobre nada: están en su sitio. El precio es que la barra de direcciones del móvil ya no se recoge al bajar, así que se ve un poco menos de contenido. Merece la pena: unas barras que bailan hacen fallar los toques, y eso es peor que perder unos píxeles. */ html { height: 100%; } body.app-fija { height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Solo hay tres hijos en el reparto. Todo lo demás que cuelga del —el botón flotante, los modales, la barra de selección, la hoja de impresión— va en `position: fixed` o escondido, así que no entra aquí. */ body.app-fija > .header, body.app-fija > .bottom-nav { position: relative; flex: 0 0 auto; } body.app-fija > .contenido { flex: 1 1 auto; /* Imprescindible: `.contenido` lleva `margin: 0 auto` para centrarse, y dentro de una columna flexible un margen automático hace que el elemento se encoja hasta el tamaño de su contenido en vez de ocupar el ancho entero. Con el ancho fijado al 100%, el `max-width` sigue limitándolo y los márgenes siguen centrándolo, igual que antes. */ width: 100%; overflow-y: auto; /* Al llegar al final, que no arrastre la página de detrás ni dispare el "recargar tirando hacia abajo" del navegador en mitad de una lista. */ overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; /* El hueco de abajo se mantiene aunque la barra ya no flote sobre el contenido: el botón redondo de "+" sí sigue flotando, y sin este hueco la última tarjeta de la lista quedaría debajo de él justo al llegar al final. */ padding-bottom: 90px; } button { cursor: pointer; font-family: inherit; } /* Botón desactivado mientras algo está en curso (ej. "Enviando…") — sin esto, el cambio de texto era la única pista de que ya se había pulsado, y era fácil pulsar otra vez de más. */ button:disabled { opacity: 0.6; cursor: default; } /* SELECT — estilo base para cualquier hereda el aspecto plano del sistema operativo, desentonando con el resto del sistema de diseño. */ select { width: 100%; border: 1.5px solid var(--borde); border-radius: 10px; padding: 12px 34px 12px 14px; font-size: 15px; font-family: inherit; background: var(--blanco) url('data:image/svg+xml;utf8,') no-repeat right 10px center; background-size: 18px; color: var(--negro); outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; transition: border-color .15s; } select:focus { border-color: var(--amarillo); } /* HEADER — barra superior con el logo, compartida por todas las páginas internas (no se usa en la pantalla de login, que tiene su propio logo centrado a pantalla completa). */ .header { background: var(--negro); color: var(--blanco); padding: 16px 20px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: space-between; } .header .logo { display: flex; align-items: center; gap: 8px; } .header .logo-titulo { font-size: 16px; font-weight: 800; color: var(--blanco); } .header .btn-volver { display: flex; align-items: center; justify-content: center; color: var(--amarillo); padding: 4px; margin-right: 4px; } .header .btn-volver svg { width: 20px; height: 20px; } .header .logo-text { font-size: 11px; font-weight: 600; letter-spacing: 2px; color: rgba(255, 255, 255, .5); text-transform: uppercase; } .header .logo-tres { font-size: 22px; font-weight: 800; color: var(--amarillo); letter-spacing: -0.5px; } .header .logo-dots { display: flex; flex-direction: column; gap: 2px; margin-left: 2px; } .header .logo-dot1 { width: 8px; height: 8px; background: var(--amarillo); border-radius: 50%; } .header .logo-dot2 { width: 6px; height: 6px; background: var(--amarillo); border-radius: 50%; opacity: .7; } .header .usuario { display: flex; align-items: center; gap: 10px; } .header .rol-badge { background: rgba(239, 200, 95, .15); color: var(--amarillo); padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } /* Icono de apagado en vez de la palabra "Salir": ocupa menos y se entiende igual. */ .header .btn-salir { background: rgba(255, 255, 255, .1); color: var(--blanco); border: none; border-radius: 50%; width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; } .header .btn-salir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .header .btn-salir:active { background: rgba(255, 255, 255, .2); } /* BOTTOM NAV — barra de navegación inferior fija, compartida por todas las páginas internas. Cada página marca su propio botón como .active vía el atributo data-pagina en el (ver base.js). */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--negro); border-top: 2px solid var(--amarillo); display: flex; z-index: 100; padding: 6px 0 10px; } .nav-btn { flex: 1; padding: 6px 4px; border: none; background: none; font-size: 10px; color: rgba(255, 255, 255, .35); display: flex; flex-direction: column; align-items: center; gap: 5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; text-decoration: none; transition: color .15s; } .nav-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav-btn.active { color: var(--amarillo); } /* Un apartado que solo ven algunos (Ruta, en la barra del trabajador) nace con [hidden] y se enciende al saber quién es. HACE FALTA ESTA REGLA: `[hidden]{display:none}` del navegador tiene la misma especificidad que `.nav-btn`, y como esta se declara después, GANA — el botón se vería igual con el atributo puesto. Es la sexta vez que pasa en este proyecto. */ .nav-btn[hidden] { display: none; } /* CONTENIDO — envoltorio central de cada página, con espacio reservado abajo para que el bottom-nav fijo no tape el final del contenido. */ .contenido { max-width: 960px; margin: 0 auto; padding: 20px 16px; padding-bottom: 90px; } /* ANIMACIÓN DE CARGA "ESCOBA" — sustituye al texto "Cargando…"/spinner circular. Inspirada en la referencia visual del usuario (organizador-trabajos): una escoba empuja una bolita creciente hasta un recogedor, en bucle, mientras se ondulan las cerdas. Ver public/escoba.js para la lógica de animación — se auto-inicializa sola en cualquier .esc-track que aparezca en el DOM, no hace falta llamarla a mano. */ /* La escoba mide 102 px y el carril solo 50, con overflow visible: el palo asoma unos 57 px por encima. Con 30 px de hueco arriba se salía del recuadro y se plantaba encima de la barra de búsqueda de la pantalla que estuviera cargando. El hueco tiene que dar para el palo entero. */ .esc-track-wrap { display: flex; justify-content: center; padding: 62px 10px 8px; } .esc-track { position: relative; height: 50px; width: 66%; max-width: 230px; overflow: visible; } .esc-linea-base { position: absolute; bottom: 6px; left: 0; width: 100%; height: 1.5px; background: linear-gradient(90deg, transparent, #e2e2e2 12%, #e2e2e2 88%, transparent); z-index: 1; } .esc-bolita { position: absolute; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; z-index: 3; background: radial-gradient(circle at 35% 30%, #f6dc93, #EFC85F 60%, #c79f2e 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left 0.7s cubic-bezier(.65, 0, .35, 1), width 0.7s cubic-bezier(.65, 0, .35, 1), height 0.7s cubic-bezier(.65, 0, .35, 1); } .esc-recogedor { position: absolute; bottom: 0; right: 2px; width: 36px; height: 34px; z-index: 6; transform-origin: 75% 95%; transition: transform .18s ease; } .esc-recogedor.recibiendo { animation: escRecWobble .3s ease; } @keyframes escRecWobble { 0% { transform: rotate(0deg); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } .esc-escoba { position: absolute; bottom: 5px; width: 46px; height: 102px; z-index: 5; transform-origin: bottom center; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .13)); transition: left 0.7s cubic-bezier(.65, 0, .35, 1); } .esc-cerda { transform-origin: 50% 0%; } .esc-texto { font-size: 12px; color: #aaa; margin-top: 10px; letter-spacing: .2px; text-align: center; } /* BOTONES */ .btn-primary { width: 100%; padding: 15px; background: var(--negro); color: var(--amarillo); border: none; border-radius: 12px; font-size: 16px; font-weight: 700; letter-spacing: .3px; transition: opacity .15s, transform .1s; } .btn-primary:active { opacity: .85; transform: scale(.98); } .btn-primary:disabled { opacity: .5; cursor: not-allowed; } /* ALERTAS */ .alert { padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; margin-bottom: 12px; display: none; } /* LOS AVISOS FLOTAN POR ENCIMA DE TODO (03/09/2026). * * Antes eran un bloque más del principio de la página, sin posición ni z-index. Y eso tenía * una consecuencia que no se veía leyendo el CSS: **cuando algo falla dentro de un modal, el * aviso se pinta DETRÁS del modal**, arriba del todo, donde nadie lo ve. Desde fuera se * traduce en «le doy a Responder, no pasa nada y el cuadro no se va» — que es exactamente lo * que se reportó. El fallo estaba contado; simplemente no se podía leer. * * Así que se sacan a flotar, centrados arriba y por encima de los modales (que van a 3000). * Son mensajes que se van solos a los pocos segundos, así que un cartel flotante es además lo * que les corresponde: ocupando sitio en el flujo empujaban la página hacia abajo al aparecer * y la subían de golpe al irse. * * Solo afecta a `.alert.show`, que es la clase que se enciende y se apaga. Un aviso * permanente de una pantalla usa su propia clase (`.recl-aviso`, `.aviso-migracion`) y se * queda donde está. */ .alert.show { display: block; position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 4000; width: calc(100% - 24px); max-width: 520px; margin: 0; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); } /* UN AVISO QUE VIVE EN LA PÁGINA, NO FLOTANDO (05/09/2026). Hay avisos que no son una notificación de algo que acaba de pasar, sino parte de la pantalla: «faltan cuentas por clasificar» en PyG está ahí siempre, y flotando sobre el contenido tapaba lo que se venía a leer. Antes se apañaba con un `style="position:static"` a mano en cada sitio, y eso ESTABA MAL: quitaba el `position` pero NO el `transform: translateX(-50%)`, que se sigue aplicando a un elemento estático. El aviso salía desplazado media anchura hacia la izquierda y se veía cortado — que es exactamente como se reportó. Con una clase se apagan las cinco cosas a la vez, y no hay que acordarse de ninguna. */ .alert.show.alert-en-linea { position: static; transform: none; left: auto; width: auto; max-width: none; margin-bottom: 12px; box-shadow: none; } .alert-ok { background: #eafaf0; color: #116636; } .alert-err { background: #fdecec; color: #8a1f1f; } /* Aviso informativo (ni error ni confirmación): algo que conviene mirar, pero que no impide seguir. Ej. el consumo disparado de un vehículo en Repostajes. */ .alert-aviso { background: #fff7e6; color: #8a5a00; } /* Aviso con varias cosas dentro (p. ej. un vehículo por línea en Repostajes): el titular arriba y debajo un renglón por cada una, en vez de todo seguido en un párrafo. */ .aviso-titulo { font-weight: 700; margin-bottom: 6px; } /* El .alert lo pone todo en negrita; aquí solo debe destacar el nombre del vehículo. */ .aviso-linea { padding: 4px 0; line-height: 1.4; font-weight: 500; } .aviso-linea + .aviso-linea { border-top: 1px solid rgba(138, 90, 0, .15); } /* EXPORTAR — barra de Excel/PDF encima de un listado (ver compartido/exportar.js). */ .exportar-barra { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; } .exportar-btn { border: 1.5px solid var(--borde); background: var(--blanco); border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--negro); } .exportar-btn:active { background: var(--amarillo); } /* FILA DE ACCIONES — dos o tres acciones principales en una sola línea y, al final, un menú de tres puntos con las secundarias (PDF, Excel…). Mismo criterio que las tarjetas con menú: lo que se usa mucho se ve, lo demás se guarda para no llenar la pantalla. */ .acciones-fila { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; } .acciones-fila .accion-btn { flex: 1; min-width: 0; border: 1.5px solid var(--borde); background: var(--gris-suave); border-radius: 10px; padding: 10px 8px; font-size: 12px; font-weight: 700; color: var(--negro); text-align: center; text-decoration: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .acciones-fila .accion-btn:active { background: var(--amarillo); } .acciones-menu { position: relative; flex-shrink: 0; } .acciones-menu > .menu-btn { width: 40px; height: 100%; border: 1.5px solid var(--borde); background: var(--blanco); border-radius: 10px; font-size: 18px; line-height: 1; color: var(--gris-medio); } .acciones-menu > .menu-btn:active { background: var(--gris-suave); } .acciones-menu .menu-lista { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 10; min-width: 170px; background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); overflow: hidden; } .acciones-menu .menu-lista.abierto { display: block; } .acciones-menu .menu-lista button { display: block; width: 100%; border: none; border-bottom: 1px solid var(--borde); background: none; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--negro); text-align: left; } .acciones-menu .menu-lista button:last-child { border-bottom: none; } .acciones-menu .menu-lista button:active { background: var(--gris-suave); } /* Título de sección con una acción a la derecha, en la misma línea (el ⋮ de exportar sobre un listado, por ejemplo). El h3 pierde su margen inferior porque el subrayado lo pone la propia fila. */ .seccion-titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1.5px solid var(--borde); } /* Con el selector corto no basta: .form-section h3 (calendario.css) tiene la misma fuerza y se carga después, así que el título se quedaba con su propio subrayado y salían dos líneas grises, una bajo el texto y otra bajo la fila. */ .seccion-titulo-fila h3, .form-section .seccion-titulo-fila h3 { flex: 1; min-width: 0; margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* Buscador (o desplegable) con el menú de tres puntos al lado, para no gastar una línea entera en dos botones que se usan de uvas a peras. */ .buscador-fila { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; } .buscador-fila > .buscador-input, .buscador-fila > select { flex: 1; min-width: 0; margin-bottom: 0; } /* Pestañas con un botón de acción al lado (p. ej. el PDF de Semana/Zonas/Mes): así el botón no se come una línea entera para él solo. El margen inferior lo lleva la fila, no las pestañas, para que ambos queden a la misma altura. */ /* LAS PESTAÑAS. Aquí, y no en la hoja de un módulo (31/08/2026). * * Vivían en rrhh.css, que solo cargan las pantallas de RRHH — pero las usan DIECISÉIS * pantallas: propuestas, calidad, contratos, alta de cliente, albaranes, compras, facturación, * la ficha de proveedor, Sistema, trabajos sueltos… En las quince que no cargaban esa hoja las * pestañas salían como los botones grises que pinta el navegador cuando no hay estilo, que es * lo que se veía en el ordenador («se ven un cuadrado con el texto»). * * En el móvil llamaba menos la atención porque ocupan el ancho entero de la pantalla y parecen * una barra; en un monitor ancho quedan sueltos y se ve que son botones sin vestir. */ .tabs { display: flex; background: var(--gris-suave); border-radius: 12px; padding: 3px; margin-bottom: 12px; } /* Sin esto, un