:root{
  --bg:#f7f9fd; --bg2:#eef2f7; --card:#fff; --text:#1e2a3b; --muted:#5f6b7a;
  --border:#e5eaf2; --shadow:rgba(16,24,40,.06);
  --primary:#4f7cff; --primary2:#5f8cff; --ok:#14b885; --ring:#bfd2ff;
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  min-height:100vh; padding:24px;
}
.wrap{max-width:1200px;margin:0 auto}

/* GRID: sidebar a la izq, columna principal a la derecha */
.grid{
  display:grid; gap:24px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "sidebar"
    "main";
}
@media (min-width: 1024px){
  .grid{
    grid-template-columns: 240px 1fr;
    grid-template-areas: "sidebar main";
  }
}
.sidebar{ grid-area:sidebar }
.main-col{ grid-area:main; display:grid; gap:24px;}

/* Tarjetas */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:0 8px 20px var(--shadow);
}
.section-title{ margin:0 0 12px; font-size:22px; font-weight:800 }

/* Sidebar como lista de botones */
/* --- SIDEBAR --- */
.menu{
  display:flex;
  flex-direction:column;   /* fuerza listado vertical */
  gap:10px;
}
.menu-item{
  all: unset;                    /* si prefieres, puedes quitar esta línea */
  box-sizing: border-box;        /* ← evita que se “salgan” */
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
  background: #f2f6ff;
  color: #153b7b;
  border: 1px solid #d7e2ff;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  transition: filter .15s ease, transform .06s ease;
}
.menu-item:hover { filter: brightness(1.03); transform: translateY(-1px); }
.menu-item.is-active { background: #e8f0ff; border-color: #bcd2ff; }

/* (opcional) estado activo */
.menu-item.is-active{
  background:#e8f0ff;
  border-color:#bcd2ff;
}


/* Formulario */
/* Formulario: ancho estable */
.form-row{
  display: grid;
  grid-template-columns: 1fr max-content; /* input crece, botón ancho natural */
  gap: 12px;
  align-items: center;
}
.form-row input[type="text"]{
  width: 100%;
  min-width: 0;                 /* evita “saltos” al calcular ancho */
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 1px 2px var(--shadow) inset;
}
.form-row input[type="text"]:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}
.btn{ /* el tuyo actual funciona; lo dejo igual */
  border: 0;
  background: linear-gradient(180deg,var(--primary),var(--primary2));
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--shadow);
}

.btn:disabled{ opacity:.6; cursor:not-allowed }
.help{ font-size:12px; color:var(--muted); margin-top:8px }
.status{ font-size:13px; margin-top:6px; min-height:20px; color:var(--muted) }
.status.ok{ color:var(--ok) }

/* Resultados debajo del panel */
.results{
  border:1px dashed var(--border); border-radius:12px; padding:12px; background:#fbfdff; overflow:auto;
}

/* CONTENIDO INYECTADO: hacemos list items angostos y centrados */
.webhook-content{ display:block; padding:6px 2px }






:root{
  /* controla el ancho máximo de cada item (ajustable) */
  --result-max: 560px;
}

/* contenedor de resultados */
#listado { display: grid; gap: 8px; }

/* lista devuelta por el webhook */
#listado .lista-clientes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;                  /* menos separación entre renglones */
}

/* cada renglón: más compacto y alineado a la izquierda */
#listado .lista-clientes li{
  width: min(var(--result-max), 100%);
  margin: 0;                 /* ← izquierda (antes quizá tenías margin: 0 auto) */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;         /* ← menos alto */
  line-height: 1.2;          /* ← más compacto */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 3px 8px var(--shadow);
}

/* texto del nombre un poco más discreto */
#listado .lista-clientes li .nombre{
  font-weight: 700;
  font-size: 14px;           /* ↓ un punto */
  letter-spacing: .2px;
}

/* botón “Ver detalle” más pequeño */
#listado .lista-clientes li .open-modal{
  border: 1px solid var(--border);
  background: #eef4ff;
  color: #153b7b;
  border-radius: 8px;
  padding: 4px 10px;         /* ← menos alto */
  font-size: 12px;           /* ← más compacto */
  font-weight: 700;
}
#listado .lista-clientes li .open-modal:hover{ background: #e2ecff; }













/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:50; padding:18px
}
.modal-backdrop.show{ display:flex }
.modal{
  width:min(720px,96vw); background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.25); overflow:hidden
}
.modal header{
  padding:12px 16px; font-weight:800; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between
}
.modal .content{ padding:16px; max-height:70vh; overflow:auto }
.modal .close{ background:transparent; border:none; color:#6b7280; font-size:22px; cursor:pointer }

/* Responsive fino */
@media (max-width: 520px){
  .form-row{ flex-direction:column; align-items:stretch }
  .btn{ width:100% }
}