.btn-red {
    background: #FF0006;
    background-image: -webkit-linear-gradient(top, #FF0006, #640303);
    background-image: -moz-linear-gradient(top, #FF0006, #640303);
    background-image: -ms-linear-gradient(top, #FF0006, #640303);
    background-image: -o-linear-gradient(top, #FF0006, #640303);
    background-image: linear-gradient(to bottom, #FF0006, #640303);
    -webkit-border-radius: 10;
    -moz-border-radius: 10;
    border-radius: 10px;
    font-family: "coomic", cursive, sans-serif;
    color: #ffffff;
    font-size: 20px;
    width: 297px;
    padding: 6px 14px;
    margin: 0 auto 5px auto;
    border: solid #ffffff 2px;
    text-decoration: none;
    z-index: 10;
    min-width: 0%;
    max-width: 90%;
    position: relative;
    text-align: center;
}

.btn-red:hover {
    background: #d90000;
    background-image: linear-gradient(to bottom, #ff3030, #9b0000);
    border-color: #ffd84a;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .65);
    box-shadow:
        inset 0 0 14px rgba(0, 0, 0, .28),
        0 0 8px rgba(255, 216, 74, .35);
}

.btn-green {
    background: #00ff60;
    background-image: -webkit-linear-gradient(top, #00ff60, #12bb00);
    background-image: -moz-linear-gradient(top, #00ff60, #12bb00);
    background-image: -ms-linear-gradient(top, #00ff60, #12bb00);
    background-image: -o-linear-gradient(top, #00ff60, #12bb00);
    background-image: linear-gradient(to bottom, #00ff60, #12bb00);
    -webkit-border-radius: 10;
    -moz-border-radius: 10;
    border-radius: 10px;
    font-family: "coomic", cursive, sans-serif;
    color: #ffffff;
    font-size: 20px;
    width: 297px;
    margin: 0 auto 5px auto;
    border: solid #ffffff 2px;
    text-decoration: none;
    z-index: 10;
    min-width: 0%;
    max-width: 90%;
    position: relative;
    text-align: center;
}

.btn-green:hover {
    background: #00c93f;
    background-image: linear-gradient(to bottom, #14d94f, #057c00);
    border-color: #ffe96b;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .65);
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, .22),
        0 0 8px rgba(255, 233, 107, .35);
}

.btn3 {
    background: #CCCCCC;
    background-image: -webkit-linear-gradient(top, #CCCCCC, #999999);
    background-image: -moz-linear-gradient(top, #CCCCCC, #999999);
    background-image: -ms-linear-gradient(top, #CCCCCC, #999999);
    background-image: -o-linear-gradient(top, #CCCCCC, #999999);
    background-image: linear-gradient(to bottom, #CCCCCC, #999999);
    -webkit-border-radius: 10;
    -moz-border-radius: 10;
    border-radius: 10px;
    font-family: "coomic", cursive, sans-serif;
    color: #ffffff;
    width: 310px;
    margin: 0 auto;
    border: solid #ffffff 2px;
    text-decoration: none;
    z-index: 10;
    min-width: 0%;
    max-width: 90%;
    position: relative;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 7px;
}


div.btn div.content-box-notification-red,
div.btn div.content-box-notification-orange,
div.btn div.content-box-notification-green,
div.btn div.content-box-notification-yellow,
div.btn div.content-box-notification-blue,
div.btn-red div.content-box-notification-red,
div.btn-red div.content-box-notification-orange,
div.btn-red div.content-box-notification-green,
div.btn-red div.content-box-notification-yellow,
div.btn-red div.content-box-notification-blue {
    position: absolute;
    text-align: center;

    padding: 1px 10px 1px 10px;

    margin: 0px;
    overflow: hidden;
    border-radius: 30px 5px;
    z-index: 5;
    right: -10px;
    top: -10px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;

    -ms-transform: rotate(7deg);
    /* IE 9 */
    -webkit-transform: rotate(7deg);
    /* Chrome, Safari, Opera */
    transform: rotate(7deg);

}

div.btn div.content-box-notification-red {
    background-color: #fe0000;
    border: 1px solid #CC0000;
    color: white;
}

div.btn div.content-box-notification-orange {
    background-color: #fea700;
    border: 1px solid #c28e03;
    color: white;
}

div.btn div.content-box-notification-green {
    background-color: #44d603;
    border: 1px solid #16b201;
    color: white;
}

div.btn div.content-box-notification-yellow {
    background-color: #f0cc3d;
    border: 1px solid #b29701;
    color: white;
}
div.btn div.content-box-notification-blue {
    background-color: #3dd7f0;
    border: 1px solid #0167b2;
    color: white;
}

div.btn-red div.content-box-notification-red {
    background-color: #fe0000;
    border: 1px solid #CC0000;
    color: white;
}

div.btn-red div.content-box-notification-orange {
    background-color: #fea700;
    border: 1px solid #c28e03;
    color: white;
}

div.btn-red div.content-box-notification-green {
    background-color: #44d603;
    border: 1px solid #16b201;
    color: white;
}

div.btn-red div.content-box-notification-yellow {
    background-color: #f0cc3d;
    border: 1px solid #b29701;
    color: white;
}

div.btn-red div.content-box-notification-blue {
    background-color: #3dd7f0;
    border: 1px solid #0167b2;
    color: white;
}



        /* ================= PANEL BASE ================= */
        #opmya-wrapper{
            position:fixed;
            top: 7px;
            right: 30px;
            width: 340px;
            height: 74px;
            min-height: 74px;

            background:
                radial-gradient(
                    120% 120% at 100% 0%,
                    color-mix(in srgb, var(--primary) 45%, transparent) 0%,
                    transparent 55%
                ),
                linear-gradient(
                    180deg,
                    color-mix(in srgb, var(--primary) 35%, #000),
                    color-mix(in srgb, var(--secondary) 80%, #000)
                );

            border-radius:26px;

            color: var(--text);
            z-index:3000;
            overflow:hidden;
            transition: width .35s cubic-bezier(.4,0,.2,1),
                        height .45s cubic-bezier(.4,0,.2,1);
            font-family:'Segoe UI', system-ui, sans-serif;
        }


        #opmya-wrapper.open{
            width:400px;
            height:auto;
            max-height: calc(100vh - 24px);
        }


        /* Móviles y tablets */
        @media (max-width: 1000px){
            #opmya-wrapper.open{
                border-radius: 0px 0px 25px 25px !important;
            }
        }

        /* ================= CABECERA ================= */
        .opmya-header{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:5px 16px;

            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--primary) 50%, #000),
                color-mix(in srgb, var(--secondary) 70%, #000)
            );

            user-select:none;
            cursor: pointer;
            border: 3px solid white;
            border-radius: 25px 25px 0 0;
        }
        .opmya-header:hover{
            background: linear-gradient(
                180deg,
                color-mix(in srgb, var(--primary) 70%, #000),
                color-mix(in srgb, var(--secondary) 85%, #000)
            );

            box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 40%, transparent);
        }
        .opmya-title{
            font-size:15px;
            font-weight:700;
            line-height:18px;
            margin: 0 auto;
            text-align:center;
            color: white;
        }

        .opmya-user{
            color: var(--accent);
            font-weight:800;
        }

        .opmya-wheel img{
            width:60px;
            pointer-events:none;
            transition:transform .6s ease;
        }
        #opmya-wrapper.open .opmya-wheel img{ transform:rotate(180deg); }

        /* Cabecera interactiva */
        .opmya-header{
            cursor: pointer;
        }

        /* Resto del panel */
        .opmya-body{
            cursor: default;
        }

        /* ================= CONTENIDO ================= */
        .opmya-body{
            padding:18px 20px 24px;
            overflow-y:auto;
            max-height: calc(100vh - 92px);
            will-change: opacity, transform;
            border: 3px solid white;
            border-top: none;
            border-radius: 0 0 26px 26px;
        }

        /* ================= FORM INPUTS (login) ================= */
        .opmya-body input{
            width:86%;
            display:block;
            margin:10px auto;
            padding:12px 14px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(2,6,23,.35);
            color:#fff;
            outline:none;
        }
        .opmya-body input::placeholder{ color:rgba(255,255,255,.55); }

        /* ================= VISIBILIDAD SEGÚN ESTADO ================= */

        /* Panel cerrado: oculto pero SIN mover layout */
        #opmya-wrapper:not(.open) .opmya-body{
            opacity: 0;
            pointer-events: none;
        }

        /* Panel abierto: transición suave */
        #opmya-wrapper.open .opmya-body{
            opacity: 1;
            pointer-events: auto;
            transition: opacity .25s ease;
        }


        /* ================= BOTONES ================= */
        .op-btn{
            all: unset;
            display:flex;
            align-items:center;
            justify-content:center;
            width: 72%;
            margin: 18px auto;
            padding: 10px 10px;
            border-radius:20px;
            font-size:15px;
            font-weight:bold;
            color:#fff;
            cursor:pointer;
            box-shadow: 0 0px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
            max-width: 300px;
            text-align:center;
            position: relative;
        }

        .op-btn:hover{
            filter: brightness(1.16);
            transform: scale(1.1);
        }

        .op-btn .notif{
            position: absolute;
            top: -16px;
            right: -8px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 999px;
            white-space: nowrap;
            color: #fff;
            z-index: 10;
            box-shadow: 0 4px 12px rgba(0,0,0,.35);
        }

        .op-blue{ background:linear-gradient(180deg,#38bdf8,#0284c7); }
        .op-green{ background:linear-gradient(180deg,#22c55e,#16a34a); }
        .op-red{ background:linear-gradient(180deg,#ef4444,#b91c1c); }
        .op-purple{background:linear-gradient(180deg,#a855f7,#6d28d9); }

        .op-btn.disabled{
            opacity: .6;
            cursor: default;
            filter: grayscale(.25);
            pointer-events: none;
        }
        
        .op-btn.disabled:hover{
            transform: none;
            filter: grayscale(.25);
        }
        /* ================= OP TAG ================= */
        .op-tag{
            width:86%;
            margin:10px auto;
            font-weight:bold;
            font-size:18px;
            text-align: center;
            color: white;
        }
        .op-tag strong{ color:#facc15; }

        /* ================= ALERTAS ================= */
        .op-alerts{
            display:flex;
            gap:14px;
            margin:18px auto 20px;
            width:92%;
        }

        .op-alert-box{
            flex:1;
            background:linear-gradient(180deg,#1e293b,#0b1220);
            border-radius:16px;
            padding:12px 0 10px;
            text-align:center;
            cursor:pointer;
            box-shadow: 0 1px 10px rgba(0,0,0,.55);
            transition:transform .18s ease, filter .18s ease;
            max-width: 200px;
            margin: 0 auto;
        }

        .op-alert-box:hover{ transform:translateY(-2px); filter:none; }

         .op-alert-box span{
             font-size:13px;
             color:white;
             font-weight:800;
             letter-spacing:.3px;
         }
         .op-alert-box:hover span{
            color:white;
         }

        .op-alert-box strong{
            display:block;
            margin-top:6px;
            font-size:20px;
            font-weight:900;
            color:#e5e7eb;
        }

        .op-alert-box.active{
            background:linear-gradient(180deg,#dc2626,#7f1d1d);
            animation:shake 1.4s infinite;
        }

        @keyframes shake{
            94%{transform:translateY(-2px)}
            96%{transform:translateY(2px)}
        }


        .op-alert-boxmini{
            border-radius: 25%;
            padding: 0px;
            text-align: center;
            width: 30px;
            height: 30px;
            font-size: 10px;
            position: absolute;
            top: 23px;
            right: 34px;
            pointer-events: none;
            z-index: 1;
        }

        .op-alert-boxmini strong{
            display: block;
            font-size: 20px;
            color: #e5e7eb;
        }

        .op-alert-boxmini.active{
            background:linear-gradient(180deg,#dc2626,#7f1d1d);
            animation:shake 1.4s infinite;
        }

        /* ================= HOVER CONDICIONAL ALERTAS ================= */

        /* ❌ NO hay mensajes → hover ROJO */
        .op-alert-box:not(.active):hover{
            background: linear-gradient(180deg, #ef4444, #991b1b);
            filter: none;
        }

        /* ✅ SÍ hay mensajes → hover VERDE */
        .op-alert-box.active:hover{
            background: linear-gradient(180deg, #22c55e, #15803d);
            filter: none;
        }

        /* ================= AVATAR ================= */
        .op-avatar{
            text-align:center;
            margin:16px 0 8px;
        }
        .op-avatar img{
            width:96px;
            height:96px;
            border-radius:50%;
            border:4px solid rgba(255,255,255,.95);
            box-shadow:0 12px 28px rgba(0,0,0,.6);
            margin-bottom:12px;
        }

        /* ================= AJUSTE VISUAL INVITADO ================= */
        .opmya-body:has(form){
            padding-top: 36px;
        }

        /* ================= PASSWORD TOGGLE ================= */
        .password-wrapper{
            position: relative;
            width: 86%;
            margin: 10px auto;
        }

        .password-wrapper input{
            width: 100%;
            padding-right: 44px;
        }

        .password-toggle{
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 18px;
            color: rgba(255,255,255,.65);
            user-select: none;
        }

        .password-toggle:hover{
            color: #fff;
        }
        /* ================= PATREON ================= */

        .patreon-area{
            width: 260px;
            margin: 0 auto;
            text-align:center;
            background: #00000070;
            padding: 1px;
            border-radius: 10px;
        }

        .patreon-ok{
            color: white;
            font-weight:900;
            line-height:18px;
        }

        .patreon-ok small{
            display:block;
            opacity:.9;
            font-weight:700;
            margin-top:4px;
        }

        .patreon-warning{
            color:#facc15;
            font-size:13px;
            line-height:15px;
            font-weight:900;
            text-align: center;
        }

        .patreon-warning a{
            color:#e63942;
            font-weight:900;
            text-decoration:none;
        }

        .patreon-warning a:hover{
            text-decoration:underline;
        }

        .btn-patreon{
            display:inline-block;
            padding:8px 16px;
            background:#111;
            color:#fff;
            border-radius:14px;
            text-decoration:none;
            font-weight:900;
            box-shadow:0 6px 16px rgba(0,0,0,.45);
            width: 100%;
            height: 100%;
        }

        .btn-patreon:hover{
            background:#e63942;
            cursor:pointer;
        }

        .patreon-link{
            all: unset;
            cursor: pointer;
            font-weight: 900;
        }

        .patreon-link:hover{
            opacity: .85;
        }

        .patreon-green{ color:#2ecc71; }
        .patreon-red{ color:#e63942; }

        /* ================= AVATAR HORIZONTAL ================= */
        .op-avatar-row{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:16px;
            margin:18px 0 10px;
        }

        .op-avatar-row img{
            width:96px;
            height:96px;
            border:4px solid rgba(255,255,255,.95);
            box-shadow:0 1px 10px rgba(0,0,0,.6);
        }

        .op-avatar-actions{
            display:flex;
            flex-direction:column;
            gap:8px;
            text-align: center;
        }