/* ============================================
   CSS: servers.css — Olemurcia
   Componente: Servidores + @media mobile + Jugadores + Chips
   ============================================ */

    .red{

        display:grid;

        gap:14px;

        grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));

    }

    .servidor{

        background:var(--superficie);

        border:1px solid var(--borde);

        border-radius:var(--radio);

        padding:16px 18px;

        position:relative;

        cursor:pointer;

        transition:background .2s;

        backdrop-filter:blur(12px);

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

    }

    .servidor:hover{

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

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

    }

    .grid-servidores{

        display:grid;

        grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));

        gap:12px;

    }

    @media(max-width:600px){

        .grid-servidores{

            grid-template-columns:1fr;

        }

        .logros-dashboard{
            padding:12px;
        }

        .logros-header{
            flex-direction:column;
            text-align:center;
            gap:10px;
        }

    }

    .servidor .nombre{

        font-size:15px;

        font-weight:700;

        display:flex;

        align-items:center;

        gap:8px;

    }

    .srv-icono{

        width:28px;

        height:28px;

        border-radius:8px;

        object-fit:cover;

        vertical-align:middle;

        flex:none;

    }

    .servidor .descripcion{

        color:var(--difuso);

        font-size:13px;

        margin:6px 0 10px;

        line-height:1.5;

    }

    .servidor .meta{

        font-size:12px;

        color:var(--difuso);

        display:flex;

        justify-content:space-between;

        align-items:center;

        gap:8px;

    }

    .jugadores{

        color:var(--cian);

        font-weight:600;

    }

    .chip{

        display:inline-block;

        padding:3px 10px;

        border-radius:20px;

        font-size:12px;

        font-weight:600;

    }

    .chip.verde{

        background:rgba(74,222,128,.14);

        color:#77ff9f;

        border:1px solid rgba(74,222,128,.3);

    }

    .chip.rojo{

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

        color:#ff9b9b;

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

    }