/* ============================================
   CSS: whitelist.css — Olemurcia
   Componente: Whitelist completa
   ============================================ */

    /* ---------- Whitelist card (portada) ---------- */

    .whitelist-card{

        background:rgba(17,24,45,.15);

        border:2px solid rgba(255,255,255,.10);

        border-radius:18px;

        padding:32px;

        max-width:480px;

        margin:0;

        backdrop-filter:blur(12px);

        -webkit-backdrop-filter:blur(12px);

        box-shadow:0 0 30px rgba(0,0,0,.20);

        transition:transform .2s, border-color .2s;

    }

    .whitelist-card:hover{

        border-color:rgba(125,217,255,.35);

    }

    .whitelist-header{

        text-align:center;

        margin-bottom:22px;

    }

    .whitelist-logo{

        width:52px;

        height:52px;

        margin:0 auto 12px;

        border-radius:14px;

        background:rgba(255,255,255,.08);

        backdrop-filter:blur(10px);

        -webkit-backdrop-filter:blur(10px);

        border:1px solid rgba(255,255,255,.12);

        display:flex;

        align-items:center;

        justify-content:center;

        font-size:24px;

    }

    .whitelist-header h2{

        font-size:20px;

        color:#e5f3ff;

        margin-bottom:4px;

    }

    .whitelist-sub{

        color:#b8c7df;

        font-size:13px;

    }

    .whitelist-header h2{

        font-size:20px;

        margin-bottom:4px;

    }

    .whitelist-sub{

        color:var(--difuso);

        font-size:13px;

    }

    .whitelist-form label{

        display:block;

        margin-bottom:16px;

    }

    .whitelist-label span{

        display:block;

        font-size:12px;

        color:#b8c7df;

        margin-bottom:6px;

    }

    .whitelist-input{
        width:100%;
        padding:12px 14px;
        border-radius:12px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(0,0,0,.28);
        color:var(--texto);
        font-size:15px;
        outline:none;
        transition:.2s;
        box-sizing:border-box;
        margin-bottom:10px;
    }

    .whitelist-input:focus{
        box-shadow:0 0 12px rgba(125,217,255,.25);
        border-color:rgba(125,217,255,.4);
    }

    .whitelist-input::placeholder{
        color:#a9bdd8;
    }

    .whitelist-label input{

        width:100%;

        padding:12px 14px;

        border-radius:12px;

        border:1px solid rgba(255,255,255,.12);

        background:rgba(0,0,0,.28);

        color:var(--texto);

        font-size:15px;

        outline:none;

        transition:.2s;

        box-sizing:border-box;

    }

    .whitelist-label input:focus{

        box-shadow:0 0 12px rgba(125,217,255,.25);

        border-color:rgba(125,217,255,.4);

    }

    .whitelist-label input::placeholder{

        color:#a9bdd8;

    }

    .whitelist-btn{

        width:100%;

        padding:14px;

        border:none;

        border-radius:12px;

        cursor:pointer;

        background:rgba(255,255,255,.10);

        backdrop-filter:blur(10px);

        -webkit-backdrop-filter:blur(10px);

        color:var(--texto);

        font-size:15px;

        font-weight:bold;

        transition:.25s;

        margin-top:5px;

    }

    .whitelist-btn:hover:not(:disabled){

        background:rgba(255,255,255,.18);

        transform:translateY(-2px);

        box-shadow:0 0 18px rgba(0,0,0,.25);

    }

    .whitelist-btn:disabled{

        opacity:.55;

        cursor:not-allowed;

        transform:none;

        box-shadow:none;

    }

    .whitelist-btn.warn{

        background:rgba(200,150,0,.25);

        border:1px solid rgba(200,150,0,.4);

    }

    .whitelist-btn.warn:hover:not(:disabled){

        background:rgba(200,150,0,.35);

    }

    .wl-premium-si{

        background:rgba(0,180,80,.25) !important;

        border:1px solid rgba(0,180,80,.4) !important;

        flex:1;

    }

    .wl-premium-si:hover:not(:disabled){

        background:rgba(0,180,80,.4) !important;

    }

    .wl-premium-no{

        background:rgba(200,100,0,.2) !important;

        border:1px solid rgba(200,100,0,.35) !important;

        flex:1;

    }

    .wl-premium-no:hover:not(:disabled){

        background:rgba(200,100,0,.35) !important;

    }

    .whitelist-proceso{

        margin-top:15px;

        background:#070a17;

        border:1px solid rgba(255,255,255,.08);

        border-radius:10px;

        padding:14px;

        min-height:24px;

        font-family:Consolas,monospace;

        font-size:13px;

        line-height:1.8;

        color:#d9ebff;

    }

    .whitelist-resultado{

        margin-top:12px;

        padding:10px 12px;

        border-radius:10px;

        font-size:13px;

        text-align:center;

    }

    .whitelist-resultado.ok{

        background:rgba(34,197,94,.15);

        color:#22c55e;

        border:1px solid rgba(34,197,94,.3);

    }

    .whitelist-resultado.error{

        background:rgba(239,68,68,.15);

        color:#ef4444;

        border:1px solid rgba(239,68,68,.3);

    }

    .whitelist-info{

        margin-top:22px;

        padding-top:18px;

        border-top:1px solid rgba(255,255,255,.08);

    }

    .whitelist-info ul{

        list-style:none;

        font-size:12px;

        color:#b8c7df;

        line-height:2;

    }

    .whitelist-info li::before{

        content:"";

        display:inline-block;

        width:6px;

        height:6px;

        border-radius:50%;

        background:#77ff9f;

        margin-right:8px;

        margin-bottom:1px;

    }

    /* ---------- Pestañas whitelist ---------- */

    .wl-tabs{

        display:flex;

        gap:8px;

        flex-wrap:wrap;

        margin-bottom:18px;

        padding:6px;

        background:rgba(17,24,45,.30);

        border:1px solid rgba(255,255,255,.10);

        border-radius:12px;

    }

    .wl-tab{

        flex:1;

        min-width:150px;

        padding:10px 14px;

        border:none;

        border-radius:8px;

        background:transparent;

        color:#b8c7df;

        font-size:14px;

        font-weight:700;

        cursor:pointer;

        transition:background .15s,color .15s;

    }

    .wl-tab:hover{

        background:rgba(255,255,255,.06);

    }

    .wl-tab.active{

        background:rgba(119,255,159,.16);

        color:#77ff9f;

    }

    .wl-pane{

        display:none;

    }

    .wl-pane.active{

        display:block;

    }

    /* ---------- Listado de PJs (Modificar) ---------- */

    .wl-principal-head{

        display:flex;

        align-items:center;

        gap:10px;

        padding:8px 12px;

        border-bottom:1px solid rgba(255,255,255,.12);

        font-size:11px;

        font-weight:800;

        text-transform:uppercase;

        color:#7d8da8;

    }

    .wl-pj-item{

        display:flex;

        align-items:center;

        gap:10px;

        padding:10px 12px;

        border-bottom:1px solid rgba(255,255,255,.07);

    }

    .wl-pj-item:last-child{

        border-bottom:none;

    }

    .wl-list-nombre{

        flex:1.4;

        min-width:80px;

        font-weight:700;

        color:#e5f3ff;

        word-break:break-all;

    }

    .wl-list-fecha{

        flex:1.2;

        min-width:70px;

        font-size:12px;

        color:#b8c7df;

    }

    .wl-list-estado{

        flex:.8;

        min-width:60px;

        font-size:12px;

        color:#77ff9f;

    }

    .wl-list-acc{

        display:flex;

        justify-content:flex-end;

    }

    .wl-btn-peq{

        padding:6px 10px;

        font-size:12px;

    }

    .whitelist-pjs{

        margin-top:14px;

        background:rgba(17,24,45,.25);

        border:1px solid rgba(255,255,255,.10);

        border-radius:12px;

        overflow:hidden;

    }

    @media(max-width:520px){

        .wl-list-fecha,.wl-list-estado.wl-list-label{

            display:none;

        }

    }

    /* ---------- Estado del código (Modificar) ---------- */

    .wl-estado-codigo{

        margin:12px 0;

        padding:12px 14px;

        background:rgba(119,255,159,.08);

        border:1px solid rgba(119,255,159,.25);

        border-radius:10px;

    }

    .wl-estado-info{

        font-size:13px;

        font-weight:700;

        color:#77ff9f;

    }

    /* ---------- Botón discreto "Usar código" ---------- */

    .wl-usar-codigo{

        display:flex;

        align-items:center;

        gap:10px;

        flex-wrap:wrap;

        margin:-6px 0 4px;

    }

    .wl-usar-btn{

        background:none;

        border:none;

        padding:0;

        margin:0;

        font-size:13px;

        font-weight:700;

        color:#77ff9f;

        text-decoration:underline;

        text-underline-offset:3px;

        cursor:pointer;

        opacity:.85;

        transition:opacity .15s;

    }

    .wl-usar-btn:hover{

        opacity:1;

    }

    .wl-usar-meta{

        font-size:11px;

        color:#7d8da8;

    }