/* cssFooter.css — estilos necesarios SOLO para <footer>
     Ubicación: cssApp/cssFooter.css
     Uso: incluir en <head> de la página que vaya a usar este footer.
     Requisitos: Bootstrap 5 (para grid general si aplica).

     - Contiene únicamente las reglas que afectan al footer y su texto
         para facilitar mantenimiento y pruebas.
     - No modifica el resto de la página.

     Autores: equipo MesasDeJusticia — generado por GitHub Copilot
*/

        footer {
            text-align: center;
            font-size: 0.75rem;
            padding: 0.34rem 1rem;
            color: var(--brand-contrast);
            /* Fondo institucional con gradiente, ampliando la zona clara central */
            background: rgb(0,40,68);
            background: -moz-linear-gradient(90deg, rgba(0,40,68,1) 0%, rgba(0,45,76,1) 27%, rgba(33,97,140,0.9360119047619048) 60%, rgba(0,45,76,1) 73%, rgba(0,40,68,1) 100%);
            background: -webkit-linear-gradient(90deg, rgba(0,40,68,1) 0%, rgba(0,45,76,1) 27%, rgba(33,97,140,0.9360119047619048) 60%, rgba(0,45,76,1) 73%, rgba(0,40,68,1) 100%);
            background: linear-gradient(90deg, rgba(0,40,68,1) 0%, rgba(0,45,76,1) 27%, rgba(33,97,140,0.9360119047619048) 60%, rgba(0,45,76,1) 73%, rgba(0,40,68,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002844",endColorstr="#002844",GradientType=1);

            border-top: 2px solid var(--brand-border-light);
            box-shadow: var(--brand-shadow-footer);

            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.75rem;
            transition: background-color 0.3s ease;
            min-height: 40px;

            /* Alinear el footer a la parte inferior de la página */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }

        /* Se mantiene el mismo gradiente también al pasar el mouse */
        footer:hover {
            background: rgb(0,40,68);
            background: -moz-linear-gradient(90deg, rgba(0,40,68,1) 0%, rgba(0,45,76,1) 27%, rgba(33,97,140,0.9360119047619048) 60%, rgba(0,45,76,1) 73%, rgba(0,40,68,1) 100%);
            background: -webkit-linear-gradient(90deg, rgba(0,40,68,1) 0%, rgba(0,45,76,1) 27%, rgba(33,97,140,0.9360119047619048) 60%, rgba(0,45,76,1) 73%, rgba(0,40,68,1) 100%);
            background: linear-gradient(90deg, rgba(0,40,68,1) 0%, rgba(0,45,76,1) 27%, rgba(33,97,140,0.9360119047619048) 60%, rgba(0,45,76,1) 73%, rgba(0,40,68,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002844",endColorstr="#002844",GradientType=1);
        }

        footer img {
            margin: 0 1rem;
            height: 30px;
            width: auto;
            opacity: 0.95;
            transition: opacity 0.3s ease, transform 0.3s ease;
            vertical-align: middle;
        }

        footer img:hover {
            opacity: 1;
            transform: scale(1.05);
        }

        footer .footer-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            vertical-align: middle;
            /* 1. Definición de la fuente con fallbacks */
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            
            /* 2. Tamaño pequeño pero legible (mínimo recomendado 12px) */
            font-size: 0.72rem;
            
            /* 3. Peso regular: Evita que las letras se vean borrosas por exceso de grosor */
            font-weight: 400;
            
            /* 4. Letter spacing: Crucial para nitidez en textos pequeños */
            letter-spacing: 0.08em;
            
            /* 5. Interlineado: Da "aire" al texto */
            line-height: 1.5;
            
            /* 6. Suavizado de fuente (Efecto ultra-nítido en Mac y navegadores modernos) */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            
            /* 7. Color: Un gris oscuro suave es más moderno que el negro puro (#000) */
            /*color: #6b7280; */

        }

        /* Tablets (entre 576px y 992px): mantener footer compacto y legible */
        @media (min-width: 576px) and (max-width: 991.98px) {
            footer {
                font-size: 0.78rem;
                padding: 0.4rem 1rem;
            }
        }

        @media (max-width: 576px) {
            footer {
                font-size: 0.75rem;
                padding: 0.6rem 0.75rem;
                flex-direction: column;
                gap: 0.4rem;
                min-height: auto;
            }

            footer img {
                margin: 0.15rem 0;
                height: 30px;
            }
        }        
/* End of cssFooter.css */