.tab-container { position: relative; border-radius: 3px; background: #ffffff; border-top: 3px solid #d2d6de; margin-bottom: 20px; width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); padding: 30px; } .box-body>.table { margin-bottom: 0; } .with-border { border-bottom: 1px solid #f4f4f4; } .box-header { color: #444; display: block; padding: 10px; position: relative; } .box-title { display: inline-block; font-size: 18px; margin: 0; line-height: 1; } .box-body { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 10px; } .table-reporte{ width: 100%; max-width: 100%; margin-bottom: 20px; color: #000; } .table-bordered { border: 1px solid #f4f4f4; } .table-bordered td, .table-bordered th { border: 1px solid #dee2e6; } /* Mensaje de error en formularios (ej. credenciales inválidas en login) */ .error { margin-top: 12px; padding: 10px 14px; background-color: #fdecea; color: #b3261e; border: 1px solid #f5c2c0; border-left: 4px solid #b3261e; border-radius: 4px; font-size: 14px; font-weight: 500; text-align: center; } /* ------------------------------------------------------------------------- Fix de layout: neutralizar el fondo verde de .pleca_pasos dentro de #Paso1 en todas las páginas que heredan de base.html. Contexto: .pleca_pasos (definida en estilos_general.css) es el contenedor que envuelve {% block content %} en base.html y trae por defecto un gradiente verde de pantalla completa. Como main#contRegistro fuerza min-height: calc(100vh - 190px), ese gradiente se expandía hasta el footer incluso cuando el contenido interno era pequeño (ver el área verde que rellenaba toda la pantalla en /cfdi/nuevo, /cfdi, etc.). La solución es dejar que .pleca_pasos actúe sólo como un wrapper neutro del contenido, y que el color verde se aplique únicamente en los componentes que lo piden expresamente (títulos con .titSecciones, botones .verde_t, etc.). Se limita al selector #Paso1 > .pleca_pasos para no impactar a otras pantallas que pudieran heredar .pleca_pasos fuera de este flujo. Se usa !important porque estilos_registro.css redeclara .pleca_pasos dentro de un @media con gradiente verde, y esa regla, aunque de menor especificidad, puede filtrarse en algunos navegadores si el CSS se recarga con caché parcial. !important garantiza que gane siempre. ------------------------------------------------------------------------- */ #Paso1 > .pleca_pasos { background: #fff !important; color: inherit; min-height: 0 !important; border-bottom: none !important; padding: 0 !important; /* -------------------------------------------------------------------- FIX dropdown #menuDerecha tapado por el contenido: estilos_general.css define .pleca_pasos con position:relative y z-index:11. Eso crea un contexto de apilamiento que queda POR ENCIMA del .page_header (z-index:1) donde vive el menú. Como resultado, la tabla / filtros de la página se pintan sobre el dropdown abierto, sin importar qué z-index tenga el dropdown interno (queda atrapado en el stacking context de .page_header). Neutralizamos position/z-index para que .pleca_pasos deje de crear contexto propio y el menú pueda flotar por encima. -------------------------------------------------------------------- */ position: static !important; z-index: auto !important; } /* También el contenedor padre (.boxGral) y el main se aseguran en blanco para que no quede ningún rastro de verde alrededor del contenido. */ .boxGral, main#contRegistro { background: #fff; } /* ------------------------------------------------------------------------- Barra verde superior (cabecera de página). Reemplaza al antiguo gradiente expandido de .pleca_pasos como "franja de cabecera" en la parte alta de cada pantalla. Contiene: - a la izquierda un título opcional (.page_header_title) con su ícono decorativo (.page_header_icon), - a la derecha el menú hamburguesa (#menuDerecha) que se posiciona absolutamente dentro de .page_header. En login se llena el título con "INICIO DE SESIÓN" (vía bloque page_title). En páginas internas queda sólo la franja con el menú. ------------------------------------------------------------------------- */ .page_header { background: linear-gradient(#235B4E, #10312B); border-bottom: 6px solid #BB965C; min-height: 70px; padding: 18px 90px 18px 30px; /* padding-right deja espacio para el menú */ display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; } .page_header_title { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin: 0; line-height: 1.2; display: flex; align-items: center; gap: 12px; } /* Ícono decorativo junto al título del header. Usa FontAwesome (ya cargado en base.html). Se pinta en blanco directamente sobre el gradiente verde, sin fondo circular, para integrarse limpiamente. */ .page_header_icon { color: #fff; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; } /* Cuando el bloque page_title está vacío (páginas internas) el

igual ocupa espacio vertical por defecto; lo colapsamos para que la barra mantenga su altura controlada por .page_header.min-height. */ .page_header_title:empty { display: none; } /* El menú hamburguesa (#menuDerecha) ahora vive dentro de .page_header en lugar de .boxGral. Su regla original (top: 20px; right: 20px) lo colocaba relativo a .boxGral; al cambiar de contexto de posicionamiento queda descolocado, así que lo centramos verticalmente dentro de la barra y conservamos su offset derecho. */ .page_header #menuDerecha { top: 50%; right: 20px; transform: translateY(-50%); } /* ------------------------------------------------------------------------- Reparación visual del contenido del dropdown del menú hamburguesa. (v2 endurecida contra conflictos con estilos_registro.css) El HTML de partials/nav.html anida