*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
html{overflow-y:scroll;scrollbar-gutter:stable}

body{
  background:#0b1117;
  color:#e5e7eb;
  font-family:Inter,Arial,sans-serif;
}

.app{display:flex;min-height:100vh}



/* ===== CONTENT ===== */
.content{
  flex:1;
  padding:30px;
}

/* ===== HEADER ===== */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.main{
  display:grid;
  grid-template-columns:720px 1fr;
  gap:20px;
}


/* ===== TABLE DESKTOP (CORRECTA) ===== */
.table-wrap{width:100%}

table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto; /* CLAVE */
}

th:nth-child(1), td:nth-child(1){ width:16%; } /* Cliente */
th:nth-child(2), td:nth-child(2){ width:13%; } /* Usuario */
th:nth-child(3), td:nth-child(3){ width:12%; } /* Canal */
th:nth-child(4), td:nth-child(4){ width:10%; } /* �ltima conexi�n */
th:nth-child(5), td:nth-child(5){ width:8%; }  /* Estado */
th:nth-child(6), td:nth-child(6){ width:12%; } /* Acciones */

th,td{
  padding:10px;
  border-bottom:1px solid #1f2937;
  font-size:13px;
  white-space:nowrap;
  text-align:left;
}

th{color:#cbd5f5}

.status.active{color:#22c55e}
.status.disabled{color:#ef4444}


/* ===== MOBILE ===== */
.mobile-header,
.mobile-menu,
.mobile-cards{display:none}

@media(max-width:768px){


  .header,
  .table-wrap{display:none}

  .app{flex-direction:column}

  .mobile-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 15px;
    background:#0d1420;
  }


  .mobile-title{font-weight:600}

  .mobile-menu{
    background:#0f172a;
    border-bottom:1px solid #1e293b;
  }

  .mobile-menu a{
    display:block;
    padding:14px 16px;
    color:#e5e7eb;
    text-decoration:none;
  }

  .mobile-menu.show{display:block}

  .content{padding:15px}

  /* ===== CARDS ===== */
  .mobile-cards{display:block}

  .card{
    background:#0f172a;
    border:1px solid #1e293b;
    border-radius:10px;
    padding:14px;
    margin-bottom:12px;
  }

  .card h3{margin:0 0 6px;font-size:15px}
  .card p{margin:2px 0;font-size:13px}
  .card .actions{margin-top:10px;flex-wrap:wrap}
}
.client-cell{
  display:flex;
  align-items:center;
  gap:22px;
}

.client-logo{
  width:34px;
  height:34px;
  border-radius:4px;
  object-fit:contain;
  background:#020617;
  border:1px solid #1f2937;
  flex-shrink:0;
}

.search-box{
  margin: 0 0 18px;
}

.search-box input{
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  background: #020617;
  border: 1px solid #1e293b;
  color: #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.search-box input::placeholder{
  color: #9ca3af;
}

.search-box input:focus{
  border-color: #60a5fa;
}
/* ===== POPUP CONFIG ===== */
.config-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.config-overlay.show{
  display:flex;
}

.config-modal{
  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:10px;
  padding:22px;
  width:100%;
  max-width:820px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.config-modal h2{
  margin:0 0 10px;
  font-size:16px;
  color:#60a5fa;
}

.config-modal p{
  font-size:14px;
  color:#cbd5f5;
}

.modal-actions{
  margin-top:18px;
  text-align:right;
}

.btn-cancel{
  background:#1e293b;
  color:#e5e7eb;
  border:0;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}.config-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.config-section label{
  font-size:13px;
  color:#cbd5f5;
}

.config-section input{
  background:#020617;
  border:1px solid #1e293b;
  color:#fff;
  padding:8px;
  border-radius:6px;
  font-size:13px;
}

.config-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.cfg-msg{
  margin-top:10px;
  font-size:13px;
}
.last-connection{
    font-size:13px;
    color:#9ca3af;
    white-space:nowrap;
}