.net-pill {
  height: 32px; padding: 0 10px; border-radius: 16px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: .15s;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.net-pill:hover { border-color: var(--accent-primary); color: var(--text); }
.net-pill.ok { color: #34d399; border-color: rgba(52, 211, 153, .5); }
.net-pill.wait { color: var(--accent-warning); border-color: rgba(251, 191, 36, .5); }
.net-pill.err { color: var(--accent-danger); border-color: rgba(248, 113, 113, .5); }

.proposal {
  padding: 12px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--accent-warning);
}
.proposal-title { font-weight: 700; font-size: 12px; color: var(--accent-warning); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.proposal p { margin-bottom: 10px; }
.proposal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.proposal-result { font-size: 13px; }
.proposal-result.error { color: var(--accent-danger); }

.btn-primary, .btn-ghost, .btn-danger, .btn-sm {
  padding: 7px 12px; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: .15s;
}
.btn-primary { background: var(--grad); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-danger { background: transparent; color: var(--accent-danger); border-color: rgba(248, 113, 113, .5); }
.btn-primary:hover, .btn-ghost:hover, .btn-danger:hover { filter: brightness(1.15); }
.btn-primary:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity: .5; cursor: default; }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 1000;
  padding: 10px 16px; border-radius: 12px; font-size: 13px; color: var(--text-inverse);
  background: var(--accent-primary); box-shadow: var(--shadow-lg); max-width: 90%;
}
.toast.error { background: var(--accent-danger); color: #fff; }

/* ---------- Ajustes (rediseño) ---------- */
.settings-view {
  --sv-radius: 14px; --sv-input: #11131d; --sv-ring: 0 0 0 3px rgba(167, 139, 250, .28);
  position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: radial-gradient(520px 240px at 100% -5%, rgba(124, 58, 237, .16), transparent 70%), var(--bg);
  animation: sv-in .32s var(--ease) both;
}
@keyframes sv-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.sv-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.sv-header strong { font-size: 18px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.sv-header strong::before {
  content: ""; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E") center / 16px no-repeat, var(--grad); color: #fff; font-size: 15px; box-shadow: 0 6px 16px rgba(124, 58, 237, .35);
}
.sv-tabs {
  display: flex; gap: 4px; margin: 12px 16px 4px; padding: 4px; flex: none;
  overflow-x: auto; scrollbar-width: none; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
}
.sv-tabs::-webkit-scrollbar { display: none; }
.sv-tab {
  flex: 1 0 auto; padding: 7px 11px; border-radius: 9px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), color .2s, box-shadow .2s;
}
.sv-tab:hover { color: var(--text); background: var(--surface-2); }
.sv-tab.active { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, .3); }
.sv-tab:focus-visible { outline: none; box-shadow: var(--sv-ring); }
.sv-body {
  flex: 1; overflow-y: auto; padding: 14px 16px 28px; display: flex; flex-direction: column; gap: 22px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.sv-body > * { animation: fade-up .3s var(--ease) both; }

.sv-section { display: flex; flex-direction: column; gap: 10px; }
.sv-section > h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--muted); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 2px;
}

.card {
  padding: 13px 14px; border-radius: var(--sv-radius); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), var(--surface);
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: #3b3e58; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.card.active { border-color: var(--accent-primary); box-shadow: 0 0 0 1px rgba(167, 139, 250, .35), 0 8px 22px rgba(124, 58, 237, .18); }
.card.dim { opacity: .55; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title { font-weight: 650; font-size: 13.5px; word-break: break-word; }
.card-sub { font-size: 11.5px; color: var(--muted); word-break: break-word; line-height: 1.45; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .06); margin-top: 2px; }
.badge { font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; letter-spacing: .02em; }
.badge.ok { background: rgba(52, 211, 153, .14); color: var(--ok); }
.badge.warn { background: rgba(251, 191, 36, .14); color: var(--accent-warning); }
.badge.err { background: rgba(248, 113, 113, .14); color: var(--accent-danger); }

.btn-primary, .btn-ghost, .btn-danger, .btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s var(--ease), filter .15s, background .15s, border-color .15s, box-shadow .15s;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(124, 58, 237, .28); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-danger { background: rgba(248, 113, 113, .08); color: var(--accent-danger); border-color: rgba(248, 113, 113, .35); }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost:hover { border-color: var(--accent-primary); background: #2a2c40; }
.btn-danger:hover { background: rgba(248, 113, 113, .16); }
.btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: scale(.97); }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167, 139, 250, .28); }
.btn-primary:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.btn-sm { padding: 4px 10px; font-size: 11px; border-radius: 8px; }

.form {
  display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--sv-radius, 14px);
  background: var(--surface); border: 1px solid rgba(167, 139, 250, .45); box-shadow: 0 10px 28px rgba(124, 58, 237, .14);
  animation: fade-up .25s var(--ease) both;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 11.5px; font-weight: 600; color: #c4c6d8; }
.field small { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.form input[type="text"], .form input[type="password"], .form input[type="number"], .form input[type="url"], .form select, .form textarea,
.sv-body input[type="number"], .sv-body input[type="text"], .sv-body input[type="password"], .sv-body select {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--sv-input, var(--bg)); color: var(--text); font: inherit; font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s;
}
.form input:hover, .form select:hover, .form textarea:hover, .sv-body input:hover, .sv-body select:hover { border-color: #3d4060; }
.form input:focus, .form select:focus, .form textarea:focus, .sv-body input:focus, .sv-body select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(167, 139, 250, .28); }
.form textarea { min-height: 84px; resize: vertical; font-family: "Cascadia Code", Consolas, monospace; font-size: 11.5px; line-height: 1.5; }
.form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.form .row > * { flex: 1 1 120px; min-width: 0; }
.form-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.check-row { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text); padding: 6px 0; cursor: pointer; }
.sv-body input[type="checkbox"] {
  appearance: none; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .2s, border-color .2s;
}
.sv-body input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted);
  transition: transform .2s var(--ease), background .2s;
}
.sv-body input[type="checkbox"]:checked { background: var(--accent-primary); border-color: transparent; }
.sv-body input[type="checkbox"]:checked::after { transform: translateX(14px); background: #fff; }
.sv-body input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167, 139, 250, .28); }

.result { font-size: 12px; padding: 10px 12px; border-radius: 10px; word-break: break-word; border: 1px solid transparent; animation: fade-up .2s var(--ease) both; }
.result.ok { background: rgba(52, 211, 153, .1); color: var(--ok); border-color: rgba(52, 211, 153, .25); }
.result.err { background: rgba(248, 113, 113, .1); color: var(--accent-danger); border-color: rgba(248, 113, 113, .25); }
.result.info { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn { padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--border); background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; transition: all .15s; }
.chip-btn:hover { color: var(--text); border-color: var(--accent-primary); border-style: solid; background: rgba(167, 139, 250, .08); }
.check-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11.5px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12px; padding: 10px 12px; border-radius: 10px; background: var(--sv-input, var(--bg)); }
.kv dt { color: var(--muted); }
.kv dd { word-break: break-all; }
.dot { font-weight: 700; }
.dot.ok { color: var(--ok); } .dot.wait { color: var(--accent-warning); } .dot.err { color: var(--accent-danger); } .dot.off { color: var(--muted); }
.empty { font-size: 12px; color: var(--muted); padding: 6px 2px; }
.sv-body .empty { padding: 18px 12px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }

.models-out { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.model-card { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s; }
.model-card:hover { border-color: #3d4060; }
.model-card.retired { opacity: .5; border-style: dashed; }
.cap-chip { font-size: 10px; padding: 2px 8px; border-radius: 999px; }
.cap-chip.confirmed { background: rgba(52, 211, 153, .14); color: var(--ok); }
.cap-chip.inferred { border: 1px dashed var(--muted); color: var(--muted); }

:root[data-reduce-motion] .settings-view, :root[data-reduce-motion] .sv-body > *, :root[data-reduce-motion] .form, :root[data-reduce-motion] .result { animation: none; }


.sv-head-actions { display: flex; gap: 6px; }