/* ── Control panel design tokens (inherits from main.css design system) ── */
:root {
  /* ── Brand strong surface (WCAG 2.2 AA) ──
     --brand-primary (#33BEFF) es un fondo de MARCA, no un fondo de texto:
     con blanco da 2.11:1 y con --color-white-80 1.80:1 (AA exige 4.5:1).
     Estos tokens son el equivalente accesible y son FIJOS en ambos temas
     (por eso NO se redefinen en el bloque [data-theme="dark"]): main.css
     aliasa --brand-primary-dark → --brand-primary en dark, así que ese
     token no sirve como fondo opaco de texto en dark.
     Ratios verificados con axe-core sobre --cp-brand-surface-strong. */
  --cp-brand-surface-strong: #0369a1;           /* == valor light de --brand-primary-dark */
  --cp-brand-surface-strong-hover: #075985;     /* blanco → 7.5:1 */
  --cp-brand-surface-strong-fg: #ffffff;        /* → 5.9:1 */
  --cp-brand-surface-strong-fg-muted: #e0f2fe;  /* → 5.1:1 (opaco: sin alpha-compositing) */

  /* Texto muted del control panel. Apunta al token semántico theme-aware:
     en light gray-600 (6.9:1 sobre --color-bg-elevated), en dark slate-300
     (7.0:1 sobre slate-700 y 12:1 sobre slate-900). El gray-400 anterior
     (#9ca3af) caía a 2.3:1 y el slate-500 de dark a 2.2:1. */
  --cp-text-muted: var(--color-text-secondary);

  /* fg de <code> sobre .cp-bg-elevated (ver regla code.cp-bg-elevated) */
  --cp-code-fg: var(--cp-alert-info-text);

  /* WCAG 2.2 AA — SC 2.5.8 Target Size (Minimum): 24×24 CSS px */
  --cp-target-size-min: 1.5rem;

  /* Alert tokens — light */
  --cp-alert-success-bg: #dcfce7;
  --cp-alert-success-text: #166534;
  --cp-alert-success-border: #86efac;
  --cp-alert-error-bg: #fee2e2;
  --cp-alert-error-text: #991b1b;
  --cp-alert-error-border: #fca5a5;
  --cp-alert-info-bg: #dbeafe;
  --cp-alert-info-text: #1e40af;
  --cp-alert-info-border: #93c5fd;
  --cp-alert-warning-bg: #fef3c7;
  --cp-alert-warning-text: #92400e;
  --cp-alert-warning-border: #fcd34d;

  /* Status badge tokens — light */
  --cp-status-green-bg: #dcfce7;
  --cp-status-green-text: #15803d;
  --cp-status-blue-bg: #dbeafe;
  --cp-status-blue-text: #1d4ed8;
  --cp-status-blue-dot: #60a5fa;
  --cp-status-red-bg: #fee2e2;
  --cp-status-red-text: #b91c1c;
  --cp-status-neutral-bg: var(--color-bg-elevated);
  --cp-status-neutral-text: var(--color-text-secondary);
  --cp-status-purple-bg: #f3e8ff;
  --cp-status-purple-text: #7e22ce;
  --cp-status-sky-bg: #e0f2fe;
  --cp-status-sky-text: #0369a1;
  --cp-status-indigo-bg: #e0e7ff;
  --cp-status-indigo-text: #4338ca;
  --cp-status-amber-bg: #fef3c7;
  --cp-status-amber-text: #b45309;
  --cp-status-yellow-bg: #fef9c3;
  --cp-status-yellow-text: #a16207;

  /* Activity & context menu tokens — light */
  /* orange-700: orange-600 (#ea580c) daba 3.55:1 sobre --color-bg-surface (blanco) */
  --cp-activity-hot: #c2410c;
  --cp-activity-normal: #3b82f6;
  --cp-ctx-config: #c2410c;
  --cp-ctx-activate: #15803d;
  --cp-ctx-config-bg-hover: #fff7ed;
  --cp-ctx-activate-bg-hover: #f0fdf4;

  /* Action button tokens — light */
  --cp-btn-warn-bg: #fff7ed;
  --cp-btn-warn-text: #c2410c;   /* orange-700 → 4.9:1 sobre --cp-btn-warn-bg (orange-600 daba 3.35:1) */
  --cp-btn-warn-border: #fed7aa;
  --cp-btn-warn-bg-hover: #ffedd5;
  --cp-btn-activate-bg: #f0fdf4;
  --cp-btn-activate-text: #15803d;
  --cp-btn-activate-border: #bbf7d0;
  --cp-btn-activate-bg-hover: #dcfce7;
  --cp-btn-verify-bg: #ecfdf5;
  --cp-btn-verify-text: #047857;
  --cp-btn-verify-border: #a7f3d0;
  --cp-btn-verify-bg-hover: #d1fae5;
  --cp-btn-info-bg: #f0f9ff;
  --cp-btn-info-text: #0369a1;
  --cp-btn-info-border: #bae6fd;
  --cp-btn-info-bg-hover: #e0f2fe;

  /* Deployment & summary card gradient tokens — light */
  --cp-deployment-gradient-from: #eef2ff;
  --cp-deployment-gradient-to: #eff6ff;
  --cp-deployment-border: #c7d2fe;
  --cp-summary-gradient-from: #eff6ff;
  --cp-summary-gradient-to: #f0f9ff;
  --cp-summary-border: #bfdbfe;

  /* Badge & field tokens — light */
  --cp-badge-deployment-bg: #e0e7ff;
  --cp-badge-deployment-text: #3730a3;
  --cp-field-global-bg: #fff7ed;
  --cp-field-global-border: #fb923c;
  --cp-field-global-text: #c2410c;   /* 4.9:1 sobre --cp-field-global-bg */
  --cp-badge-warning-bg: #fef9c3;
  --cp-badge-warning-text: #a16207;
  --cp-status-text-warning: #ca8a04;

  /* ── Badge warning DENTRO del navbar (WCAG 2.2 AA) ──
     El badge «Alfa» del ítem «Zelebrix Benefits» vive sobre el navbar, y el
     navbar es opaco y FIJO en ambos temas (--cp-brand-surface-strong, #0369a1).
     El par genérico de dark NO sirve ahí: --cp-badge-warning-bg es
     rgba(250,204,21,.12), o sea que se COMPONE con lo que tenga detrás — sobre
     el azul del navbar da rgb(33,117,144), y el texto #facc15 encima se queda en
     3,42:1 (AA exige 4,5:1). Sobre una tarjeta (slate-800) el mismo par da
     7,28:1, y por eso el token global se deja como está.
     Estos dos son OPACOS (el compuesto es el propio color) y FIJOS en ambos
     temas, igual que --cp-brand-surface-strong y por el mismo motivo. Ratio del
     par: 7,45:1; el fondo del badge contra el del navbar, 5,09:1 (SC 1.4.11).
     Verificados en ControlPanelContrastTokenTests. */
  --cp-navbar-badge-warning-bg: #fef08a;
  --cp-navbar-badge-warning-text: #713f12;

  /* Brand light (dark mode) token — light mode fallback */
  --cp-brand-light: #7dd3fc;

  /* Module icon & gateway tokens — light */
  --cp-module-icon-accent: #f3e8ff;
  --cp-gw-stripe-bg: #ede9fe;
  --cp-gw-stripe-text: #6d28d9;
  --cp-gw-revolut-bg: #e0f2fe;
  --cp-gw-revolut-text: #0369a1;
  --cp-revolut-dot: #818cf8;

  /* Borde de la tarjeta de modulo SIN marcar (rubrica O2: >=1,5 frente al panel).
     --color-border-default (gray-200) daba 1,24:1 sobre --color-bg-surface; gray-400, 2,5:1. */
  --cp-check-card-border: var(--gray-400);
}

[data-theme="dark"] {
  /* Only CP-specific overrides — inherited var() tokens resolve automatically via main.css dark.
     --cp-text-muted ya NO se sobrescribe aquí: el slate-500 (#64748b) daba 2.2:1 sobre
     --color-bg-elevated (slate-700) y 3.8:1 sobre --color-bg-page (slate-900). El alias a
     --color-text-secondary de :root resuelve solo a slate-300 en dark. */

  /* blue-300 → 5.7:1 sobre --color-bg-elevated (slate-700); --color-info (#60a5fa) daba 4.07:1 */
  --cp-code-fg: #93c5fd;

  /* slate-600 sobre --color-bg-surface (slate-800): 1,9:1; el slate-700 de antes daba 1,41:1 */
  --cp-check-card-border: var(--color-border-strong);

  /* Alert tokens — dark (text uses main.css design tokens) */
  --cp-alert-success-bg: var(--color-success-bg);
  --cp-alert-success-text: var(--color-success);
  --cp-alert-success-border: rgba(74, 222, 128, 0.3);
  --cp-alert-error-bg: var(--color-error-bg);
  /* red-300: --color-error (red-400) daba 4.46:1 sobre el fondo del aviso en oscuro (axe, login de Control) */
  --cp-alert-error-text: var(--color-status-error-text);
  --cp-alert-error-border: rgba(248, 113, 113, 0.3);
  --cp-alert-info-bg: var(--color-info-bg);
  --cp-alert-info-text: var(--color-info);
  --cp-alert-info-border: rgba(96, 165, 250, 0.3);
  --cp-alert-warning-bg: var(--color-warn-bg);
  --cp-alert-warning-text: var(--color-warn);
  --cp-alert-warning-border: rgba(251, 191, 36, 0.3);

  /* Status badge tokens — dark (text uses main.css design tokens) */
  --cp-status-green-bg: var(--color-success-bg);
  --cp-status-green-text: var(--color-success);
  --cp-status-blue-bg: var(--color-info-bg);
  --cp-status-blue-text: var(--color-info);
  --cp-status-blue-dot: var(--color-info);
  --cp-status-red-bg: var(--color-error-bg);
  --cp-status-red-text: var(--color-error);
  --cp-status-neutral-bg: var(--color-bg-elevated);
  --cp-status-neutral-text: var(--color-text-secondary);
  --cp-status-purple-bg: rgba(192, 132, 252, 0.12);
  --cp-status-purple-text: #c084fc;
  --cp-status-sky-bg: rgba(56, 189, 248, 0.12);
  --cp-status-sky-text: #38bdf8;
  --cp-status-indigo-bg: rgba(129, 140, 248, 0.12);
  --cp-status-indigo-text: #818cf8;
  --cp-status-amber-bg: var(--color-warn-bg);
  --cp-status-amber-text: var(--color-warn);
  --cp-status-yellow-bg: rgba(250, 204, 21, 0.12);
  --cp-status-yellow-text: #facc15;

  /* Activity & context menu tokens — dark */
  --cp-activity-hot: #fb923c;
  --cp-activity-normal: var(--color-info);
  --cp-ctx-config: #fb923c;
  --cp-ctx-activate: var(--color-success);
  --cp-ctx-config-bg-hover: rgba(251, 146, 60, 0.12);
  --cp-ctx-activate-bg-hover: rgba(74, 222, 128, 0.12);

  /* Action button tokens — dark */
  --cp-btn-warn-bg: rgba(251, 146, 60, 0.12);
  --cp-btn-warn-text: #fb923c;
  --cp-btn-warn-border: rgba(251, 146, 60, 0.3);
  --cp-btn-warn-bg-hover: rgba(251, 146, 60, 0.2);
  --cp-btn-activate-bg: rgba(74, 222, 128, 0.12);
  --cp-btn-activate-text: var(--color-success);
  --cp-btn-activate-border: rgba(74, 222, 128, 0.3);
  --cp-btn-activate-bg-hover: rgba(74, 222, 128, 0.2);
  --cp-btn-verify-bg: rgba(52, 211, 153, 0.12);
  --cp-btn-verify-text: #34d399;
  --cp-btn-verify-border: rgba(52, 211, 153, 0.3);
  --cp-btn-verify-bg-hover: rgba(52, 211, 153, 0.2);
  --cp-btn-info-bg: rgba(56, 189, 248, 0.12);
  --cp-btn-info-text: #38bdf8;
  --cp-btn-info-border: rgba(56, 189, 248, 0.3);
  --cp-btn-info-bg-hover: rgba(56, 189, 248, 0.2);

  /* Deployment & summary card gradient tokens — dark */
  --cp-deployment-gradient-from: rgba(129, 140, 248, 0.08);
  --cp-deployment-gradient-to: rgba(96, 165, 250, 0.08);
  --cp-deployment-border: rgba(129, 140, 248, 0.25);
  --cp-summary-gradient-from: rgba(96, 165, 250, 0.06);
  --cp-summary-gradient-to: rgba(56, 189, 248, 0.06);
  --cp-summary-border: rgba(96, 165, 250, 0.2);

  /* Badge & field tokens — dark */
  --cp-badge-deployment-bg: rgba(129, 140, 248, 0.15);
  --cp-badge-deployment-text: #818cf8;
  --cp-field-global-bg: rgba(251, 146, 60, 0.1);
  --cp-field-global-border: rgba(251, 146, 60, 0.4);
  --cp-field-global-text: #fb923c;
  --cp-badge-warning-bg: rgba(250, 204, 21, 0.12);
  --cp-badge-warning-text: #facc15;
  --cp-status-text-warning: #facc15;

  /* Module icon & gateway tokens — dark */
  --cp-module-icon-accent: rgba(192, 132, 252, 0.15);
  --cp-gw-stripe-bg: rgba(139, 92, 246, 0.15);
  --cp-gw-stripe-text: #a78bfa;
  --cp-gw-revolut-bg: rgba(56, 189, 248, 0.12);
  --cp-gw-revolut-text: #38bdf8;
  --cp-revolut-dot: #a5b4fc;
}

html[data-theme="dark"], html[data-theme="dark"] body {
  background-color: var(--color-bg-page); color: var(--color-text-primary);
}

/* ── Semantic utility classes (prefixed cp- to avoid collisions with main.css) ── */
.cp-bg-page { background-color: var(--color-bg-page); }
.cp-bg-surface { background-color: var(--color-bg-surface); }
.cp-bg-elevated { background-color: var(--color-bg-elevated); }
.text-primary-semantic { color: var(--color-text-primary); }
.text-secondary-semantic { color: var(--color-text-secondary); }
.text-muted-semantic { color: var(--cp-text-muted); }
.cp-border-default { border-color: var(--color-border-default); }
.cp-border-strong { border-color: var(--color-border-strong); }

/* <code> sobre superficie elevada: hereda el fg del alert contenedor
 * (--color-info en dark) que sólo da 4.07:1 sobre slate-700. */
code.cp-bg-elevated { color: var(--cp-code-fg); }

/* ── Región con scroll horizontal (WCAG 2.1.1 / axe scrollable-region-focusable) ──
   Un wrapper con overflow-x sin contenido focusable no se puede desplazar con
   teclado. Los templates le ponen tabindex="0" + role="region"; aquí sólo el
   anillo de foco tokenizado (misma receta que .cp-focus). */
.cp-scroll-region:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-focus-ring);
}

/* ── Buttons ── */
.btn-cp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--font-semibold); transition: all var(--transition-fast);
  cursor: pointer; border: none;
}
/* WCAG 2.2 AA: el fondo de un botón con texto no puede ser --brand-primary
 * (blanco sobre esa marca = 2.11:1). Usa la superficie brand accesible. */
.btn-cp-primary { background: var(--cp-brand-surface-strong); color: var(--cp-brand-surface-strong-fg); }
.btn-cp-primary:hover { background: var(--cp-brand-surface-strong-hover); }
.btn-cp-success { background: var(--color-success); color: var(--color-text-inverse); }
.btn-cp-success:hover { opacity: 0.9; }
.btn-cp-danger { background: var(--color-error); color: var(--color-text-inverse); }
.btn-cp-danger:hover { opacity: 0.9; }

/* ── Alerts ── */
.alert-cp { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); border: 1px solid; }
.alert-cp-success { background: var(--cp-alert-success-bg); color: var(--cp-alert-success-text); border-color: var(--cp-alert-success-border); }
.alert-cp-error { background: var(--cp-alert-error-bg); color: var(--cp-alert-error-text); border-color: var(--cp-alert-error-border); }
.alert-cp-info { background: var(--cp-alert-info-bg); color: var(--cp-alert-info-text); border-color: var(--cp-alert-info-border); }
.alert-cp-warning { background: var(--cp-alert-warning-bg); color: var(--cp-alert-warning-text); border-color: var(--cp-alert-warning-border); }

/* ── Focus ring ── */
/* :focus fallback for older browsers; :not(:focus-visible) hides ring on mouse clicks */
.cp-focus:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-focus-ring); border-color: var(--brand-primary); }
/* Modern :focus-visible + container :focus-within */
.cp-focus:focus-visible,
.cp-focus-within:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-focus-ring);
  border-color: var(--brand-primary);
}
.cp-focus:focus:not(:focus-visible) { box-shadow: none; border-color: var(--color-border-strong); }
[data-theme="dark"] .cp-focus:focus-visible,
[data-theme="dark"] .cp-focus-within:focus-within {
  box-shadow: 0 0 0 2px var(--brand-focus-ring);
  border-color: var(--brand-primary);
}

/* ── Navbar ── */
/* El fondo era --brand-primary (#33BEFF): con el título en blanco daba 2.11:1 y
   con los enlaces en --color-white-80 1.80:1. El override dark apuntaba a
   --brand-primary-dark, que main.css aliasa a --brand-primary en dark, así que
   no cambiaba nada. --cp-brand-surface-strong es opaco y fijo en ambos temas. */
.cp-navbar {
  background-color: var(--cp-brand-surface-strong);
  position: sticky;
  top: 0;
  z-index: var(--z-header, 400);
}

/* ── Theme toggle icon visibility ── */
[data-theme="light"] .theme-icon-light,
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-dark,
[data-theme="dark"] .theme-icon-light { display: block; }
html:not([data-theme]) .theme-icon-light { display: none; }

/* ── Status badges ── */
.cp-status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.125rem 0.5rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); line-height: 1rem; font-weight: var(--font-medium);
}
.cp-status--semibold { font-weight: var(--font-semibold); padding: 0.125rem var(--space-2-5); }
.cp-status--roomy { gap: var(--space-1-5); padding: var(--space-1) var(--space-2-5); }

.cp-status__dot {
  display: inline-block; width: var(--space-1-5); height: var(--space-1-5);
  border-radius: var(--radius-full);
}

.cp-status--active,
.cp-status--ok        { background: var(--cp-status-green-bg); color: var(--cp-status-green-text); }
.cp-status--info      { background: var(--cp-status-blue-bg); color: var(--cp-status-blue-text); }
.cp-status--info .cp-status__dot { background: var(--cp-status-blue-dot); }
.cp-status--creating  { background: var(--cp-status-blue-bg); color: var(--cp-status-blue-text); }
.cp-status--creating .cp-status__dot { background: var(--cp-status-blue-dot); }
.cp-status--error,
.cp-status--failed    { background: var(--cp-status-red-bg); color: var(--cp-status-red-text); }
.cp-status--paused,
.cp-status--default   { background: var(--cp-status-neutral-bg); color: var(--cp-status-neutral-text); }
.cp-status--expired   { background: var(--cp-status-purple-bg); color: var(--cp-status-purple-text); }
.cp-status--ssl-pending { background: var(--cp-status-sky-bg); color: var(--cp-status-sky-text); }
.cp-status--subdomain-created { background: var(--cp-status-indigo-bg); color: var(--cp-status-indigo-text); }
.cp-status--pending   { background: var(--cp-status-indigo-bg); color: var(--cp-status-indigo-text); }
.cp-status--draft,
.cp-status--info-amber,
.cp-status--action-recommended { background: var(--cp-status-amber-bg); color: var(--cp-status-amber-text); }
.cp-status--warning,
.cp-status--expiring  { background: var(--cp-status-yellow-bg); color: var(--cp-status-yellow-text); }

/* Bordered variant (#2435 terminal CMDB) — reuses each variant's own text color
   for the border, so it adds zero new design tokens. */
.cp-status--bordered { border: 1px solid currentColor; }

/* ── Links ── */
.cp-link {
  color: var(--brand-primary-dark);
  transition: color var(--transition-fast);
}
/* WCAG 2.2 AA — SC 2.5.8 Target Size (Minimum). Un .cp-link dentro de una celda
   de tabla es un <a> inline de 16px de alto (line-height de text-xs), por debajo
   del mínimo 24×24. inline-flex + min-block-size lo eleva sin descuadrar la fila. */
:is(td, th) .cp-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--cp-target-size-min);
}
.cp-link:hover { color: var(--brand-primary); }
[data-theme="dark"] .cp-link { color: var(--brand-primary); }
[data-theme="dark"] .cp-link:hover { color: var(--cp-brand-light); }

/* ── Navbar text ── */
/* --color-text-inverse es #ffffff en light pero slate-900 en dark: sobre el fondo
   opaco del navbar (fijo en ambos temas) daría 2.98:1 en dark. Tokens propios. */
/* Selector de idioma dentro del navbar del control panel. Su variante `--nav`
   (flags.css) pinta rgba(255,255,255,.15) sobre el fondo del navbar: el blanco
   sobre ese compuesto se queda en 4.37:1. Aquí se opaca a un token AA.
   Scope estricto a .cp-navbar — no toca el selector de otras superficies. */
.cp-navbar .lang-trigger {
  background: var(--cp-brand-surface-strong-hover);
  border-color: var(--cp-brand-surface-strong-fg-muted);
  color: var(--cp-brand-surface-strong-fg);
}
.cp-navbar .lang-trigger:hover { background: var(--cp-brand-surface-strong); }

.cp-navbar-text { color: var(--cp-brand-surface-strong-fg); }
.cp-navbar-text-muted { color: var(--cp-brand-surface-strong-fg-muted); transition: color var(--transition-fast); }
.cp-navbar-text-muted:hover { color: var(--cp-brand-surface-strong-fg); }

/* ── Activity indicators ── */
.cp-activity-hot { color: var(--cp-activity-hot); }
[data-theme="dark"] .cp-activity-hot { color: var(--cp-activity-hot); }
.cp-activity-normal { color: var(--cp-activity-normal); }
[data-theme="dark"] .cp-activity-normal { color: var(--cp-activity-normal); }

/* ── Context menu items ── */
.cp-ctx-config { color: var(--cp-ctx-config); }
.cp-ctx-config:hover { background-color: var(--cp-ctx-config-bg-hover); }
[data-theme="dark"] .cp-ctx-config { color: var(--cp-ctx-config); }
[data-theme="dark"] .cp-ctx-config:hover { background-color: var(--cp-ctx-config-bg-hover); }

.cp-ctx-activate { color: var(--cp-ctx-activate); }
.cp-ctx-activate:hover { background-color: var(--cp-ctx-activate-bg-hover); }
[data-theme="dark"] .cp-ctx-activate { color: var(--cp-ctx-activate); }
[data-theme="dark"] .cp-ctx-activate:hover { background-color: var(--cp-ctx-activate-bg-hover); }

/* ── Action buttons — DRY base + color variants via scoped custom properties ── */
:is(.btn-cp-warn, .btn-cp-activate, .btn-cp-verify, .btn-cp-info) {
  background: var(--_btn-bg); color: var(--_btn-text); border: 1px solid var(--_btn-border);
  transition: background var(--transition-fast);
}
:is(.btn-cp-warn, .btn-cp-activate, .btn-cp-verify, .btn-cp-info):hover {
  background: var(--_btn-bg-hover);
}
.btn-cp-warn     { --_btn-bg: var(--cp-btn-warn-bg); --_btn-text: var(--cp-btn-warn-text); --_btn-border: var(--cp-btn-warn-border); --_btn-bg-hover: var(--cp-btn-warn-bg-hover); }
.btn-cp-activate { --_btn-bg: var(--cp-btn-activate-bg); --_btn-text: var(--cp-btn-activate-text); --_btn-border: var(--cp-btn-activate-border); --_btn-bg-hover: var(--cp-btn-activate-bg-hover); }
.btn-cp-verify   { --_btn-bg: var(--cp-btn-verify-bg); --_btn-text: var(--cp-btn-verify-text); --_btn-border: var(--cp-btn-verify-border); --_btn-bg-hover: var(--cp-btn-verify-bg-hover); }
.btn-cp-info     { --_btn-bg: var(--cp-btn-info-bg); --_btn-text: var(--cp-btn-info-text); --_btn-border: var(--cp-btn-info-border); --_btn-bg-hover: var(--cp-btn-info-bg-hover); }

[data-theme="dark"] .btn-cp-warn     { --_btn-bg: var(--cp-btn-warn-bg); --_btn-text: var(--cp-btn-warn-text); --_btn-border: var(--cp-btn-warn-border); --_btn-bg-hover: var(--cp-btn-warn-bg-hover); }
[data-theme="dark"] .btn-cp-activate { --_btn-bg: var(--cp-btn-activate-bg); --_btn-text: var(--cp-btn-activate-text); --_btn-border: var(--cp-btn-activate-border); --_btn-bg-hover: var(--cp-btn-activate-bg-hover); }
[data-theme="dark"] .btn-cp-verify   { --_btn-bg: var(--cp-btn-verify-bg); --_btn-text: var(--cp-btn-verify-text); --_btn-border: var(--cp-btn-verify-border); --_btn-bg-hover: var(--cp-btn-verify-bg-hover); }
[data-theme="dark"] .btn-cp-info     { --_btn-bg: var(--cp-btn-info-bg); --_btn-text: var(--cp-btn-info-text); --_btn-border: var(--cp-btn-info-border); --_btn-bg-hover: var(--cp-btn-info-bg-hover); }

/* ── Deployment card ── */
.cp-deployment-card {
  background: linear-gradient(to bottom right, var(--cp-deployment-gradient-from), var(--cp-deployment-gradient-to));
  border: 1px solid var(--cp-deployment-border);
}
[data-theme="dark"] .cp-deployment-card {
  background: linear-gradient(to bottom right, var(--cp-deployment-gradient-from), var(--cp-deployment-gradient-to));
  border-color: var(--cp-deployment-border);
}

.cp-badge-deployment { background: var(--cp-badge-deployment-bg); color: var(--cp-badge-deployment-text); }
[data-theme="dark"] .cp-badge-deployment { background: var(--cp-badge-deployment-bg); color: var(--cp-badge-deployment-text); }

/* ── Field highlighting (global config override) ──
   .cp-field-global: bg + border only (for inputs — text stays primary)
   .cp-field-global-text: color only (for hint labels and badge text) */
.cp-field-global { background-color: var(--cp-field-global-bg); border-color: var(--cp-field-global-border); }
[data-theme="dark"] .cp-field-global { background-color: var(--cp-field-global-bg); border-color: var(--cp-field-global-border); }
.cp-field-global-text { color: var(--cp-field-global-text); }
[data-theme="dark"] .cp-field-global-text { color: var(--cp-field-global-text); }

/* ── Form input base (control-panel text/select fields) ──
   Composite base for <input>/<select>: surface bg + strong border + primary
   text + brand focus ring. Layout (padding/radius/size) stays on Tailwind
   utilities. All tokens are theme-aware, so no separate dark override. */
.cp-input {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}
.cp-input::placeholder { color: var(--color-text-secondary); }
.cp-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-focus-ring);
}

/* ── Brand ── */
.cp-brand-text { color: var(--brand-primary); }
[data-theme="light"] .cp-brand-text { color: var(--brand-primary-dark); }
[data-theme="dark"] .cp-brand-text { color: var(--cp-brand-light); }
.cp-brand-dot { background-color: var(--brand-primary); }
[data-theme="dark"] .cp-brand-dot { background-color: var(--cp-brand-light); }

/* ── Status text warning ── */
.cp-status-text-warning { color: var(--cp-status-text-warning); }
[data-theme="dark"] .cp-status-text-warning { color: var(--cp-status-text-warning); }

/* ── Badge warning ── */
.cp-badge-warning { background: var(--cp-badge-warning-bg); color: var(--cp-badge-warning-text); }
[data-theme="dark"] .cp-badge-warning { background: var(--cp-badge-warning-bg); color: var(--cp-badge-warning-text); }
/* El badge del ítem «Zelebrix Benefits» se pinta sobre el navbar, no sobre una
   tarjeta: par opaco propio (ver el bloque de tokens). Va DESPUÉS del override
   dark a propósito — misma especificidad, gana el último; la variante con
   [data-theme="dark"] deja el orden fuera de la ecuación en ese tema. */
.cp-navbar .cp-badge-warning,
[data-theme="dark"] .cp-navbar .cp-badge-warning {
  background: var(--cp-navbar-badge-warning-bg);
  color: var(--cp-navbar-badge-warning-text);
}

/* ── Module icon accent ── */
.cp-module-icon-accent { background-color: var(--cp-module-icon-accent); }
[data-theme="dark"] .cp-module-icon-accent { background-color: var(--cp-module-icon-accent); }

/* ── Gateway badges ── */
.cp-gw-stripe { background: var(--cp-gw-stripe-bg); color: var(--cp-gw-stripe-text); }
[data-theme="dark"] .cp-gw-stripe { background: var(--cp-gw-stripe-bg); color: var(--cp-gw-stripe-text); }
.cp-gw-revolut { background: var(--cp-gw-revolut-bg); color: var(--cp-gw-revolut-text); }
[data-theme="dark"] .cp-gw-revolut { background: var(--cp-gw-revolut-bg); color: var(--cp-gw-revolut-text); }
.cp-gw-na { background: var(--color-bg-elevated); color: var(--color-text-secondary); }

/* ── Indicator dots ── */
.cp-revolut-dot { background-color: var(--cp-revolut-dot); }
[data-theme="dark"] .cp-revolut-dot { background-color: var(--cp-revolut-dot); }

/* ── Draft row ── */
.cp-draft-row { background-color: rgba(251, 191, 36, 0.08); }
[data-theme="dark"] .cp-draft-row { background-color: rgba(251, 191, 36, 0.05); }

/* ── Semantic text utilities (deployment log, form validation, status icons) ── */
.cp-text-error { color: var(--color-error); }
.cp-text-error-muted { color: var(--cp-status-red-text); }
[data-theme="dark"] .cp-text-error-muted { color: var(--color-error); }
.cp-text-success { color: var(--color-success); }
.cp-text-danger { color: var(--color-error); }
.cp-text-danger:hover { color: var(--color-error-hover); }
[data-theme="dark"] .cp-text-danger { color: var(--color-error); }
[data-theme="dark"] .cp-text-danger:hover { color: var(--color-error-light); }

/* ── Inline badges (deployment log step status) ── */
.cp-badge-success { background: var(--cp-status-green-bg); color: var(--cp-status-green-text); }
.cp-badge-error { background: var(--cp-status-red-bg); color: var(--cp-status-red-text); }

/* ── Danger border (delete buttons) ── */
.cp-border-danger { border-color: var(--cp-status-red-bg); }
.cp-border-danger:hover { border-color: var(--color-error); }
[data-theme="dark"] .cp-border-danger { border-color: rgba(248, 113, 113, 0.3); }

/* ── Module icon backgrounds ── */
.cp-module-icon-brand { background-color: var(--cp-status-blue-bg); }
[data-theme="dark"] .cp-module-icon-brand { background-color: rgba(96, 165, 250, 0.15); }
.cp-module-icon-success { background-color: var(--cp-status-green-bg); }
[data-theme="dark"] .cp-module-icon-success { background-color: rgba(74, 222, 128, 0.15); }
.cp-module-icon-info { background-color: var(--cp-status-sky-bg); }
[data-theme="dark"] .cp-module-icon-info { background-color: rgba(56, 189, 248, 0.15); }
.cp-module-icon-warn { background-color: var(--cp-alert-warning-bg); }
[data-theme="dark"] .cp-module-icon-warn { background-color: rgba(251, 191, 36, 0.15); }

/* ── Summary card (wizard step 7) ── */
.cp-summary-card {
  background: linear-gradient(to bottom right, var(--cp-summary-gradient-from), var(--cp-summary-gradient-to));
  border: 1px solid var(--cp-summary-border);
}
[data-theme="dark"] .cp-summary-card {
  background: linear-gradient(to bottom right, var(--cp-summary-gradient-from), var(--cp-summary-gradient-to));
  border-color: var(--cp-summary-border);
}

/* ── Wizard stepper (tenant_create progress steps) ── */
.cp-step-done { background-color: var(--cp-brand-surface-strong); border-color: var(--cp-brand-surface-strong); color: var(--cp-brand-surface-strong-fg); }
.cp-step-current { background-color: var(--color-bg-surface); border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1)); }
.cp-step-pending { background-color: var(--color-bg-elevated); border-color: var(--color-border-default); color: var(--cp-text-muted); }
.cp-step-label-done { color: var(--color-text-secondary); }
.cp-step-label-current { color: var(--brand-primary-dark); }
[data-theme="dark"] .cp-step-label-current { color: var(--brand-primary); }
.cp-step-label-pending { color: var(--cp-text-muted); }
.cp-step-line-done { background-color: var(--brand-primary); }
.cp-step-line-pending { background-color: var(--color-bg-elevated); }
.cp-ring-error { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.5); }
[data-theme="dark"] .cp-ring-error { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.4); }

/* ── Module tag badge (rendered tags in tenant_create JS) ── */
.cp-tag { display: inline-block; padding: var(--space-1) var(--space-2-5); background: var(--cp-status-sky-bg); color: var(--cp-status-sky-text); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); }

/* ── Neutral button (disabled toggle state) ── */
.btn-cp-neutral { background-color: var(--color-bg-elevated); color: var(--color-text-primary); }
.btn-cp-neutral:hover { background-color: var(--color-border-default); }

/* ── Module toggle cards (feature flags) ──
   La casilla real es un <input class="sr-only peer">: todo lo que se ve (tarjeta e
   indicador) son hermanos que leen su estado. Medido por el juez de diseno de la PR 3593
   (r1) en Nuevo y en Config, las 4 combinaciones:
   - anillo del indicador SIN marcar 1,47:1 (claro) y 1,93:1 (oscuro) con
     --color-border-strong; SC 1.4.11 pide 3. --color-text-muted: 4,8:1 y 5,7:1;
   - circulo MARCADO en claro 2,02:1 con --brand-primary. --brand-surface-strong es
     sky-700 en claro (5,9:1) y cian en oscuro, y gira con --color-text-inverse, que
     es la tinta del check: el par es AA en los dos temas;
   - el check se veia DENTRO del circulo sin marcar en oscuro (blanco sobre slate-800):
     sin marcar no se pinta;
   - foco de teclado visible en 0 de 11 tarjetas: el anillo global :focus-visible cae
     sobre el input sr-only de 1 px. Se pinta en la tarjeta, con el mismo token. */
.peer ~ .cp-check-indicator { border-color: var(--color-text-muted); }
.peer ~ .cp-check-indicator > svg { opacity: 0; }
.peer ~ .cp-check-card { border-color: var(--cp-check-card-border); }
.peer ~ .cp-check-card:hover { border-color: var(--color-text-muted); }
.peer:focus-visible ~ .cp-check-card {
  outline: 2px solid var(--brand-primary-dark);
  outline-offset: 2px;
}
.peer:checked ~ .cp-check-indicator {
  border-color: var(--brand-surface-strong);
  background-color: var(--brand-surface-strong);
}
.peer:checked ~ .cp-check-indicator > svg {
  opacity: 1;
  color: var(--color-text-inverse);
}
.peer:checked ~ .cp-check-card {
  border-color: var(--brand-primary);
  background-color: color-mix(in srgb, var(--brand-primary) 6%, var(--color-bg-surface));
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}
[data-theme="dark"] .peer:checked ~ .cp-check-card {
  background-color: color-mix(in srgb, var(--brand-primary) 12%, var(--color-bg-surface));
}
.cp-accent-input { accent-color: var(--brand-primary); }

/* ── Overlay (mobile menu backdrop) ── */
.cp-overlay { background-color: var(--color-overlay); }  /* T946: usa token canónico; elimina override dark mode redundante */

/* ── Touch target (T489 — WCAG 2.5.8, 44px minimum) ──
   Control panel does NOT bundle tailwind.output.css, so the `min-h-[44px]`
   utility from the admin layouts was dead code in CP templates. This class
   restores the same 44×44 minimum hit area using the canonical
   --touch-target-min token from main.css. */
.cp-touch-target { min-height: var(--touch-target-min); min-width: var(--touch-target-min); }

/* ─── Responsive (mobile ≤ 639px) — T953 ──────────────────── */
@media (max-width: 639px) {
  /* Summary cards — una columna en mobile */
  .cp-summary-card {
    grid-template-columns: 1fr;
  }

  /* Wizard stepper — vertical en mobile */
  .cp-wizard-stepper {
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
  }

  /* Deployment card — ancho completo en mobile */
  .cp-deployment-card {
    width: 100%;
  }
}

/* ── Confirm dialog buttons (T963: native <dialog> replacement for window.confirm) ── */
.cp-btn {
  padding: var(--space-1-5) var(--space-3-5);
  border-radius: var(--radius-md, 6px);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition-fast, 150ms ease), opacity var(--transition-fast, 150ms ease);
}
.cp-btn-ghost {
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}
.cp-btn-ghost:hover { background: var(--color-bg-elevated); }
.cp-btn-danger {
  background: var(--color-error);
  color: var(--color-text-inverse);
}
.cp-btn-danger:hover { opacity: 0.88; }

/* ── Confirm dialog layout (T989: inline styles → classes) ── */
.cp-confirm-dialog {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 360px;
  border: none;
  box-shadow: var(--shadow-md, 0 8px 32px rgba(0,0,0,.18));
}
.cp-confirm-dialog__msg {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
}
.cp-confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2-5, 10px);
}