:root{
  --bg: #0b0b10;
  --panel: #12121a;
  --panel-2: #141421;
  --text: #eee9f7;
  --muted: #bdb3d6;
  --line: #222235;

  --accent: #7b2cbf;
  --accent-2: #9d4edd;
  --accent-3: #5a189a;

  --accent-rgb: 123,44,191;
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(157,78,221,.05);
  --radius: 14px;
  --radius-sm: 10px;

  /* Nuevo: control de ancho centrado y respiración lateral */
  /*--page-max: 1180px;                     /* ancho objetivo en desktop */
  --page-pad: 16px;                       /* margen lateral mínimo */
  --page-pad-lg: 22px;                    /* margen en pantallas grandes */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(800px 500px at 10% -10%, rgba(var(--accent-rgb), .16), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(157,78,221,.14), transparent 65%),
    linear-gradient(180deg, #0b0b10, #0b0b10);
  background-attachment: fixed, fixed, fixed;
  font-size: clamp(14px, 1.1vw, 16px);
}

/* Contenedor: ocupa todo menos el padding lateral */
.container{
  width: calc(100vw - 2*var(--page-pad));
  max-width: none;         /* sin tope */
  margin: 50px auto;
  padding: 0;
  margin-top: 24px;
  margin-bottom: 24px;
  padding-left: 0;
  padding-right: 0;
}

/* Cabecera y pie alineados al mismo borde del contenedor */
.appbar{
  padding: 14px var(--page-pad);
}
.footer{
  padding: 24px var(--page-pad);
}
/*
.container{
  width: clamp(320px, 100vw - 2*var(--page-pad), var(--page-max));
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;
  padding-left: 0;
  padding-right: 0;
}
  */

.appbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px max(var(--page-pad), calc((100vw - var(--page-max))/2));
  background: linear-gradient(180deg, rgba(20,20,33,.8), rgba(18,18,26,.6));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px}
.logo{
  width:28px; height:28px; border-radius:8px;
  display:inline-grid; place-items:center;
  background: radial-gradient(100% 100% at 70% 0%, var(--accent-2), var(--accent-3));
  box-shadow: var(--shadow);
}
.title{font-weight:700; letter-spacing:.3px}

.nav a{
  margin-left:12px; text-decoration:none; color:var(--text);
  opacity:.9;
}
.nav a:hover{color:var(--accent-2)}

.footer{
  padding:24px max(var(--page-pad), calc((100vw - var(--page-max))/2));
  text-align:center; color:var(--muted); border-top:1px solid var(--line)
}

.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  max-width: 100%;
}
.card-elevated{ box-shadow: var(--shadow); }
.card-title{ margin:0 0 12px 0; font-size: clamp(18px, 1.6vw, 20px); font-weight:700 }

.grid{ display:grid }
.gap-12{ gap:12px }
.gap-16{ gap:16px }
.inline-grid{ grid-auto-flow: column; gap:8px; align-items:center }
.form-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width: 1200px){
  .form-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
}

.maxw-420{ max-width:420px; width:100% }
.center{ display:grid; place-items:center; min-height: calc(100vh - 120px) }

.field{ display:flex; flex-direction:column; gap:6px }
.field span{ font-size:13px; color:var(--muted) }

input, select, button{
  font: inherit; color:var(--text);
}
input, select{
  padding:10px 12px; border-radius: var(--radius-sm);
  background:#0f0f16; border:1px solid #202033;
  outline: none;
  transition: box-shadow .2s, border-color .2s, transform .02s;
}
input:focus, select:focus{
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(157,78,221,.15);
}

.actions{ display:flex; align-items:center; justify-content:flex-end }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius: 12px;
  border:1px solid #2a2a3d;
  background:#161626;
  color: var(--text); text-decoration:none;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(157,78,221,.12); }
.btn:active{ transform: scale(.98) }

.btn-primary{
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent-2), var(--accent-3));
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), .35);
}
.btn-primary:hover{ box-shadow: 0 8px 26px rgba(var(--accent-rgb), .45) }

.btn-outline{
  background: transparent;
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.btn-outline:hover{ background: rgba(157,78,221,.08) }

.btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-ghost:hover{ color: var(--accent-2) }

.badge{
  margin-left:8px; font-size:12px; padding:3px 8px;
  border-radius: 999px; background: rgba(157,78,221,.15);
  border: 1px solid rgba(157,78,221,.35); color: var(--accent-2);
}

.muted{ color: var(--muted) }
.nowrap{ white-space: nowrap }
@media (max-width: 720px){
  .nowrap{ white-space: normal; }
}
.code, code{ background:#0e0e16; padding:2px 6px; border-radius:8px; border:1px solid #1f1f2e }

.table-wrap{ overflow:auto; border-radius: 12px; border:1px solid var(--line) }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid #1d1d2b; vertical-align: middle; min-width: 80px; }
.table thead th{
  position: sticky; top:0; z-index:1;
  background:#141425; text-align:left; font-weight:600; color:#d9cff1;
}
.table code{ word-break: break-all; white-space: pre-wrap; }

.chip{
  font-size:12px; padding:4px 8px; border-radius: 999px; border:1px solid #2a2a3f;
}
.chip-on{ background: rgba(58,199,115,.12); border-color: rgba(58,199,115,.35); color:#9CF6C4 }
.chip-off{ background: rgba(235,87,87,.08); border-color: rgba(235,87,87,.35); color:#F5A3A3 }

.input-inline{
  width: 160px; padding:8px 10px; border-radius:10px; border:1px solid #2a2a3d; background:#0f0f16; color:var(--text);
}

/* ===== Modal ===== */
.modal{
  position: fixed; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.modal[aria-hidden="false"]{ pointer-events: auto; opacity: 1; }
.modal__overlay{
  position: absolute; inset: 0; background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.modal__content{
  position: relative;
  width: clamp(320px, 70vw, 820px);
  max-width: 96vw;
  z-index: 1; animation: pop .12s ease;
}
@keyframes pop{ from{ transform: scale(.98); opacity:.9 } to{ transform: scale(1); opacity:1 } }

/* ===== Toaster ===== */
.toaster{
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 10px;
  z-index: 9999;
}
.toast{
  min-width: 260px;
  max-width: 420px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #2a2a3d;
  background: #161626;
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.toast.show{
  transform: translateY(0);
  opacity: 1;
}
.toast-success{ border-color: rgba(58,199,115,.35); }
.toast-error  { border-color: rgba(235,87,87,.35); }
.toast-info   { border-color: rgba(157,78,221,.35); }

/* Activo en la barra de navegación */
.nav a.active{
  color: var(--accent-2);
  font-weight: 700;
  border-bottom: 2px solid var(--accent-2);
  padding-bottom: 6px;
}

/* Separador fino en la barra */
.nav .divider{
  display:inline-block;
  width:1px;
  height:20px;
  margin:0 10px;
  background: var(--line);
  vertical-align: middle;
  opacity:.6;
}

/* Botones un poco más generosos en pantallas grandes */
@media (min-width: 1280px){
  .btn{ padding:12px 16px; }
}