/* ============================================================
   OrtaLegal · Support Modal v0.9 FIX
   X centrada por CSS + iconos lineales sin relleno.
   ============================================================ */

.pill.support-pill{
    background:rgba(255,255,255,.74);
    border-color:var(--auth-line, var(--ol-line, #e9ddcf));
    color:var(--auth-navy, var(--ol-navy, #0b2845));
    font-weight:800;
}

body.dark .pill.support-pill{
    background:rgba(255,255,255,.06);
    color:#fff;
    border-color:rgba(255,255,255,.16);
}

.pill.support-pill:hover{
    border-color:rgba(189,146,80,.60);
    box-shadow:0 8px 18px rgba(16,32,51,.08);
}

body.ol-modal-open{
    overflow:hidden;
}

.ol-support-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.ol-support-modal.is-open{
    display:flex;
}

.ol-support-backdrop{
    position:absolute;
    inset:0;
    background:rgba(7,18,31,.42);
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
}

body.dark .ol-support-backdrop{
    background:rgba(3,10,18,.68);
}

.ol-support-dialog{
    position:relative;
    z-index:1;
    width:min(560px,100%);
    border-radius:32px;
    padding:34px;
    background:
        radial-gradient(circle at 94% 0%,rgba(215,189,124,.18),transparent 14rem),
        rgba(255,253,248,.97);
    border:1px solid rgba(233,221,207,.95);
    box-shadow:0 28px 80px rgba(7,18,31,.24);
    color:var(--auth-ink, #0e2035);
    animation:olSupportIn .18s ease-out;
}

body.dark .ol-support-dialog{
    background:
        radial-gradient(circle at 94% 0%,rgba(215,189,124,.12),transparent 14rem),
        rgba(14,34,55,.98);
    border-color:rgba(255,255,255,.13);
    color:#fff;
}

@keyframes olSupportIn{
    from{opacity:0; transform:translateY(8px) scale(.98)}
    to{opacity:1; transform:translateY(0) scale(1)}
}

/* X perfecta: sin carácter, dos líneas CSS centradas */
.ol-support-close{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    padding:0;
    margin:0;
    border:1px solid rgba(189,146,80,.50);
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:var(--auth-navy, #0b2845);
    cursor:pointer;
    transition:.16s ease;
    appearance:none;
    display:block;
}

.ol-support-close::before,
.ol-support-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:15px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
}

.ol-support-close::before{
    transform:translate(-50%, -50%) rotate(45deg);
}

.ol-support-close::after{
    transform:translate(-50%, -50%) rotate(-45deg);
}

.ol-support-close:hover{
    transform:rotate(90deg);
    background:#fff;
    border-color:rgba(189,146,80,.85);
}

.ol-support-close:focus-visible{
    outline:3px solid rgba(189,146,80,.25);
    outline-offset:3px;
}

body.dark .ol-support-close{
    background:rgba(255,255,255,.08);
    color:#fff;
    border-color:rgba(215,189,124,.42);
}

.ol-support-logo{
    width:190px;
    max-width:62%;
    display:block;
    margin:0 auto 24px;
    object-fit:contain;
}

body.dark .ol-support-logo{
    filter:brightness(0) invert(1);
}

.ol-support-dialog h2{
    margin:0;
    font-size:30px;
    line-height:1.08;
    text-align:center;
    letter-spacing:-.045em;
    color:var(--auth-navy, #0b2845);
}

body.dark .ol-support-dialog h2{
    color:#fff;
}

.ol-support-text{
    margin:14px auto 24px;
    max-width:430px;
    text-align:center;
    color:var(--auth-muted, #718093);
    line-height:1.65;
    font-size:15px;
}

.ol-support-text .support-line{
    display:block;
}

body.dark .ol-support-text{
    color:#c9d5e1;
}

.ol-support-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:18px;
}

.ol-support-action{
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 16px;
    border-radius:18px;
    border:1px solid var(--auth-line, #e9ddcf);
    background:rgba(255,255,255,.72);
    transition:.16s ease;
}

.ol-support-action:hover{
    transform:translateY(-1px);
    border-color:rgba(189,146,80,.65);
    box-shadow:0 10px 24px rgba(16,32,51,.08);
}

body.dark .ol-support-action{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
}

/* Iconos elegantes: círculo oro + trazo azul, sin relleno */
.ol-support-icon{
    width:44px;
    height:44px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--auth-gold, #bd9250),var(--auth-gold-2, #d7bd7c));
    color:#0b2845;
    flex:0 0 44px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}

.ol-support-icon svg{
    width:22px;
    height:22px;
    display:block;
    overflow:visible;
}

.ol-support-icon svg,
.ol-support-icon svg *,
.ol-support-icon path,
.ol-support-icon line,
.ol-support-icon polyline,
.ol-support-icon rect{
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

.ol-support-action strong{
    display:block;
    font-size:14px;
    color:var(--auth-ink, #0e2035);
    margin-bottom:2px;
}

body.dark .ol-support-action strong{
    color:#fff;
}

.ol-support-action span span{
    display:block;
    color:var(--auth-muted, #718093);
    font-size:14px;
}

body.dark .ol-support-action span span{
    color:#c9d5e1;
}

.ol-support-note{
    margin:22px 0 0;
    padding:13px 15px;
    border-radius:17px;
    background:rgba(189,146,80,.11);
    border:1px solid rgba(189,146,80,.24);
    color:#6d542d;
    font-size:13px;
    line-height:1.55;
    text-align:center;
    white-space:nowrap;
}

body.dark .ol-support-note{
    color:#e7d6b7;
    background:rgba(189,146,80,.10);
}

@media(max-width:640px){
    .top-actions{
        flex-wrap:wrap;
        justify-content:flex-end;
    }

    .ol-support-dialog{
        padding:28px 22px;
        border-radius:26px;
    }

    .ol-support-logo{
        width:165px;
        margin-bottom:20px;
    }

    .ol-support-dialog h2{
        font-size:26px;
    }

    .ol-support-note{
        text-align:left;
        white-space:normal;
    }
}