/* ============================================
   Botón flotante WhatsApp "Pedir Cita"
   Clínica Isabel Bonilla — kadence-child
   ============================================ */
 
/* Colores de marca reutilizados en todo el botón */
:root {
    --ib-teal: #4E7E7F;   /* color de fondo por defecto */
    --ib-rosa: #B85B74;   /* color de fondo al hacer hover */
    --ib-blanco: #FFFFFF; /* color de texto e icono, en todos los estados */
}
 
.float {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: var(--ib-teal);
    color: var(--ib-blanco);
    text-decoration: none;
    box-shadow: 2px 2px 3px #999;
    z-index: 999;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;

    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;

    border-radius: 25px;
    height: 50px;
    width: max-content;
    min-width: 110px;  /* suelo: nunca se comprime por debajo de esto, quepa lo que quepa */
    max-width: 90vw;    /* techo: nunca ocupa más del 90% del ancho de pantalla, para móviles muy estrechos */
    padding: 0 8px 0 6px;
}
 
/* Fuerza el blanco y quita el subrayado en TODOS los estados del enlace
   (normal, visitado, activo) — sin esto, el navegador puede aplicar
   su estilo de enlace por defecto (azul + subrayado) */
.float,
.float:link,
.float:visited,
.float:active {
    color: var(--ib-blanco);
    text-decoration: none;
}
 
.float i {
    color: var(--ib-blanco);
    font-size: 22px; /* tamaño del icono de WhatsApp */
    line-height: 1;
}
 
.float-text {
    color: var(--ib-blanco);
    font-size: 15px; /* tamaño del texto "Pedir Cita" */
    font-weight: 600;
    white-space: nowrap; /* evita que el texto se parta en dos líneas */
    text-decoration: none;
}
 
/* Estado hover: cambia de teal a rosa y hace un pequeño vaivén (shake) */
.float:hover {
    text-decoration: none;
    color: var(--ib-blanco);
    background-color: var(--ib-rosa);
    animation: shake 1s;
    animation-iteration-count: infinite;
}
 
/* Refuerza blanco también en hover, por si alguna regla del tema
   intentara cambiar el color del icono/texto al pasar el ratón */
.float:hover i,
.float:hover .float-text {
    color: var(--ib-blanco);
    text-decoration: none;
}
 
/* Animación de vaivén horizontal en hover.
   Usa calc() sobre translateX(-50%) porque el botón ya está centrado
   con ese mismo transform — si se pusiera translateX(5px) a secas,
   el botón "saltaría" fuera del centro en vez de vibrar en su sitio. */
@keyframes shake {
    0%   { transform: translateX(-50%); }
    25%  { transform: translateX(calc(-50% + 5px)); }
    50%  { transform: translateX(calc(-50% - 5px)); }
    75%  { transform: translateX(calc(-50% + 5px)); }
    100% { transform: translateX(-50%); }
}
 
/* Versión mobile: mismo diseño centrado, ligeramente más compacto */
@media (max-width: 400px) {
    .float {
        height: 46px;
        width: 80%; /* el ancho se ajusta al contenido (icono + texto), no es fijo */
        padding: 0 8px 0 6px;
    }
    .float-text {
        font-size: 14px;
    }
}