/* =========================================================
   BURBUJA DE AYUDA FLOTANTE
   Posición fija + estilo visual principal
========================================================= */

#help-bubble {
    position: fixed;
    bottom: 25px;
    right: 25px;

    width: 60px;
    height: 60px;
    border-radius: 50%;

    background: linear-gradient(135deg, #005eb8, #007bff);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    cursor: pointer;
    z-index: 9999;

    box-shadow: 0 10px 25px rgba(0, 94, 184, 0.35);
    transition: transform .2s ease, box-shadow .2s ease;

    /* Animación flotante suave */
    animation: bubble-float 3s ease-in-out infinite;
}

/* Hover: ligera ampliación + sombra más intensa */
#help-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 35px rgba(0, 94, 184, 0.45);
}


/* =========================================================
   ICONO DE LA BURBUJA
   Se fuerza color y estilo para evitar herencias raras
========================================================= */

#help-bubble .help-icon {
    font-size: 28px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    line-height: 1;
    color: #ffdd57;

    /* Neutraliza emojis de color */
    filter: grayscale(1) brightness(2);
}


/* =========================================================
   ANIMACIÓN FLOTANTE (UP / DOWN)
========================================================= */

@keyframes bubble-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}


/* =========================================================
   TOOLTIP "¿Te ayudamos?"
========================================================= */

.help-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);

    background: #1f2937;
    color: #fff;

    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Flecha del tooltip */
.help-tooltip::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);

    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #1f2937;
}

/* Mostrar tooltip al hover */
#help-bubble:hover .help-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}


/* =========================================================
   MODAL OVERLAY (FONDO OSCURO)
========================================================= */

#help-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
}

/* Estado oculto */
#help-modal.hidden {
    display: none;
}


/* =========================================================
   CONTENIDO DEL MODAL
========================================================= */

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 400px;

    margin: 10% auto;
    padding: 20px;

    border-radius: 8px;
    position: relative;
}


/* =========================================================
   FORMULARIO – NORMALIZACIÓN DE INPUTS
========================================================= */

#help-form input[type="email"],
#help-form input[type="tel"] {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 12px;
    margin-bottom: 10px;

    font-size: 15px;
    line-height: 1.4;
    font-family: inherit;

    border: 1px solid #ccc;
    border-radius: 6px;
}

/* Quitar estilos raros en móviles (teléfono) */
#help-form input[type="tel"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}


/* =========================================================
   BOTÓN CERRAR MODAL (X)
========================================================= */

#close-help {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    line-height: 1;

    color: #666;
    background: #f3f3f3;

    border-radius: 50%;
    cursor: pointer;

    transition: background 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
}

/* Hover del botón cerrar */
#close-help:hover {
    background: #e0e0e0;
    color: #000;
    transform: scale(1.05);
}

/* Click (feedback táctil) */
#close-help:active {
    transform: scale(0.95);
}