/* ============================================================
   OrtaLegal · Theme Toggle v1.2
   Modo oscuro/claro con texto dinámico + botón ayuda legible.
   ============================================================ */

/* Botón ? siempre visible, también en modo oscuro */
.pill.support-pill,
body.dark .pill.support-pill{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:20px!important;
    font-weight:950!important;
    line-height:1!important;
    color:#0b2845!important;
    border:1px solid rgba(215,189,124,.70)!important;
    background:
        radial-gradient(circle at 30% 20%,rgba(255,255,255,.90),transparent 22%),
        linear-gradient(135deg,#bd9250 0%,#d7bd7c 58%,#c99e58 100%)!important;
    box-shadow:
        0 12px 26px rgba(189,146,80,.28),
        0 0 0 1px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.52)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.28)!important;
    opacity:1!important;
}

body.dark .pill.support-pill{
    color:#061a2f!important;
    border-color:rgba(215,189,124,.86)!important;
    box-shadow:
        0 12px 26px rgba(0,0,0,.28),
        0 0 0 4px rgba(215,189,124,.08),
        inset 0 1px 0 rgba(255,255,255,.52)!important;
}

.pill.support-pill:hover,
body.dark .pill.support-pill:hover{
    transform:translateY(-1px) scale(1.035)!important;
    box-shadow:
        0 16px 34px rgba(189,146,80,.34),
        0 0 0 5px rgba(189,146,80,.13),
        inset 0 1px 0 rgba(255,255,255,.58)!important;
}

/* Botón modo oscuro/claro con estado claro */
.pill.ol-dark-toggle{
    min-height:42px!important;
    padding:0 16px 0 13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    font-weight:850!important;
    border-radius:999px!important;
    border:1px solid rgba(189,146,80,.32)!important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,253,248,.76))!important;
    color:#0b2845!important;
    box-shadow:
        0 10px 24px rgba(16,32,51,.07),
        inset 0 1px 0 rgba(255,255,255,.85)!important;
    opacity:1!important;
}

.pill.ol-dark-toggle::before{
    content:"";
    width:16px;
    height:16px;
    flex:0 0 16px;
    border-radius:999px;
    background:
        radial-gradient(circle at 62% 38%,transparent 0 38%,#0b2845 40% 100%);
    box-shadow:0 0 0 3px rgba(189,146,80,.11);
}

body.dark .pill.ol-dark-toggle{
    background:
        linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.045))!important;
    color:#fff!important;
    border-color:rgba(215,189,124,.42)!important;
    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.10)!important;
}

body.dark .pill.ol-dark-toggle::before{
    background:
        radial-gradient(circle at 35% 35%,#fff 0 16%,transparent 18%),
        radial-gradient(circle at 66% 62%,#fff 0 10%,transparent 12%),
        radial-gradient(circle,#d7bd7c 0 100%);
    box-shadow:0 0 0 3px rgba(215,189,124,.14);
}

.pill.ol-dark-toggle:hover{
    transform:translateY(-1px)!important;
    border-color:rgba(189,146,80,.76)!important;
    box-shadow:
        0 14px 30px rgba(16,32,51,.11),
        0 0 0 4px rgba(189,146,80,.08),
        inset 0 1px 0 rgba(255,255,255,.90)!important;
}

body.dark .pill.ol-dark-toggle:hover{
    box-shadow:
        0 14px 30px rgba(0,0,0,.26),
        0 0 0 4px rgba(215,189,124,.10),
        inset 0 1px 0 rgba(255,255,255,.12)!important;
}

/* Ajuste fino de cabecera en modo oscuro */
body.dark .topbar{
    border-bottom-color:rgba(215,189,124,.25)!important;
}

/* Seguridad visual: evita que capas previas apaguen el botón ? */
body.dark .top-actions .support-pill{
    filter:none!important;
    visibility:visible!important;
}