/* ============================================================================
   BASE — Auto-pintado de elementos HTML nativos dentro de .abk-scope
   ----------------------------------------------------------------------------
   Un módulo que envuelve su contenido en  <div class="abk-scope"> … </div>
   obtiene botones, campos, tablas, links y tipografía ya estilizados con el
   tema activo, SIN escribir una línea de CSS propia.

   Por qué va con scope: estas reglas SÓLO actúan dentro de .abk-scope. No
   tocan el markup viejo, ni widgets de terceros, ni los motores de engines/.
   Migrar un módulo viejo = añadir la clase .abk-scope a su contenedor raíz.

   Intención del botón:  data-variant="primary | danger | ok | ghost | bare"
   Tamaño del control:   data-size="sm | lg"

   Todo consume var(--abk-*). Cero hex hardcodeado (salvo #fff sobre color
   sólido de marca, igual que en _components.css).
   ============================================================================ */

/* ─── Tipografía base del contenedor ─── */
.abk-scope {
  color: var(--abk-text);
  font-family: var(--abk-font-family);
  font-size: var(--abk-font-size-base);
  line-height: var(--abk-line-height);
}

/* ─── Selección de texto ─── */
.abk-scope ::selection {
  background: var(--abk-primary-soft);
  color: var(--abk-text);
}

/* ─── Links ─── */
.abk-scope a {
  color: var(--abk-text-link);
  text-decoration: none;
}
.abk-scope a:hover { text-decoration: underline; }

/* ─── Botones (button + input submit/button) ─── */
.abk-scope button,
.abk-scope input[type="submit"],
.abk-scope input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abk-space-2);
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--abk-border-section);
  border-radius: var(--abk-radius-sm);
  background: var(--abk-surface);
  color: var(--abk-text);
  font-family: inherit;
  font-size: var(--abk-font-size-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--abk-transition-fast),
              border-color var(--abk-transition-fast),
              box-shadow var(--abk-transition-fast),
              color var(--abk-transition-fast),
              transform var(--abk-transition-fast),
              opacity var(--abk-transition-fast);
}
.abk-scope button:hover,
.abk-scope input[type="submit"]:hover,
.abk-scope input[type="button"]:hover {
  background: var(--abk-surface-2);
  border-color: var(--abk-border-strong);
}
.abk-scope button:active,
.abk-scope input[type="submit"]:active,
.abk-scope input[type="button"]:active { transform: translateY(1px); }
.abk-scope button:focus-visible,
.abk-scope input[type="submit"]:focus-visible,
.abk-scope input[type="button"]:focus-visible { outline: none; box-shadow: var(--abk-shadow-focus); }
.abk-scope button:disabled,
.abk-scope button[disabled],
.abk-scope input[type="submit"]:disabled,
.abk-scope input[type="button"]:disabled { opacity: .55; cursor: not-allowed; }

/* Variantes de intención */
.abk-scope button[data-variant="primary"] {
  background: var(--abk-primary);
  border-color: var(--abk-primary);
  color: var(--abk-text-on-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.abk-scope button[data-variant="primary"]:hover {
  background: var(--abk-primary-2);
  border-color: var(--abk-primary-2);
}
html[data-theme="dark"] .abk-scope button[data-variant="primary"] {
  background: var(--abk-primary-2);
  border-color: var(--abk-primary-3);
}
.abk-scope button[data-variant="ghost"] {
  background: transparent;
  border-color: var(--abk-border-section);
}
.abk-scope button[data-variant="danger"] {
  background: var(--abk-err);
  border-color: var(--abk-err);
  color: #fff;
}
.abk-scope button[data-variant="danger"]:hover {
  background: var(--abk-err-strong);
  border-color: var(--abk-err-strong);
}
.abk-scope button[data-variant="ok"] {
  background: var(--abk-ok);
  border-color: var(--abk-ok);
  color: #fff;
}
.abk-scope button[data-variant="ok"]:hover {
  background: var(--abk-ok-strong);
  border-color: var(--abk-ok-strong);
}
/* bare = botón sin pintar (íconos, toggles). Resetea el look base. */
.abk-scope button[data-variant="bare"] {
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}
.abk-scope button[data-variant="bare"]:hover { background: transparent; }

/* Tamaños */
.abk-scope button[data-size="sm"] { height: 30px; padding: 0 10px; font-size: var(--abk-font-size-sm); }
.abk-scope button[data-size="lg"] { height: 44px; padding: 0 20px; font-size: var(--abk-font-size-lg); border-radius: var(--abk-radius); }

/* ─── Campos de formulario (sólo inputs de texto + select + textarea) ─── */
.abk-scope textarea,
.abk-scope select,
.abk-scope input:where(
  [type="text"], [type="email"], [type="password"], [type="search"],
  [type="tel"], [type="url"], [type="number"], [type="date"],
  [type="datetime-local"], [type="time"], [type="month"], [type="week"]
) {
  font-family: inherit;
  font-size: var(--abk-font-size-base);
  color: var(--abk-input-text);
  background: var(--abk-input-bg);
  border: 1px solid var(--abk-input-border);
  border-radius: var(--abk-radius-sm);
  padding: 8px 10px;
  line-height: var(--abk-line-height);
  transition: border-color var(--abk-transition-fast),
              box-shadow var(--abk-transition-fast),
              background var(--abk-transition-fast);
  width: 100%;
  box-sizing: border-box;
}
.abk-scope input::placeholder,
.abk-scope textarea::placeholder { color: var(--abk-input-placeholder); }
.abk-scope textarea:focus,
.abk-scope select:focus,
.abk-scope input:where(
  [type="text"], [type="email"], [type="password"], [type="search"],
  [type="tel"], [type="url"], [type="number"], [type="date"],
  [type="datetime-local"], [type="time"], [type="month"], [type="week"]
):focus {
  outline: none;
  border-color: var(--abk-input-border-focus);
  box-shadow: var(--abk-shadow-focus);
}
.abk-scope textarea { min-height: 96px; resize: vertical; }

/* ─── Label ─── */
.abk-scope label {
  font-size: var(--abk-font-size-sm);
  font-weight: 600;
  color: var(--abk-text-soft);
}

/* ─── Tabla ─── */
.abk-scope table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--abk-font-size-base);
  color: var(--abk-text);
}
.abk-scope thead th {
  background: var(--abk-primary);
  color: var(--abk-text-on-primary);
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--abk-border-strong);
}
.abk-scope tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--abk-border-soft);
  vertical-align: middle;
}
.abk-scope tbody tr:last-child td { border-bottom: none; }
.abk-scope tbody tr:hover td { background: var(--abk-surface-2); }
html[data-theme="dark"] .abk-scope thead th { background: var(--abk-primary-2); }

/* ─── Separador ─── */
.abk-scope hr {
  border: 0;
  border-top: 1px solid var(--abk-border-soft);
  margin: var(--abk-space-4) 0;
}

/* ─── Código ─── */
.abk-scope code,
.abk-scope kbd,
.abk-scope pre { font-family: var(--abk-font-mono); font-size: .92em; }
.abk-scope pre {
  background: var(--abk-surface-2);
  border: 1px solid var(--abk-border-soft);
  border-radius: var(--abk-radius-sm);
  padding: var(--abk-space-3);
  overflow: auto;
}