/* ==========================================================================
   TEMA PÚBLICO: LIGHT CYBERPUNK PARA EA TECHNOLOGY
   Afecta a: Páginas públicas de suscripción, confirmación y desuscripción
   ========================================================================== */

/* 1. FONDO GLOBAL (Estilo corporativo limpio) */
body, html {
    background-color: #f4f7f9 !important;
    background-image: linear-gradient(135deg, #f4f7f9 0%, #eef2f5 100%) !important;
    color: #2c3e50 !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    min-height: 100vh;
}

/* 2. CONTENEDOR PRINCIPAL (La tarjeta central donde va el formulario) */
.wrap, .container, .box, section.section > .container > .column {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 210, 255, 0.1) !important;
    border-top: 4px solid #00d2ff !important; /* Acento superior Neón Cyan */
    padding: 2.5rem !important;
    margin-top: 3rem !important;
}

/* 3. TIPOGRAFÍA Y TÍTULOS */
h1, h2, h3, .title {
    color: #1a252f !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}
/* Subrayado elegante para el título principal */
h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #00d2ff, #0072ff);
    margin-top: 12px;
    border-radius: 2px;
}
p, label { 
    color: #546e7a !important; 
    font-weight: 500 !important;
}
a { 
    color: #0091ea !important; 
    text-decoration: none !important; 
    transition: color 0.3s ease !important; 
}
a:hover { 
    color: #e94560 !important; /* Acento magenta interactivo */
}

/* 4. FORMULARIOS (Cajas de texto de correo) */
.input, input[type="email"], input[type="text"] {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #2c3e50 !important;
    border-radius: 6px !important;
    padding: 0.75rem !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}
.input:focus, input:focus {
    border-color: #00d2ff !important;
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.15) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

/* 5. BOTONES DE ACCIÓN (Suscribirse / Desuscribirse) */
.button, button[type="submit"] {
    background: linear-gradient(135deg, #00d2ff, #0072ff) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    padding: 0.75rem 2rem !important;
    height: auto !important;
    box-shadow: 0 4px 10px rgba(0, 114, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
}
.button:hover, button[type="submit"]:hover {
    box-shadow: 0 6px 15px rgba(0, 114, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* 6. CAJAS DE ALERTA (Mensajes de éxito o error) */
.notification {
    border-radius: 8px !important;
    border-left: 4px solid transparent !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}
/* Alerta de éxito (ej. Suscripción confirmada) */
.notification.is-success {
    background-color: #f0fdf4 !important; 
    color: #166534 !important;
    border-left-color: #22c55e !important;
}
/* Alerta informativa (ej. Desuscripción) */
.notification.is-info, .notification.is-warning {
    background-color: #f0f9ff !important; 
    color: #0369a1 !important;
    border-left-color: #0ea5e9 !important;
}

/* ==========================================================================
   CENTRAR EL LOGO DE EA TECHNOLOGY (VERSIÓN BLINDADA)
   ========================================================================== */
/* 1. Anulamos cualquier flotación y forzamos el centrado de la imagen */
.wrap img, .box img, img.logo, .logo, .app-header img {
    display: block !important;
    float: none !important; /* <--- Este era el posible culpable */
    margin: 0 auto 1.5rem auto !important;
    max-height: 90px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* 2. Si Listmonk envolvió la imagen en un enlace clicable, centramos el contenedor */
.wrap > a:first-child, .box > a:first-child, form > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto 1.5rem auto !important;
    float: none !important;
}