:root{
    --bg:#050505;
    --panel:#0d0d0d;
    --panel2:#111;
    --line:rgba(255,255,255,.06);
    --txt:#f5f5f5;
    --mut:#9a9a9a;
    --vis:#f59e0b;
    --vis2:#d97706;
    --green:#22c55e;
    --red:#ef4444;
    --radius:20px;
    --shadow:0 25px 80px rgba(0,0,0,.75);
    }
    
    *{box-sizing:border-box;}
    html,body{height:100%;}
    body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
    background:radial-gradient(1200px 800px at 20% -200px,#2a1a00 0%,#070707 50%,#000 100%);
    color:var(--txt);
    }
    
    /* CARD GENERAL */
    .wrap{max-width: 150vh; margin:0 auto;padding:40px 20px;}
    .card{
    background:linear-gradient(160deg,#0c0c0c,#141414);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:30px;
    box-shadow:var(--shadow);
    }
    
    /* HEADER */
    h1{
    margin:0 0 20px;
    font-size:22px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--vis);
    }
    
    .meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
    }
    
    .pill{
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(245,158,11,.3);
    background:rgba(245,158,11,.08);
    font-size:13px;
    }
    
    .pill b{color:#fff}
    
    /* BOTONES */
    .btn{
    appearance:none;
    border:none;
    cursor:pointer;
    background:linear-gradient(180deg,var(--vis),var(--vis2));
    color:#000;
    font-weight:900;
    padding:8px 14px;
    border-radius:12px;
    transition:.15s;
    }
    .btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(245,158,11,.35);}
    .btn.secondary{
    background:transparent;
    color:var(--vis);
    border:1px solid rgba(245,158,11,.4);
    }
    .btn.small{padding:6px 10px;font-size:12px}
    
    /* 🔥 ELIMINAMOS TABLA VISUALMENTE */
    table,
    thead,
    tbody,
    tr,
    td,
    th{
    display:block;
    width:100%;
    border:0;
    }
    
    thead{display:none;} /* ocultamos encabezado */
    
    tbody{
    display:flex;
    flex-direction:column;
    gap:25px;
    }
    
    /* 🔥 CADA SERVIDOR ES UNA TARJETA */
    .row{
    background:linear-gradient(160deg,#0b0b0b,#101010);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:.2s;
    }
    
    .row:hover{
    border-color:rgba(245,158,11,.5);
    box-shadow:0 20px 60px rgba(245,158,11,.15);
    }
    
    /* NOMBRE SERVIDOR */
    tbody td:first-child{
    font-size:18px;
    font-weight:900;
    letter-spacing:.05em;
    color:#fff;
    padding:0;
    }
    
    /* SERVICIOS */
    td[data-svc]{
    padding:0;
    }
    
    /* CONTENEDOR SERVICIO */
    .svcBox{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    }
    
    /* STATUS */
    .statuspill{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    }
    
    .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    }
    
    .dot.green{
    background:var(--green);
    box-shadow:0 0 10px rgba(34,197,94,.8);
    }
    
    .dot.red{
    background:var(--red);
    box-shadow:0 0 10px rgba(239,68,68,.8);
    }
    
    .label{
    font-size:13px;
    color:#ccc;
    }
    
    /* BOTÓN FULL WIDTH EN MOBILE */
    @media(max-width:900px){
    .svcBox{
    flex-direction:column;
    align-items:flex-start;
    }
    .btn{
    width:100%;
    }
    }
    
    /* OVERLAY */
    .overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    }
    .overlay.on{display:flex;}
    .overlayBox{
    background:#111;
    padding:20px 25px;
    border-radius:18px;
    border:1px solid rgba(245,158,11,.3);
    display:flex;
    gap:12px;
    align-items:center;
    }
    .loader{
    width:18px;
    height:18px;
    border-radius:50%;
    border:3px solid rgba(245,158,11,.3);
    border-top-color:var(--vis);
    animation:spin .8s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg);}}

    /* Mostrar nombre del servicio encima del bloque */
td[data-svc]::before{
    content: attr(data-svc);
    display:block;
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    margin-bottom:6px;
    font-weight:700;
    display: none;
    }

    /* SELECT profesional estilo VIS */
select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background:linear-gradient(180deg,#1a1a1a,#111);
    color:#fff;
    padding:8px 36px 8px 14px;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    position:relative;
    border:none;
    }
    
select:focus{
    outline:none;
    border-color:#f59e0b;
    box-shadow:0 0 0 3px rgba(245,158,11,.18);
    }
    
select{
    background-image:
    linear-gradient(45deg,transparent 50%,#f59e0b 50%),
    linear-gradient(135deg,#f59e0b 50%,transparent 50%);
    background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
    }

    tbody{
        display:flex;
        flex-direction:column;
        gap:30px;
        margin-top:25px; /* ← espacio arriba */
        }
/* SELECT: cerrado bonito */

    
    select:focus{
    outline:none;
    border-color:#f59e0b;
    box-shadow:0 0 0 3px rgba(245,158,11,.18);
    }
    
    /* flecha naranja */
    select{
    background-image:
    linear-gradient(45deg,transparent 50%,#f59e0b 50%),
    linear-gradient(135deg,#f59e0b 50%,transparent 50%);
    background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
    }
    
    /* DROPDOWN: donde el navegador permita */
    select option{
    background:#0b0b0b;
    color:#fff;
    }
    
    /* Si el navegador respeta optgroup */
    select optgroup{
    background:#0b0b0b;
    color:rgba(255,255,255,.75);
    }
    
    /* Ajuste por si algún UA mete borde raro */
    select{outline-color:transparent;}

    body.page-login .loginTitle { color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; }

    body.page-login .loginErr { margin:0 0 14px; padding:10px 12px; border-radius:12px; border:1px solid rgba(239,68,68,.55); background:rgba(239,68,68,.10); color:#ffd1d1; font-size:13px; }
    
    body.page-login .loginGrid { display:grid; grid-template-columns: 1fr 1fr auto; gap:14px; align-items:end; }
    
    body.page-login .loginLbl { color:rgba(255,255,255,.82); font-size:12px; margin:0 0 8px; }
    
    body.page-login .loginInp { width:100%; height:42px; padding:0 12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#f5f5f5; outline:none; }
    
    body.page-login .loginInp:focus { border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
    
    body.page-login .loginBtn { height:42px; padding:0 18px; border-radius:12px; border:none; background:linear-gradient(180deg, #f59e0b, #d97706); color:#111; font-weight:800; cursor:pointer; }
    
    @media (max-width:720px) {
      body.page-login .loginGrid { grid-template-columns:1fr; }
      body.page-login .loginBtn { width:100%; }
    }