:root{
    --bg:#020617;
    --card:#0f172a;
    --accent:#38bdf8;
    --accent2:#22c55e;
    --text:#e5e7eb;
    --muted:#94a3b8;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:linear-gradient(135deg,#020617,#020617,#0f172a);
    color:var(--text);
}

h1{
    text-align:center;
    margin:40px 20px 10px;
    color:var(--accent);
}

.sub{
    text-align:center;
    color:var(--muted);
    margin-bottom:40px;
}

.servidores{
    max-width:1200px;
    margin:auto;
    padding:20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.server{
    background:rgba(15,23,42,.9);
    border-radius:20px;
    padding:25px;
    box-shadow:0 20px 40px rgba(0,0,0,.4);
    transition:.4s ease;
}

.server:hover{
    transform:translateY(-6px);
}

.server h2{
    margin-bottom:15px;
    color:var(--accent2);
    font-size:1.4rem;
}

.server h3{
    margin-top:20px;
    margin-bottom:10px;
    font-size:1rem;
    color:var(--accent);
    border-left:4px solid var(--accent);
    padding-left:10px;
}

.enlace{
    display:block;
    background:#020617;
    margin-bottom:10px;
    padding:12px 15px;
    border-radius:12px;
    color:var(--text);
    text-decoration:none;
    transition:.3s ease;
    border:1px solid transparent;
}

.enlace:hover{
    border-color:var(--accent);
    background:#020617;
    transform:translateX(4px);
}

.enlace small{
    display:block;
    font-size:.75rem;
    color:var(--muted);
    margin-top:4px;
}
footer{
    margin-top:60px;
    padding:30px 20px;
    text-align:center;
    color:var(--muted);
    font-size:.9rem;
}
/* extra */
    .servers{
        text-align: center;
        margin: 30px;
    }
    .servers a{
        display: block;
        max-width: 200px;
        margin: auto;
        padding: 10px;
        color: #fff;
        font-size: 1.5em;
        text-decoration: none;
        border-radius: 10px;
        border:1px solid transparent;
        background: #0a82b6;
        box-shadow: 0 0 6px #0a82b6;
        transition:.3s ease;
    }
    .servers a:hover{
        background:#020617;
        border-color:var(--accent);
        transform:translateX(4px);
    }

@media(max-width:600px){
    h1{font-size:1.6rem}
}

/* Estados por antigüedad */
.enlace.status-today{
    border-color: #16a34a; /* verde */
    box-shadow: 0 6px 18px rgba(34,197,94,0.08);
    color: #d1fae5;
    background: linear-gradient(90deg, rgba(34,197,94,0.06), transparent);
}

.enlace.status-recent{
    border-color: #f97316; /* naranja */
    box-shadow: 0 6px 18px rgba(249,115,22,0.06);
    color: #fff7ed;
    background: linear-gradient(90deg, rgba(249,115,22,0.05), transparent);
}

.enlace.status-old{
    border-color: #ef4444; /* rojo */
    box-shadow: 0 6px 18px rgba(239,68,68,0.06);
    color: #fff1f2;
    background: linear-gradient(90deg, rgba(239,68,68,0.04), transparent);
}

/* opcional: estilo neutro para 2-3 días atrás */
.enlace.status-default{
    border-color: transparent;
    background: #020617;
}

/* etiqueta de estado dentro del small */
.status-label{
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    margin-left:6px;
    color:#020617;
    background: rgba(255,255,255,0.85);
    font-weight:600;
}

/* ajustar contraste de la etiqueta según color si quieres más contraste */
.enlace.status-today .status-label{ background:#16a34a; color:#fff; }
.enlace.status-recent .status-label{ background:#f97316; color:#fff; }
.enlace.status-old .status-label{ background:#ef4444; color:#fff; }


/* Leyenda en columna, moderna y responsiva (sin flex) */
.legend{
    width: 90%;
    max-width:1200px;
    margin: 0 auto 18px;
    text-align: center;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.03);
    color: var(--muted);
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    display:block;
}

/* Título */
.legend > strong{
    display:block;
    color: var(--text);
    font-weight:700;
    margin-bottom:10px;
    font-size:1rem;
}

/* Cada item en bloque (columna) */
.legend-item{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:6px 0;
    padding:10px 12px;
    border-radius:10px;
    background: rgba(255,255,255,0.01);
    color:var(--muted);
    font-size:0.95rem;
    line-height:1.1;
    transition: background .18s ease, transform .12s ease;
    cursor:default;
    align-items:center;
}

/* Hover y foco para accesibilidad táctil */
.legend-item:hover,
.legend-item:focus{
    background: rgba(255,255,255,0.03);
    color: var(--text);
    transform: translateY(-2px);
    outline: none;
}

/* Contenido interno: punto y texto en línea */
.legend-item .dot{
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:50%;
    vertical-align:middle;
    margin-right:10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.legend-item .label{
    display:inline-block;
    vertical-align:middle;
    font-weight:600;
    color:var(--text);
}
.legend-item .hint{
    display:inline-block;
    margin-left:8px;
    font-weight:500;
    color:var(--muted);
    font-size:0.88rem;
}

/* Colores */
.legend-today .dot{ background:#16a34a; }
.legend-recent .dot{ background:#f97316; }
.legend-old .dot{ background:#ef4444; }

/* Contraste de texto por item */
.legend-today{ color:#d1fae5; background: linear-gradient(90deg, rgba(34,197,94,0.03), transparent); }
.legend-recent{ color:#fff7ed; background: linear-gradient(90deg, rgba(249,115,22,0.03), transparent); }
.legend-old{ color:#fff1f2; background: linear-gradient(90deg, rgba(239,68,68,0.02), transparent); }

/* Espaciado y tamaño táctil en móviles */
@media (max-width:480px){
    .legend{ padding:12px; }
    .legend > strong{ font-size:1rem; margin-bottom:8px; }
    .legend-item{ padding:12px; font-size:1rem; min-height:48px; }
    .legend-item .dot{ width:14px; height:14px; margin-right:12px; }
    .legend-item .hint{ display:block; margin-left:0; margin-top:6px; color:var(--muted); font-size:0.9rem; }
}

/* Ajustes para tablets */
@media (min-width:481px) and (max-width:899px){
    .legend{ padding:13px; }
    .legend-item{ padding:11px; font-size:0.98rem; }
}

/* Pequeño detalle visual para separar título de items */
.legend > strong::after{
    content: "";
    display:block;
    height:1px;
    width:100%;
    margin-top:10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}