/* =========================================================
   2. Base y layout general
   ========================================================= */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--fg);
  background: var(--bg-canvas);
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
kbd {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  background: var(--hover); color: var(--fg-2); white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--panel);
  font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--hover); }
.btn:active { background: var(--active); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn:disabled { opacity: .45; cursor: default; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius); color: var(--fg-2);
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--hover); color: var(--fg); }
.icon-btn svg { width: 16px; height: 16px; }

input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input:not([type]), textarea, select { /* P10: email/password también (invitar, eliminar org, acceso) */
  width: 100%; padding: 6px 8px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
textarea { resize: vertical; min-height: 52px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px; border-radius: 4px; font-size: 11.5px; font-weight: 500;
  line-height: 18px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}