/* ============================================================================= Libro Mayor — hoja de estilo La ESTRUCTURA sigue la de FacturaDirecta porque es la que la usuaria tiene en los dedos: barra superior con pestañas centradas, fondo gris claro, tarjetas blancas con esquinas redondeadas, título a la izquierda y botón primario a la derecha, listados con fila de filtros encima. Los COLORES son los de Legato Translations, no los suyos: verde #2A651D de las cabeceras de tabla del PDF y verde #316245 del logotipo. Ni una pizca del azul de FacturaDirecta. ========================================================================== */ /* Android infla por su cuenta el texto de los bloques que considera «contenido principal» (font boosting). Agranda las LETRAS sin recolocar las cajas, así que en un menú los rótulos se salen de su sitio y se pisan unos con otros. Aquí los tamaños ya están pensados para el móvil: que no los toque nadie. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :root { --verde: #2A651D; /* cabeceras de tabla, botón primario */ --verde-oscuro: #1E4A15; --logo: #316245; /* el verde del logotipo */ --verde-suave: #E4EFE3; --fondo: #EDF1EC; /* el gris del lienzo */ --tarjeta: #FFFFFF; --tinta: #1A211D; --tinta-2: #3B453F; --suave: #5C665F; --tenue: #8A948D; --linea: #E2E7E2; --linea-fuerte: #CBD3CB; --gris-fila: #F5F7F4; --rojo: #9B2C2C; --rojo-suave: #FBEAE8; --ambar: #8A5A12; --ambar-suave: #FAF2E2; --sombra: 0 1px 2px rgba(26,33,29,.06), 0 1px 3px rgba(26,33,29,.05); } * { box-sizing: border-box; } /* Roboto, que es la que usa FacturaDirecta. Se carga de Google Fonts con una pila de reserva completa: si el servidor de fuentes no responde, la página sigue leyéndose igual, solo cambia el tipo. */ body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; letter-spacing: .01em; } a { color: var(--logo); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 3px; } /* ------------------------------------------------------------- barra superior */ .barra { background: #fff; border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 40; } /* NADA de `overflow-x: hidden` en el body. Se puso para evitar el scroll horizontal de la página y lo que hacía era RECORTAR: en el móvil la tabla de archivos medía 1198 px dentro de una ventana de 420, y el fichero estaba ahí pero no había forma de llegar a él. La solución no es tapar el desbordamiento sino que no lo haya: menos pestañas arriba y tablas que se apilan abajo. */ .barra-int { max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 18px; height: 54px; min-width: 0; /* deja que las pestañas se encojan */ } .marca { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .marca img { height: 26px; width: auto; display: block; } .marca span { font-weight: 500; font-size: 15px; color: var(--logo); letter-spacing: -.01em; white-space: nowrap; } /* Las pestañas ruedan en horizontal SIEMPRE que no quepan, no sólo en el móvil. Con doce pestañas dejan de caber ya en un portátil, y lo que pasaba entonces era que se desbordaba la PÁGINA ENTERA: aparecía una barra de scroll horizontal abajo del todo y el contenido se movía de lado. */ /* OJO con el selector: `> a`, hijos DIRECTOS. El menú «Más» cuelga de este mismo