.dlm-flag-float {
    position: fixed;
    top: 28px;
    right: 28px;
    z-index: 99999;
    background: linear-gradient(135deg, #ffffff 80%, #f3f3f3 100%);
    border-radius: 50%;
    box-shadow:
        0 6px 32px 0 rgba(24,24,44,0.17),
        0 1.5px 6px 0 rgba(0,0,0,0.14),
        0 0 0 3px #e2e2e9;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        box-shadow 0.25s cubic-bezier(.4,2.3,.3,1),
        transform 0.18s cubic-bezier(.44,2.2,.3,1),
        background 0.3s;
    backdrop-filter: blur(3px);
    border: 1.7px solid #eaeaea;
}

.dlm-flag-float:hover, .dlm-flag-float:focus-within {
    box-shadow:
        0 8px 36px 0 rgba(26, 84, 197, 0.14),
        0 0px 16px 0 rgba(44,44,74,0.13),
        0 0 0 6px #afd9f9a8;
    transform: scale(1.13) rotate(-4deg);
    background: linear-gradient(135deg, #f4fbff 70%, #e6f3fe 100%);
    border: 2.3px solid #cde6fa;
}

.dlm-flag-btn {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    transition: background 0.18s;
}

.dlm-flag-btn:active {
    background: rgba(100, 179, 255, 0.09);
}

.dlm-flag-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow:
        0 1.5px 8px 0 #cbe9ff66,
        0 0 0 2.3px #d1e7fa;
    border: 1.5px solid #e3e3e3;
    background: #fff;
    transition:
        box-shadow 0.18s,
        border 0.18s;
}

/* Detalle sutil de animación bandera */
.dlm-flag-img {
    animation: flag-pop 0.4s cubic-bezier(.42,1.64,.65,.89);
}
@keyframes flag-pop {
    0% { transform: scale(0.7) rotate(-18deg); opacity: 0.3; }
    70% { transform: scale(1.1) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg);}
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
    .dlm-flag-float {
        background: linear-gradient(135deg, #232536 80%, #181828 100%);
        border: 1.7px solid #222334;
        box-shadow:
            0 6px 32px 0 rgba(24,24,44,0.38),
            0 1.5px 6px 0 rgba(0,0,0,0.23),
            0 0 0 2.5px #232536;
    }
    .dlm-flag-float:hover, .dlm-flag-float:focus-within {
        box-shadow:
            0 8px 36px 0 rgba(94,184,255,0.13),
            0 0px 16px 0 rgba(44,64,174,0.14),
            0 0 0 6px #3f6ea68a;
        background: linear-gradient(135deg, #29304a 70%, #22253a 100%);
        border: 2.3px solid #2f4858;
    }
    .dlm-flag-img {
        box-shadow:
            0 1.5px 8px 0 #66b6ff44,
            0 0 0 2.3px #3c5874;
        border: 1.5px solid #29304a;
        background: #20202e;
    }
}

@media (max-width: 900px) {
    .dlm-flag-float {
        top: 18px !important;
        right: 105px !important;    /* Ajusta aquí hasta que quede perfecto */
        left: auto !important;
        bottom: auto !important;
        width: 45px;
        height: 45px;
        min-width: 0;
        min-height: 0;
        box-shadow:
            0 2px 8px 0 rgba(24,24,44,0.10),
            0 0.7px 2px 0 rgba(0,0,0,0.08),
            0 0 0 1px #dbe2e9;
        padding: 0;
    }
    .dlm-flag-img {
        width: 40px;
        height: 40px;
        min-width: 0;
        min-height: 0;
    }
}
/* Oculta el flotante cuando tiene la clase "dlm-hide" (se añade por JS) */
.dlm-flag-float.dlm-hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(.42,1.8,.65,.88);
}

/* Opcional: asegura transición suave solo en móviles */
@media (max-width: 900px) {
    .dlm-flag-float {
        transition:
            opacity 0.32s cubic-bezier(.42,1.8,.65,.88),
            box-shadow 0.25s cubic-bezier(.4,2.3,.3,1),
            transform 0.18s cubic-bezier(.44,2.2,.3,1),
            background 0.3s;
    }
}