/* ===================================================================
   FIX: CENTRADO VERTICAL DEL BOTÓN MARQUEE "Registrarse al Sistema"
   ===================================================================
   
   PROBLEMA: El texto del botón con animación marquee (que se mueve de 
   izquierda a derecha) aparece pegado al borde inferior del botón.
   
   CAUSA: El line-height: 1.2 en el span del botón marquee rompe el 
   centrado vertical que tiene el botón base (height: 60px, line-height: 60px).
   
   SOLUCIÓN: Usar flexbox con align-items: center para centrar 
   verticalmente el texto sin afectar la animación horizontal.
   
   ARCHIVOS AFECTADOS:
   - Este fix solo afecta a: .rbt-btn.rbt-marquee-btn
   - No afecta otros botones ni elementos del sistema
   
   FECHA: 2025-11-29
   =================================================================== */

/* ===== CENTRADO VERTICAL DEL SPAN PRINCIPAL ===== */
.rbt-btn.rbt-marquee-btn span {
    display: inline-flex !important;
    align-items: center !important; /* ← CENTRADO VERTICAL */
    justify-content: center !important; /* ← CENTRADO HORIZONTAL */
    line-height: 45px !important; /* Altura del botón btn-sm */
    height: 45px !important; /* Altura fija del botón btn-sm */
    vertical-align: middle !important;
}

/* ===== CENTRADO VERTICAL DEL PSEUDO-ELEMENTO ::after ===== */
/* El ::after contiene el texto duplicado que se mueve en la animación */
.rbt-btn.rbt-marquee-btn span::after {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 45px !important;
    height: 45px !important;
    vertical-align: middle !important;
}

/* ===== MANTENER CENTRADO EN BOTONES PEQUEÑOS (btn-sm) ===== */
.rbt-btn.rbt-marquee-btn.btn-sm span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 45px !important;
    height: 45px !important;
    vertical-align: middle !important;
}

.rbt-btn.rbt-marquee-btn.btn-sm span::after {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 45px !important;
    height: 45px !important;
    vertical-align: middle !important;
}

/* ===== RESPONSIVE: MANTENER CENTRADO EN TODOS LOS TAMAÑOS ===== */
@media (max-width: 1199px) {
    .rbt-btn.rbt-marquee-btn span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
}

@media (max-width: 767px) {
    .rbt-btn.rbt-marquee-btn span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
}

/* ===== NOTAS TÉCNICAS ===== 
   
   ✅ La animación marquee (btnTxtMarqueeX) sigue funcionando porque:
      - Solo cambia transform: translateX(-200%)
      - No depende del line-height
      - El display: inline-flex es compatible con transform
   
   ✅ El efecto hover sigue funcionando porque:
      - No modificamos las propiedades de hover
      - Solo ajustamos el centrado vertical
   
   ✅ Los colores y gradientes no se afectan porque:
      - No tocamos background, border, ni color
      - Solo modificamos display y alignment
   
   ✅ Es reversible:
      - Eliminar el link en head.php revierte todo
      - No modifica archivos originales del tema
   
   ================================== */