:root {
    --bg0:#050505;
    --bg1:#0a0a0a;
  
    --card:#0f0f0fcc;
    --card2:#141414cc;
  
    --txt:#f5f5f5;
    --mut:#a3a3a3;
  
    --blue:#f59e0b;     /* antes azul */
    --blue2:#d97706;    /* naranja más oscuro */
  
    --green:#22c55e;
    --red:#ef4444;
  
    --shadow:0 18px 60px rgba(0,0,0,.65);
    --radius:18px;
  }

* {box-sizing:border-box;}
html,body {height:100%;}
body {margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--txt);background:radial-gradient(1200px 600px at 20% -120px, #2a1a00 0%, var(--bg0) 55%, #050505 100%);}

.wrap {max-width:1100px;margin:0 auto;padding:28px;}
.card {background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 20px 18px;backdrop-filter:blur(10px);}
h1 {margin:0 0 16px;font-size:22px;letter-spacing:.2px;}

.meta {display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 14px;color:var(--mut);font-size:14px;}
.pill {display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:13px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.20);backdrop-filter:blur(6px);}
.small {font-size:12px;color:var(--mut);}

.grid {display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;}
.input {width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#f59f0b6b;color:#fff;outline:none;}
.input:focus {border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245, 158, 11, 0.18);}

.actions {display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:2px 0 10px;}
select {padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:var(--blue);color:#fff;outline:none;}
select:focus {border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245, 158, 11, 0.18);}

.btn {appearance:none;border:0;cursor:pointer;background:linear-gradient(180deg,var(--blue),var(--blue2));color:white;font-weight:800;padding:10px 14px;border-radius:12px;box-shadow:0 10px 25px rgba(245, 158, 11, 0.18);transition:transform .06s ease,filter .12s ease,opacity .12s ease;}
.btn:hover {filter:brightness(1.05);}
.btn:active {transform:translateY(1px);}
.btn.secondary {background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.12);}
.btn.small {padding:9px 12px;border-radius:12px;font-weight:900;box-shadow:none;}
.btn[disabled] {opacity:.55;cursor:not-allowed;transform:none;filter:saturate(.7);}

table {width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:10px;}
thead th {font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);text-align:left;padding:6px 10px;}
.row {background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06);border-radius:14px;}
tbody td {padding:12px 10px;vertical-align:middle;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
tbody td:first-child {padding-left:14px;border-left:1px solid rgba(255,255,255,.06);border-top-left-radius:14px;border-bottom-left-radius:14px;}
tbody td:last-child {padding-right:14px;border-right:1px solid rgba(255,255,255,.06);border-top-right-radius:14px;border-bottom-right-radius:14px;}

.svcCell {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;}
.svcLeft {display:flex;align-items:center;gap:10px;min-width:0;}
.statuspill {display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:13px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);}
.dot {width:10px;height:10px;border-radius:50%;}
.dot.red {background:var(--red);box-shadow:0 0 0 4px rgba(239,68,68,.14);}
.dot.green {background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.14);}
.label {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}

.btn.processing {position:relative;padding-left:34px;}
.btn.processing:before {content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:999px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite;}
@keyframes spin {to {transform:rotate(360deg);}}

/* overlay */
.overlay {position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:999;}
.overlay.on {display:flex;}
.overlayBox {background:rgba(10,20,48,.92);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;}
.loader {width:18px;height:18px;border-radius:999px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite;}
.overlayTxt {font-weight:900;}
hr {border:0;border-top:1px solid rgba(255,255,255,.10);margin:14px 0;}

.svcBox {display:flex;flex-direction:column;gap:10px;align-items:stretch;min-height:64px;max-width: 270px;}
.svcBox .statuspill {max-width:100%;}
.svcBox .label {max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.svcBtn {width:100%;text-align:center;}