/* Tokens */

/* Every color in this file reads from here — no hex values below this block. On
   `:root`, not `.bll-manager-page`: the popup and the toast are appended outside the
   page wrapper, and the dashboard widget (#hub_maintenance_status) never had one, so
   tokens scoped to the wrapper left all three without colors. Names are prefixed, so
   declaring them globally can't collide with WordPress or another plugin.

   Neutrals follow one gray scale; everything else is a role that points at it. A
   semantic hue (success/warning/danger/accent) comes in the same six steps:
   `--bll-{role}` vivid (dots, switch), `-ink` text on a light background and solid
   buttons, `-strong` hover of a solid button, `-bg` badges and icon tints, `-soft`
   alert backgrounds, `-border` alert and card borders. */
:root{
	--bll-white: #ffffff;
	--bll-gray-50: #f8fafc;
	--bll-gray-100: #f1f5f9;
	--bll-gray-200: #e2e8f0;
	--bll-gray-300: #cbd5e1;
	--bll-gray-400: #94a3b8;
	--bll-gray-500: #64748b;
	--bll-gray-600: #475569;
	--bll-gray-700: #334155;
	--bll-gray-800: #1e293b;
	--bll-gray-900: #0f172a;

	--bll-ink: var(--bll-gray-900);
	--bll-text: var(--bll-gray-700);
	--bll-muted: var(--bll-gray-500);
	--bll-border: var(--bll-gray-200);
	--bll-border-strong: var(--bll-gray-300);
	--bll-surface: var(--bll-white);
	--bll-surface-muted: var(--bll-gray-50);
	--bll-canvas: #f5f7fb;

	--bll-success: #059669;
	--bll-success-ink: #047857;
	--bll-success-strong: #065f46;
	--bll-success-bg: #d1fae5;
	--bll-success-soft: #ecfdf5;
	--bll-success-border: #a7f3d0;

	--bll-warning: #d97706;
	--bll-warning-ink: #92400e;
	--bll-warning-strong: #78350f;
	--bll-warning-bg: #fef3c7;
	--bll-warning-soft: #fffbeb;
	--bll-warning-border: #fde68a;

	--bll-danger: #e11d48;
	--bll-danger-ink: #be123c;
	--bll-danger-strong: #9f1239;
	--bll-danger-bg: #ffe4e6;
	--bll-danger-soft: #fff1f2;
	--bll-danger-border: #fecdd3;

	--bll-accent: #0284c7;
	--bll-accent-ink: #0369a1;
	--bll-accent-strong: #075985;
	--bll-accent-bg: #e0f2fe;
	--bll-accent-soft: #f0f9ff;

	/* Label hues: only for badges that name a category (.bll-badge-violet, -brown), never a
	   state. Text on background, each pair above 4.5:1. */
	--bll-label-violet-ink: #6d28d9;
	--bll-label-violet-bg: #ede9fe;
	--bll-label-brown-ink: #7c4a1e;
	--bll-label-brown-bg: #efe2d3;

	/* Decorative only: the page background glow and the header's gradient line. */
	--bll-glow-sky: #0ea5e9;
	--bll-glow-blue: #3b82f6;
	--bll-glow-indigo: #6366f1;
	--bll-glow-violet: #8b5cf6;

	--bll-focus-ring: 0 0 0 3px color-mix(in srgb, var(--bll-accent) 18%, transparent);
	--bll-shadow-xs: 0 1px 2px color-mix(in srgb, var(--bll-ink) 6%, transparent);
	--bll-shadow-sm: 0 3px 4px color-mix(in srgb, var(--bll-ink) 3%, transparent);
	--bll-shadow-md: 0 10px 30px color-mix(in srgb, var(--bll-ink) 14%, transparent);
	--bll-shadow-lg: 0 24px 48px color-mix(in srgb, var(--bll-ink) 22%, transparent);

	--bll-radius: 16px;
	--bll-radius-sm: 9px;

	/* Spacing scale, shared by the utilities (.bll-mb-3, .bll-px-2, …) and the guide. */
	--bll-space-0: 0;
	--bll-space-1: 4px;
	--bll-space-2: 8px;
	--bll-space-3: 12px;
	--bll-space-4: 16px;
	--bll-space-5: 24px;
	--bll-space-6: 32px;
}

/* Components > Manager */

body.bll-manager{
	margin: 0;
	font: 13px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--bll-ink);
	background: var(--bll-canvas);
}

.bll-manager *{
	box-sizing: border-box;
}

.bll-manager #wpcontent{
	padding-left: 0;
}

.bll-manager #wpbody-content{
	background: var(--bll-canvas);
}

.bll-manager .wrap{
	margin: 0;
	padding: 0;
}

.bll-manager a{
	color: var(--bll-ink);
	transition: color 0.18s ease,
		background-color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.bll-manager .bll-manager-page{
	min-height: calc(100vh - 46px);
	color: var(--bll-ink);
	background: radial-gradient(circle at top left, color-mix(in srgb, var(--bll-glow-blue) 13%, transparent), transparent 35%),
		radial-gradient(circle at top right, color-mix(in srgb, var(--bll-glow-sky) 10%, transparent), transparent 32%),
		radial-gradient(circle at 50% -5%, color-mix(in srgb, var(--bll-glow-indigo) 8%, transparent), transparent 46%),
		linear-gradient(180deg, var(--bll-gray-50) 0%, var(--bll-canvas) 100%);
}

@media screen and (min-width: 783px){
	.bll-manager .bll-manager-page{
		min-height: calc(100vh - 32px);
	}

}

/* Layout measures stay on the wrapper (not `:root` with the colors): the media
   queries below resize them per breakpoint, and only a full BLL UI page uses them. */
.bll-manager-page{
	--bll-page-width: 1320px;
	--bll-page-gutter: 16px;
	--bll-header-height: 80px;
	--bll-logo-width: 120px;
	--bll-page-title-size: 21px;
	--bll-section-title-size: 22px;
	--bll-space: 24px;
	--bll-control-height: 40px;
	/* Fields have their own tokens, apart from --bll-control-height (buttons and other
	   chrome): a screen can ask for smaller fields without shrinking its buttons, and one
	   size is one set of values instead of a rule per control type. See "Components >
	   Field sizes". */
	--bll-field-height: 40px;
	--bll-field-padding: 6px 10px;
	--bll-field-padding-area: 10px;
	--bll-field-arrow: 34px;
	--bll-field-font: 14px;
	--bll-field-radius: 9px;
	--bll-field-area-height: 0px;
}

.bll-manager-page .bll-toolbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.bll-manager-page .bll-muted{
	color: var(--bll-muted);
}

.bll-manager-page{
	--bll-card-padding-x: 14px;
}

@media screen and (min-width: 601px){
	.bll-manager-page{
		--bll-card-padding-x: 24px;
	}

}

.bll-manager-page [hidden]{
	display: none !important;
}

/* Components > Icons */

/* assets/bll-ui/icons.svg, a Lucide sprite (see its own header comment). Every icon
   context (bll-tab-icon at 18px, bll-section-icon at 38px, ...) already sets its own
   font-size to size a dashicon glyph — sizing this off `1em` instead of a fixed px
   value means it picks up every one of those contexts for free, no per-context rule
   to keep in sync. `Ui::icon()` (Forms) and `bll_ui_icon()` (HUB) both emit
   `<svg class="bll-ui-icon"><use href="…#bll-icon-name"></use></svg>`. */
.bll-ui-icon{
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	vertical-align: -0.2em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Components > Forms */

/* Scoped to `.bll-manager-page` alone (not `body.bll-manager` too) on purpose: a
   metabox or a post-edit screen can carry this wrapper without the full-page chrome
   (see the "Carga embebida" note above `.bll-manager-page .bll-card` further down).
   Forms' editor relies on this — see docs/UI.md "Un plugin solo toca lo que
   registró" and bll-wp-forms/CLAUDE.md "Admin y BLL UI". */

/* Focus. Text fields keep the soft ring and get an accent border too — they already have
   an edge to recolor. Links, buttons and summaries get a solid 2px accent outline, only
   on `:focus-visible` (keyboard), and neither the old ring nor WordPress' own blue
   `a:focus` shadow on a mouse click. The previous rule removed the outline on every
   `:focus` of every control and left only that 18%-alpha ring: under WCAG's 3:1 for a
   focus indicator and invisible in forced-colors mode (docs/AUDIT.md A11). The
   transparent outline on fields is what forced-colors mode paints. Components with their
   own `:focus-visible` rule (buttons, menu, tabs, checks) come later and keep it. */
.bll-manager-page :is(input, select, textarea):focus{
	outline: 2px solid transparent;
	border-color: var(--bll-accent);
	box-shadow: var(--bll-focus-ring);
}

.bll-manager-page :is(a, button, summary):focus{
	outline: none;
	box-shadow: none;
}

.bll-manager-page :is(a, button, summary):focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 2px;
}

/* `line-height` is declared on purpose, not inherited: wp-admin gives every select
   `line-height: 2.71428571` (38px at 14px) to reach ITS 40px with no vertical padding.
   BLL UI replaces the padding but used to leave that line-height alone, so a select came
   out at 38 + 12 + 2 = 52px next to a 40px input — the taller Type/Width/Validation,
   captcha and redirect controls reported in bll-wp-forms. One line-height for all three
   elements is what keeps a row of fields level, whatever wp-admin says about each. */
.bll-manager-page input:where(:not([type="submit"], [type="checkbox"], [type="radio"], .bll-form-control)),
.bll-manager-page select,
.bll-manager-page textarea{
	min-height: var(--bll-field-height);
	padding: var(--bll-field-padding);
	color: var(--bll-ink);
	background-color: var(--bll-white);
	border: 1px solid var(--bll-gray-300);
	border-radius: var(--bll-field-radius);
	font-size: var(--bll-field-font);
	line-height: 1.5;
	box-shadow: var(--bll-shadow-xs);
}

.bll-manager-page textarea{
	padding: var(--bll-field-padding-area);
}

.bll-manager-page select{
	padding-right: var(--bll-field-arrow);
}

.bll-manager-page input[aria-invalid="true"],
.bll-manager-page select[aria-invalid="true"],
.bll-manager-page textarea[aria-invalid="true"]{
	border-color: var(--bll-danger-ink);
}

.bll-manager-page .bll-field-error{
	color: var(--bll-danger-ink);
	font-size: 12px;
}

.bll-manager-page .bll-settings-form{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.bll-manager-page .bll-settings-form label{
	flex-basis: 100%;
	font-weight: 600;
}

.bll-manager-page .bll-settings-form input[type="text"]{
	flex: 1 1 280px;
	min-width: 0;
	max-width: 100%;
}

.bll-manager-page .bll-check{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
	line-height: 1.6;
}



.bll-manager-page .bll-field{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.bll-manager-page .bll-field label{
	font-size: 13px;
	font-weight: 600;
}

.bll-manager-page .bll-help{
	flex-basis: 100%;
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--bll-muted);
}

.bll-manager-page input,
.bll-manager-page select,
.bll-manager-page textarea{
	max-width: 100%;
}

/* Components > Readonly fields */

.bll-manager-page input[readonly],
.bll-manager-page textarea[readonly]{
	color: var(--bll-gray-600);
	background-color: var(--bll-gray-100);
	border-color: var(--bll-gray-300);
	box-shadow: none;
}

/* Components > Choice fields */

.bll-manager-page .bll-choice-group{
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bll-manager-page .bll-choice-group legend{
	margin-bottom: 16px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}

.bll-manager-page .bll-check input[type="checkbox"],
.bll-manager-page .bll-check input[type="radio"]{
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	min-height: 18px;
	padding: 0;
	margin: 2px 0 0;
	appearance: auto;
	accent-color: var(--bll-ink);
	box-shadow: none;
	cursor: pointer;
}

.bll-manager-page .bll-check input::before{
	content: none;
}

.bll-manager-page .bll-check{
	cursor: pointer;
}

.bll-manager-page .bll-check:hover{
	color: var(--bll-gray-700);
}

.bll-manager-page .bll-check input:disabled + span{
	color: var(--bll-gray-500);
}

.bll-manager-page .bll-check input:disabled{
	cursor: not-allowed;
}

.bll-manager-page .bll-check input:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 3px;
}

/* Components > Field sizes */

/* Three sizes for inputs, selects and textareas: `bll-input-sm` (32px), the default
   `bll-input-md` (40px) and `bll-input-lg` (48px). Each one only redefines the field
   tokens, so it works in two places: on the control itself, or on any ancestor —
   `bll-fields-sm`/`-md`/`-lg` on a card, a form or a whole editor — and then every field
   inside follows without a class of its own, dynamically created rows included. The
   container selector is written twice (`.bll-manager-page.bll-fields-sm` and
   `.bll-manager-page .bll-fields-sm`) because the container is often the
   `.bll-manager-page` element itself — a metabox that carries both classes. A control
   with its own size class wins over the container's, which is what `-md` is for: the one
   field that stays standard inside a small screen. Buttons are not touched: they size
   from --bll-control-height. */
.bll-manager-page.bll-fields-sm,
.bll-manager-page .bll-fields-sm,
.bll-manager-page input.bll-input-sm,
.bll-manager-page select.bll-input-sm,
.bll-manager-page textarea.bll-input-sm{
	--bll-field-height: 32px;
	--bll-field-padding: 4px 8px;
	--bll-field-padding-area: 6px 8px;
	--bll-field-arrow: 28px;
	--bll-field-font: 12px;
	--bll-field-radius: 6px;
	--bll-field-area-height: 76px;
}

.bll-manager-page.bll-fields-md,
.bll-manager-page .bll-fields-md,
.bll-manager-page input.bll-input-md,
.bll-manager-page select.bll-input-md,
.bll-manager-page textarea.bll-input-md{
	--bll-field-height: 40px;
	--bll-field-padding: 6px 10px;
	--bll-field-padding-area: 10px;
	--bll-field-arrow: 34px;
	--bll-field-font: 14px;
	--bll-field-radius: 9px;
	--bll-field-area-height: 0px;
}

.bll-manager-page.bll-fields-lg,
.bll-manager-page .bll-fields-lg,
.bll-manager-page input.bll-input-lg,
.bll-manager-page select.bll-input-lg,
.bll-manager-page textarea.bll-input-lg{
	--bll-field-height: 48px;
	--bll-field-padding: 10px 14px;
	--bll-field-padding-area: 14px;
	--bll-field-arrow: 38px;
	--bll-field-font: 16px;
	--bll-field-radius: 10px;
	--bll-field-area-height: 132px;
}

/* A textarea is the one control whose size class also sets how tall it starts: `rows`
   only counts lines, and a small or large screen wants a different floor. 0px leaves the
   standard textarea on --bll-field-height, as before. */
.bll-manager-page textarea{
	min-height: max(var(--bll-field-height), var(--bll-field-area-height));
}

.bll-manager-page .bll-field-stack{
	display: grid;
	align-content: start;
	min-width: 0;
}

.bll-manager-page .bll-field-stack input,
.bll-manager-page .bll-field-stack select,
.bll-manager-page .bll-field-stack textarea{
	width: 100%;
	min-width: 0;
}

/* Components > Field row */

/* Stacked fields side by side — a label above each control — wrapping into as many
   220px+ columns as fit: `<div class="bll-field-row">` with `.bll-field-stack` children,
   plus any `.bll-switch` or `.bll-check` with no label of its own ("Obligatorio").
   Every child spans three rows shared through subgrid — label, control, help — so the
   controls line up even when a neighbor has a longer label or a help line under its
   input, and a switch or check sits centered on the controls' row. Before this, the
   switch was `align-self: end` in a plain grid: at the bottom of the tallest field, below
   the inputs as soon as one of them had help text. Up to three pieces per field (label,
   control, help or error). Browsers without subgrid get the plain grid, top-aligned. */
.bll-manager-page .bll-field-row{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	align-items: start;
	gap: 8px 20px;
}

.bll-manager-page .bll-field-row > :is(.bll-field-stack, .bll-switch, .bll-check){
	min-width: 0;
	margin: 0;
}

@supports (grid-template-rows: subgrid){
	.bll-manager-page .bll-field-row > :is(.bll-field-stack, .bll-switch, .bll-check){
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		align-items: start;
		row-gap: 8px;
	}

	/* The label's row stays empty (a pseudo-element holds it), so the control and its text
	   land in the controls' row, next to each other, centered on the inputs. */
	.bll-manager-page .bll-field-row > :is(.bll-switch, .bll-check){
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 10px;
	}

	.bll-manager-page .bll-field-row > :is(.bll-switch, .bll-check)::before{
		content: "";
		grid-row: 1;
		grid-column: 1 / -1;
	}

	.bll-manager-page .bll-field-row > .bll-check input[type="checkbox"],
	.bll-manager-page .bll-field-row > .bll-check input[type="radio"]{
		margin: 0;
	}
}

/* Components > Inline forms */

.bll-manager-page .bll-form-inline{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	margin: 0;
}

.bll-manager-page .bll-form-inline .bll-field{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

.bll-manager-page .bll-form-inline .bll-field input,
.bll-manager-page .bll-form-inline .bll-field select{
	width: 100%;
	min-width: 0;
}

@media screen and (min-width: 783px){
	.bll-manager-page .bll-form-inline{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.bll-manager-page .bll-form-inline .bll-field{
		flex: 1 1 240px;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}

	.bll-manager-page .bll-form-inline .bll-field label{
		flex-shrink: 0;
	}

	.bll-manager-page .bll-form-inline .bll-field input,
	.bll-manager-page .bll-form-inline .bll-field select{
		flex: 1;
		width: auto;
	}
}

/* Components > Input group */

/* An input and the one button that acts on it, joined into a single control: a shortcode
   to copy (`<input readonly>` + "Copiar"), a search box and its button. Only the outer
   corners stay rounded, and the button overlaps the input's right border by 1px so the
   seam is a single line. The focused input is lifted above the button so its focus ring
   isn't clipped by it. */
.bll-manager-page .bll-input-group{
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.bll-manager-page .bll-input-group > :is(input, select){
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.bll-manager-page .bll-input-group > :is(input, select):focus{
	z-index: 1;
}

.bll-manager-page .bll-input-group > .bll-btn{
	flex: 0 0 auto;
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Components > Alerts */

.bll-manager #message,
/* Components > Notice */

.bll-manager .notice:not(.bll-notice){
	display: none !important;
}

.bll-manager .bll-notice{
	position: absolute !important;
	width: -webkit-fill-available;
}

.bll-manager-page .bll-alert{
	padding: 14px 16px;
	margin-bottom: 20px;
	border: 1px solid;
	border-radius: 9px;
	line-height: 1.6;
}

.bll-manager-page .bll-alert-success{
	color: var(--bll-success-strong);
	background: var(--bll-success-soft);
	border-color: var(--bll-success-border);
}

/* Warning: something needs a look but nothing failed — a pending step, a setting that
   limits a feature, an action that will take effect later. */
.bll-manager-page .bll-alert-warning{
	color: var(--bll-warning-strong);
	background: var(--bll-warning-soft);
	border-color: var(--bll-warning-border);
}

.bll-manager-page .bll-alert-danger{
	color: var(--bll-danger-strong);
	background: var(--bll-danger-soft);
	border-color: var(--bll-danger-border);
}

/* Neutral: plain informational text, no success/warning/danger implied — e.g. "this
   plan doesn't include X" rather than a result of an action. */
.bll-manager-page .bll-alert-neutral{
	color: var(--bll-gray-700);
	background: var(--bll-gray-100);
	border-color: var(--bll-border);
}

/* Components > Header */

.bll-manager .bll-manager-page .bll-header{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: var(--bll-header-height);
	padding: 12px var(--bll-page-gutter);
	background: color-mix(in srgb, var(--bll-white) 86%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--bll-ink) 8%, transparent);
	box-shadow: var(--bll-shadow-sm);
	backdrop-filter: blur(12px);
}

.bll-manager .bll-manager-page .bll-header::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--bll-glow-sky) 28%, transparent),
		color-mix(in srgb, var(--bll-glow-indigo) 34%, transparent),
		color-mix(in srgb, var(--bll-glow-violet) 22%, transparent),
		transparent
	);
}

.bll-manager-page .bll-header-title{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	min-width: 0;
	margin: 0;
}

.bll-manager-page .bll-header h1.bll-page-title{
	margin: 0;
	color: var(--bll-ink);
	font-size: var(--bll-page-title-size);
	line-height: 1.2;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.bll-manager-page .bll-header .bll-logo{
	display: flex;
	align-items: center;
	flex: 0 0 var(--bll-logo-width);
	width: var(--bll-logo-width);
	margin: 0;
	padding: 0;
}

.bll-manager-page .bll-header .bll-logo a{
	display: block;
	width: 100%;
	padding: 0;
	border-radius: 4px;
	text-decoration: none;
}

.bll-manager-page .bll-header .bll-logo a:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 6px;
}

/* `logo.png` is 320×120, twice the 160×60 it shows at from 783px up (120×45 below), so it
   stays sharp on high-density screens. The markup carries width="160" height="60": the same
   2.67 ratio, so the browser reserves the right box before the image arrives. */
.bll-manager-page .bll-header .bll-logo img{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border: 0;
}

@media screen and (min-width: 783px){
	.bll-manager-page{
		--bll-page-gutter: 24px;
		--bll-header-height: 96px;
		--bll-logo-width: 160px;
		--bll-page-title-size: 24px;
		--bll-section-title-size: 24px;
	}
}

/* Components > Section headings */

.bll-manager-page .bll-section-heading{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: var(--bll-space);
}

.bll-manager-page .bll-section-heading > div{
	min-width: 0;
}

.bll-manager-page .bll-section-heading h2{
	margin: 0 0 8px;
	color: var(--bll-ink);
	font-size: var(--bll-section-title-size);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.6px;
}

.bll-manager-page .bll-section-heading p{
	margin: 0;
	color: var(--bll-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* Components > Content */

.bll-manager .bll-manager-page .bll-content{
	position: relative;
	width: 100%;
	max-width: var(--bll-page-width);
	margin: 0 auto;
	padding: var(--bll-space) var(--bll-page-gutter) 64px;
}

.bll-manager .bll-manager-page .bll-content > *{
	position: relative;
	z-index: 1;
}

/* Components > HUB dashboard */

/* The HUB's own screen (templates/pages/dashboard*.php), not a shared component: only the
   layout its markup can't get from the components. It replaced two bespoke blocks — a
   connection "hero" with its own input, status pill, button and link styles, and a
   backups table with its own headings, status pills and download button — that
   duplicated `.bll-input-group`, `.bll-badge`, `.bll-btn` and `.bll-table` under other
   names and had drifted from them. */

/* Connection screen (no active plan): one card, centered and narrower than the page.
   `.bll-empty` is its heading, `.bll-input-group` the key field, `.bll-disclosure` the
   "use a different key" fold, `.bll-checklist-compact` what the plan includes. */
.bll-maintenance-page .bll-connect{
	display: grid;
	gap: var(--bll-space);
	max-width: 720px;
	margin: 8px auto 0;
}

.bll-maintenance-page .bll-connect .bll-empty{
	padding: 8px 0 0;
}

.bll-maintenance-page .bll-connect .bll-empty h2{
	font-size: var(--bll-section-title-size);
	line-height: 1.25;
	letter-spacing: -0.4px;
}

.bll-maintenance-page .bll-connect .bll-empty p{
	font-size: 14px;
}

.bll-maintenance-page .bll-connect .bll-alert{
	margin-bottom: 0;
}

.bll-maintenance-page .bll-connect-retry{
	display: flex;
	justify-content: center;
}

.bll-maintenance-page .bll-connect .bll-disclosure{
	text-align: center;
}

.bll-maintenance-page .bll-connect .bll-disclosure .bll-connect-form{
	margin-top: 8px;
	text-align: start;
}

.bll-maintenance-page .bll-connect-form > label{
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
}

.bll-maintenance-page .bll-connect-form .bll-help{
	margin-top: 8px;
}

/* Settings, "Clear information": its two ways out (clear only / clear and deactivate) as
   rows of text + button. The text takes the room so the button stays on the right on every
   row — left to `.bll-toolbar` alone, the row with the longer text dropped its button below
   while the other kept it beside — and wraps under it only on a narrow screen. */
.bll-maintenance-page .bll-clear-option > div{
	flex: 1 1 360px;
}

.bll-maintenance-page .bll-clear-option + .bll-clear-option{
	padding-top: var(--bll-space);
	border-top: 1px solid var(--bll-border);
}

/* `?mode=dev` backups panel, below the connection card: same centered column, so the two
   read as one screen instead of a narrow card over a full-width one. */
.bll-maintenance-page .bll-connect-dev{
	max-width: 720px;
	margin: var(--bll-space) auto 0;
}

/* Plan status on the "connected" card: the API key and maintenance pairs (label + badge)
   on one centered line, wrapping on narrow screens — `.bll-details` would stack them as
   two table rows for just two short facts. */
.bll-maintenance-page .bll-connect-status{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0;
}

.bll-maintenance-page .bll-connect-status > div{
	display: flex;
	align-items: center;
	gap: 8px;
}

.bll-maintenance-page .bll-connect-status dt{
	color: var(--bll-muted);
	font-size: 13px;
}

.bll-maintenance-page .bll-connect-status dd{
	margin: 0;
}

.bll-maintenance-page .bll-connect-footer{
	display: flex;
	justify-content: center;
	padding-top: var(--bll-space);
	border-top: 1px solid var(--bll-border);
}

/* "Create a backup" (Backups, `?mode=manual`): the first column carries each type's
   description, and left to the automatic layout it took the widest share of the card and
   squeezed "Last backup" and "Size" — the columns people actually compare — into several
   lines each. A fixed share for it and the description wraps instead. */
.bll-maintenance-page .bll-outlook-table th:first-child{
	width: 24%;
}

/* Components > Status widget */

/* A plugin's state on the WordPress dashboard: the HUB's maintenance
   (`hub_maintenance_status`) and Forms (`bll_forms_status`, which the HUB draws itself
   while Forms is installed but inactive). Called `.bll-maintenance-widget` until 3.2.7,
   when Forms needed the same box; its only other user, Base's plan card in Site options,
   moved to the new names in the same change, so nothing keeps them. (Base's own
   dashboard card copies this look in base/assets/css/dashboard.css, without BLL UI.)
   `is-active` green, `is-inactive` red (something the site should fix), `is-neutral`
   gray (installed, nothing wrong, just off).
   The frame is chosen by content (`:has()`), not by widget id, so any widget built with
   the component gets it: WordPress' own `.inside` padding would leave the tinted box
   floating in a white margin of a different width. */
#dashboard-widgets .inside:has(> .bll-manager-page > .bll-status-widget){
	margin: 0;
	padding: 10px;
	background: var(--bll-white);
}

.bll-status-widget{
	position: relative;
	overflow: hidden;
	padding: 20px;
	border-radius: 6px;
	isolation: isolate;
}

.bll-status-widget.is-active{
	background: var(--bll-success-soft);
}

.bll-status-widget.is-inactive{
	background: var(--bll-danger-soft);
}

.bll-status-widget.is-neutral{
	background: var(--bll-gray-100);
}

.bll-status-widget .bll-status-header{
	position: relative;
	z-index: 2;
	display: block;
	margin-bottom: 20px;
}

.bll-status-widget .bll-status-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	margin-bottom: 16px;
	border-radius: 999px;
}

/* 24px in the 50px circle at every width: at 28-31px the drawing touched the circle's
   edge. */
.bll-status-widget .bll-status-icon .bll-ui-icon{
	font-size: 24px;
	display: block;
	width: 24px;
	height: 24px;
}

.bll-status-widget.is-active .bll-status-icon{
	color: var(--bll-success-ink);
	background: color-mix(in srgb, var(--bll-success) 14%, transparent);
}

.bll-status-widget.is-inactive .bll-status-icon{
	color: var(--bll-danger-ink);
	background: color-mix(in srgb, var(--bll-danger) 14%, transparent);
}

.bll-status-widget.is-neutral .bll-status-icon{
	color: var(--bll-gray-600);
	background: color-mix(in srgb, var(--bll-gray-500) 14%, transparent);
}

.bll-status-widget .bll-status-heading{
	display: block;
}

#dashboard-widgets .bll-status-widget .bll-status-heading h3{
	margin: 0;
	font-size: 22px;
	line-height: 1.14;
	font-weight: 500;
	letter-spacing: -0.1px;
}

#dashboard-widgets .bll-status-widget.is-active .bll-status-heading h3{
	color: var(--bll-success-ink);
}

#dashboard-widgets .bll-status-widget.is-inactive .bll-status-heading h3{
	color: var(--bll-danger-ink);
}

#dashboard-widgets .bll-status-widget.is-neutral .bll-status-heading h3{
	color: var(--bll-gray-700);
}

.bll-status-widget .bll-status-badge{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 0 15px;
	color: var(--bll-gray-700);
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	background: color-mix(in srgb, var(--bll-white) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--bll-ink) 5%, transparent);
	border-radius: 999px;
	backdrop-filter: blur(8px);
}

.bll-status-widget .bll-status-dot{
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.bll-status-widget.is-active .bll-status-dot{
	background: var(--bll-success);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bll-success) 12%, transparent);
}

.bll-status-widget.is-inactive .bll-status-dot{
	background: var(--bll-danger);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bll-danger) 12%, transparent);
}

.bll-status-widget.is-neutral .bll-status-dot{
	background: var(--bll-gray-400);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--bll-gray-500) 12%, transparent);
}

.bll-status-widget .bll-status-body{
	position: relative;
	z-index: 2;
	max-width: 620px;
	margin-left: 0;
}

.bll-status-widget .bll-status-body p{
	margin: 0;
	color: var(--bll-gray-700);
	font-size: 14px;
	line-height: 1.62;
}

/* Figures and states under the description: one tile per value (`dl > div` with `dt`
   label and `dd` value), two per row; `.is-wide` takes the whole row, for a state that
   needs a sentence. White over the widget's tint, like the badge, so the tiles read the
   same on the three backgrounds. */
.bll-status-widget .bll-status-stats{
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 20px 0 0;
}

.bll-status-widget .bll-status-stats > div{
	min-width: 0;
	padding: 12px 14px;
	background: color-mix(in srgb, var(--bll-white) 82%, transparent);
	border: 1px solid color-mix(in srgb, var(--bll-ink) 5%, transparent);
	border-radius: 12px;
}

.bll-status-widget .bll-status-stats > .is-wide{
	grid-column: 1 / -1;
}

.bll-status-widget .bll-status-stats dt{
	margin: 0 0 4px;
	color: var(--bll-gray-600);
	font-size: 13px;
	line-height: 1.3;
	font-weight: 500;
}

.bll-status-widget .bll-status-stats dd{
	margin: 0;
	color: var(--bll-ink);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* A value that is a few words, not a figure. The dot is only an echo of the text (gray
   without `is-*`), which already says the state. */
.bll-status-widget .bll-status-stats dd.bll-status-text{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 1.35;
}

.bll-status-widget .bll-status-text::before{
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	background: var(--bll-gray-400);
	border-radius: 50%;
}

.bll-status-widget .bll-status-text.is-success::before{
	background: var(--bll-success);
}

.bll-status-widget .bll-status-text.is-warning::before{
	background: var(--bll-warning);
}

.bll-status-widget .bll-status-text.is-danger::before{
	background: var(--bll-danger);
}

.bll-status-widget .bll-status-stats dd.bll-status-note{
	margin-top: 4px;
	color: var(--bll-gray-600);
	font-size: 13px;
	line-height: 1.45;
	font-weight: 400;
}

.bll-status-widget .bll-status-actions{
	position: relative;
	z-index: 2;
	display: block;
	margin-top: 26px;
	margin-left: 0;
}

/* `box-sizing`: an `<a>` at `width: 100%` plus its 20px padding came out 40px wider than
   the widget on a phone (below 783px), cut by the widget's `overflow: hidden`. */
.bll-status-widget .bll-status-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: 0 20px;
	color: var(--bll-white) !important;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	border-radius: 12px;
	transition: 0.3s all;
}

.bll-status-widget .bll-status-button:hover,
.bll-status-widget .bll-status-button:focus{
	color: var(--bll-white) !important;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 5px 12px color-mix(in srgb, var(--bll-ink) 10%, transparent);
}

.bll-status-widget.is-active .bll-status-button{
	background: var(--bll-success);
}

.bll-status-widget.is-active .bll-status-button:hover,
.bll-status-widget.is-active .bll-status-button:focus{
	background: var(--bll-success-ink);
}

.bll-status-widget.is-inactive .bll-status-button{
	background: var(--bll-danger);
}

.bll-status-widget.is-inactive .bll-status-button:hover,
.bll-status-widget.is-inactive .bll-status-button:focus{
	background: var(--bll-danger-ink);
}

.bll-status-widget.is-neutral .bll-status-button{
	background: var(--bll-gray-700);
}

.bll-status-widget.is-neutral .bll-status-button:hover,
.bll-status-widget.is-neutral .bll-status-button:focus{
	background: var(--bll-gray-800);
}

.bll-status-widget .bll-status-bg-icon{
	position: absolute;
	right: -40px;
	bottom: -30px;
	width: 220px;
	height: 220px;
	opacity: 0.045;
	pointer-events: none;
	z-index: -1;
}

.bll-status-widget .bll-status-bg-icon .bll-ui-icon{
	font-size: 220px;
	display: block;
	width: 100%;
	height: 100%;
}

.bll-status-widget.is-active .bll-status-bg-icon{
	color: var(--bll-success-ink);
}

.bll-status-widget.is-inactive .bll-status-bg-icon{
	color: var(--bll-danger-ink);
}

.bll-status-widget.is-neutral .bll-status-bg-icon{
	color: var(--bll-gray-700);
}

@media screen and (min-width: 481px){
	.bll-status-widget{
		padding: 24px;
	}

}

@media screen and (min-width: 481px){
	.bll-status-widget .bll-status-header{
		display: flex;
		align-items: center;
		gap: 15px;
	}

}

@media screen and (min-width: 481px){
	.bll-status-widget .bll-status-icon{
		margin-bottom: 0;
	}

}

@media screen and (min-width: 481px){
	.bll-status-widget .bll-status-heading{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

}

@media screen and (min-width: 481px){
	.bll-status-widget .bll-status-heading h3{
		margin-bottom: 0;
	}

}

@media screen and (min-width: 481px){
	.bll-status-widget .bll-status-actions{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px;
	}

}

@media screen and (min-width: 783px){
	.bll-status-widget{
		padding: 20px;
	}

}

@media screen and (min-width: 783px){
	.bll-status-widget .bll-status-header{
		align-items: center;
	}

}

@media screen and (min-width: 783px){
	.bll-status-widget .bll-status-heading h3{
		font-size: 20px;
	}

}

@media screen and (min-width: 783px){
	.bll-status-widget .bll-status-body p{
		font-size: 14px;
		line-height: 1.5;
	}

}

@media screen and (min-width: 783px){
	.bll-status-widget .bll-status-button{
		width: auto;
	}

}

/* Components > Columns */

.bll-manager-page .bll-stack{
	display: grid;
	gap: 24px;
}

/* `.bll-settings-grid` is Forms' settings layout (views/admin/settings.php), kept as an
   alias of `.bll-grid-2`. The old unnumbered `.bll-grid` (a 1.15fr/1fr split only the
   HUB's General tab used) is gone: that tab uses `.bll-grid-2` now. */
.bll-manager-page .bll-settings-grid,
.bll-manager-page .bll-grid-1,
.bll-manager-page .bll-grid-2,
.bll-manager-page .bll-grid-3,
.bll-manager-page .bll-grid-sidebar{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 24px;
}

.bll-manager-page .bll-grid-2 > *,
.bll-manager-page .bll-grid-3 > *,
.bll-manager-page .bll-grid-sidebar > *{
	min-width: 0;
}

@media screen and (min-width: 783px){
	.bll-manager-page .bll-grid-2,
	.bll-manager-page .bll-settings-grid,
	.bll-manager-page .bll-grid-3{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media screen and (min-width: 783px){
	.bll-manager-page .bll-grid-sidebar{
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}

}

@media screen and (min-width: 992px){
	.bll-manager-page .bll-grid-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* Components > Cards */

.bll-manager-page .bll-card{
	min-width: 0;
	padding: 18px var(--bll-card-padding-x);
	background: var(--bll-surface);
	border: 1px solid var(--bll-border);
	border-radius: var(--bll-radius);
	box-shadow: var(--bll-shadow-sm);
}

@media screen and (min-width: 601px){
	.bll-manager-page .bll-card{
		padding: 24px var(--bll-card-padding-x);
	}

}

.bll-manager-page .bll-card.bll-card-danger{
	border-color: var(--bll-danger-border);
}

/* Components > Card header */

/* An optional icon on the left, then the title with its description right below it,
   both in one column next to the icon — never under it. The icon lives inside the
   heading (`<h2>{icon}Título</h2><p>…</p>`, what `bll_ui_icon(…, 'bll-section-icon')`
   already emits in every template), so it's taken out of flow and the text column is
   indented by its width instead: the description lines up with the title however
   many lines either wraps to. The previous version put title and description in one
   wrapping row, which left the description glued to the title's right or dropped
   under the icon. Without an icon, the same rules just stack title and description.
   `.bll-toolbar` headers nest that pair in a `div`, next to their actions. */
.bll-manager-page .bll-card-header{
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: var(--bll-space);
}

.bll-manager-page .bll-card-header.bll-toolbar{
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}

.bll-manager-page .bll-card-header.bll-toolbar > div:not(.bll-toolbar){
	display: flex;
	flex-direction: column;
	flex: 1 1 260px;
	gap: 2px;
	min-width: 0;
}

.bll-manager-page .bll-card-header:has(> :is(h2, h3) > .bll-section-icon),
.bll-manager-page .bll-card-header > div:has(> :is(h2, h3) > .bll-section-icon){
	position: relative;
	min-height: 38px;
	padding-left: 50px;
}

.bll-manager-page .bll-card-header h2,
.bll-manager-page .bll-card-header h3{
	margin: 0;
	color: var(--bll-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

/* Vertical alignment with the 38px icon, which stays put at the top of the card.
   Title alone: its line (18 × 1.4 = 25px) is centered on the icon, (38 − 25) / 2 ≈ 6px.
   Title + description: the pair (25 + 2 + 13 × 1.6 = 48px) is what gets centered, so it
   starts (48 − 38) / 2 = 5px above the icon's top edge instead of 6px below it — that
   left the text sitting visibly lower than the icon in every card with a description.
   A description longer than one line keeps growing downward from there. The second
   selector of each rule is the same header with the icon as a sibling of the text `div`
   (`<svg class="bll-section-icon">` + `<div><h3>…</h3><p>…</p></div>`). */
.bll-manager-page .bll-card-header :is(h2, h3):has(> .bll-section-icon),
.bll-manager-page .bll-card-header > .bll-section-icon + div > :is(h2, h3):first-child{
	padding-top: 6px;
}

.bll-manager-page .bll-card-header :is(h2, h3):has(> .bll-section-icon):has(+ p),
.bll-manager-page .bll-card-header > .bll-section-icon + div > :is(h2, h3):first-child:has(+ p){
	margin-top: -5px;
	padding-top: 0;
}

.bll-manager-page .bll-card-header :is(h2, h3) > .bll-section-icon{
	position: absolute;
	top: 0;
	left: 0;
}

.bll-manager-page .bll-card-header p{
	margin: 0;
	color: var(--bll-muted);
	font-size: 13px;
	line-height: 1.6;
}

.bll-manager-page .bll-section-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	padding: 8px; /* Shrinks a same-element .bll-ui-icon to 20px, the old glyph's size. */
	color: var(--bll-gray-600);
	background: var(--bll-gray-100);
	border: 1px solid var(--bll-border);
	border-radius: var(--bll-radius-sm);
}

.bll-manager-page .bll-card-danger .bll-section-icon{
	color: var(--bll-danger-ink);
	background: var(--bll-danger-soft);
	border-color: var(--bll-danger-border);
}

/* Components > Collapsible card */

/* `<details class="bll-card bll-card-collapsible"><summary class="bll-card-header">…</summary>…`:
   a card whose header opens and closes the rest of it — one connection among several, a
   recovery step that should stay out of the way until it's needed. The summary keeps the
   usual card header markup (icon inside the title, or `.bll-toolbar` with a badge next to
   the text) and gets a chevron drawn in CSS at its end, so it needs no extra element. The
   header's bottom margin only applies while open: closed, the card is just its header. */
.bll-manager-page .bll-card-collapsible > summary{
	position: relative;
	margin-bottom: 0;
	padding-right: 32px;
	list-style: none;
	cursor: pointer;
	border-radius: var(--bll-radius-sm);
}

.bll-manager-page .bll-card-collapsible > summary::-webkit-details-marker{
	display: none;
}

.bll-manager-page .bll-card-collapsible > summary::after{
	content: "";
	position: absolute;
	top: 13px;
	right: 8px;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--bll-gray-500);
	border-bottom: 2px solid var(--bll-gray-500);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.bll-manager-page .bll-card-collapsible[open] > summary{
	margin-bottom: var(--bll-space);
}

.bll-manager-page .bll-card-collapsible[open] > summary::after{
	top: 17px;
	transform: rotate(-135deg);
}

.bll-manager-page .bll-card-collapsible > summary:hover::after{
	border-color: var(--bll-ink);
}

.bll-manager-page .bll-card-collapsible > summary:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 6px;
}

/* Components > Stats */

/* A number (or one short value) with its label and a line of context, for the top of an
   overview: `<article class="bll-card bll-stat">` inside `.bll-grid-3`. The label row has
   an optional same-element icon on the right (`bll_ui_icon('inbox', 'bll-stat-icon')`).
   `a.bll-stat` turns the whole tile into a link to the list behind the number; a tint
   (`.bll-stat-warning`, `-danger`, `-success`) colors the icon when the number itself is
   the news — failures waiting for review — and stays gray otherwise. */
.bll-manager-page .bll-stat{
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--bll-ink);
	text-decoration: none;
}

.bll-manager-page a.bll-stat:hover{
	border-color: var(--bll-gray-400);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--bll-ink) 8%, transparent);
}

.bll-manager-page a.bll-stat:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 3px;
}

.bll-manager-page .bll-stat-label{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: var(--bll-gray-600);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.bll-manager-page .bll-stat-icon{
	box-sizing: border-box;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	padding: 8px;
	color: var(--bll-gray-600);
	background: var(--bll-gray-100);
	border-radius: var(--bll-radius-sm);
}

.bll-manager-page .bll-stat-value{
	display: block;
	margin: 8px 0 0;
	color: var(--bll-ink);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.5px;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* A word instead of a number ("Google reCAPTCHA v3", "SMTP"). */
.bll-manager-page .bll-stat-value.bll-stat-text{
	font-size: 20px;
	letter-spacing: -0.2px;
}

.bll-manager-page .bll-stat-help{
	margin: 0;
	color: var(--bll-muted);
	font-size: 12px;
	line-height: 1.6;
}

.bll-manager-page .bll-stat-success .bll-stat-icon{
	color: var(--bll-success-ink);
	background: var(--bll-success-bg);
}

.bll-manager-page .bll-stat-warning .bll-stat-icon{
	color: var(--bll-warning-ink);
	background: var(--bll-warning-bg);
}

.bll-manager-page .bll-stat-danger .bll-stat-icon{
	color: var(--bll-danger-ink);
	background: var(--bll-danger-bg);
}

/* Components > Save bar */

/* The footer of a long settings form, as a `.bll-card`: a short note on the left (what
   saving affects, plus a `bll-badge` marked `data-bll-dirty-indicator` that BllUI shows
   once a field changes) and the submit button on the right. Sticky to the bottom of the
   viewport, so the button stays in reach while the visitor scrolls the cards above it.
   Tighter vertical padding than a regular card: it's a bar, not a section. */
.bll-manager-page .bll-save-bar{
	position: sticky;
	bottom: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-top: var(--bll-space);
	padding-top: 14px;
	padding-bottom: 14px;
	background: color-mix(in srgb, var(--bll-white) 94%, transparent);
	box-shadow: var(--bll-shadow-md);
	backdrop-filter: blur(8px);
}

.bll-manager-page .bll-save-bar p{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0;
	color: var(--bll-muted);
	font-size: 13px;
	line-height: 1.5;
}

@media screen and (max-width: 600px){
	.bll-manager-page .bll-save-bar{
		bottom: 0;
	}

	.bll-manager-page .bll-save-bar .bll-btn{
		flex: 1 1 auto;
	}
}

/* Components > Buttons */

/* `.bll-btn` plus one variant: primary (ink), secondary (gray), outline-primary,
   outline-secondary, danger, success; `.bll-btn-sm`/`.bll-btn-lg` for size.
   `.bll-btn-outline` predates the outline-primary/-secondary split and stays as an
   alias of outline-secondary — the templates, Forms and BllUI.confirm() emit it.
   Also under `.bll-popup`: BllUI.confirm() appends its dialog to `<body>`, outside any
   `.bll-manager-page`, and its buttons came out as the browser's own.
   `box-sizing` is set here, not left to `.bll-manager *`: that one needs `body.bll-manager`,
   which an embedded screen (Forms' editor metabox) doesn't have. There a `<button>` is
   border-box by the browser's default but an `<a class="bll-btn">` was content-box, so
   the min-height got the padding and border added on top: 46px instead of 34px in `-sm`. */
:is(.bll-manager-page, .bll-popup) .bll-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--bll-control-height);
	padding: 8px 16px;
	color: var(--bll-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--bll-radius-sm);
	cursor: pointer;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

:is(.bll-manager-page, .bll-popup) .bll-btn-primary{
	color: var(--bll-white);
	background: var(--bll-ink);
	border-color: var(--bll-ink);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-primary:hover{
	color: var(--bll-white);
	background: var(--bll-gray-700);
	border-color: var(--bll-gray-700);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-secondary{
	color: var(--bll-ink);
	background: var(--bll-gray-200);
	border-color: var(--bll-gray-200);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-secondary:hover{
	color: var(--bll-ink);
	background: var(--bll-gray-300);
	border-color: var(--bll-gray-300);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-outline-primary{
	color: var(--bll-ink);
	background: transparent;
	border-color: var(--bll-ink);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-outline-primary:hover{
	color: var(--bll-white);
	background: var(--bll-ink);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-outline-secondary,
:is(.bll-manager-page, .bll-popup) .bll-btn-outline{
	color: var(--bll-gray-700);
	background: var(--bll-surface);
	border-color: var(--bll-gray-300);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-outline-secondary:hover,
:is(.bll-manager-page, .bll-popup) .bll-btn-outline:hover{
	color: var(--bll-ink);
	background: var(--bll-gray-100);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-danger{
	color: var(--bll-white);
	background: var(--bll-danger-ink);
	border-color: var(--bll-danger-ink);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-danger:hover{
	color: var(--bll-white);
	background: var(--bll-danger-strong);
	border-color: var(--bll-danger-strong);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-success{
	color: var(--bll-white);
	background: var(--bll-success-ink);
	border-color: var(--bll-success-ink);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-success:hover{
	color: var(--bll-white);
	background: var(--bll-success-strong);
	border-color: var(--bll-success-strong);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-sm{
	min-height: 34px;
	padding: 5px 12px;
	font-size: 12px;
}

:is(.bll-manager-page, .bll-popup) .bll-btn-lg{
	min-height: 48px;
	padding: 12px 22px;
	font-size: 15px;
}

:is(.bll-manager-page, .bll-popup) .bll-btn:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 3px;
}

:is(.bll-manager-page, .bll-popup) .bll-btn:disabled{
	opacity: .65;
	cursor: not-allowed;
	pointer-events: none;
}

.bll-manager-page .bll-button-group{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.bll-manager-page .bll-button-group-end{
	justify-content: flex-end;
}

/* A form inside a group (a table row's delete button) is just another item. */
.bll-manager-page .bll-button-group > form{
	margin: 0;
}

/* Components > Menu */

/* Page-level navigation between whole sections (General / Backups / Settings): a gray
   bar, contiguous items, a dark active one, optional icon. Called `.bll-tabs`/`.bll-tab`
   until 2026-09-17 — renamed so "tabs" can mean switching content inside a view (below).
   `.bll-submenu` is this same component, compressed, for a second level under it.

   The active item is `.is-active`, `aria-current` (links to a `?tab=` URL) or
   `aria-selected="true"` (`role="tab"` buttons wired by BllUI.tablists()); `:is()` keeps
   the three at one specificity so the variants below can override them in order. */
.bll-manager-page .bll-menu,
.bll-manager-page .bll-submenu{
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 var(--bll-space);
	padding: 0;
	background: color-mix(in srgb, var(--bll-ink) 4%, transparent);
	border: 1px solid color-mix(in srgb, var(--bll-ink) 8%, transparent);
	border-radius: var(--bll-radius);
	box-shadow: var(--bll-shadow-xs);
	overflow-x: auto;
}

.bll-manager-page .bll-menu-item,
.bll-manager-page .bll-submenu-item{
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
	margin: 0;
	padding: 15px var(--bll-card-padding-x);
	color: var(--bll-gray-600);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
	text-decoration: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.bll-manager-page .bll-menu-item:hover,
.bll-manager-page .bll-submenu-item:hover{
	color: var(--bll-ink);
	background: color-mix(in srgb, var(--bll-ink) 6%, transparent);
}

.bll-manager-page .bll-menu-item:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"]), :active),
.bll-manager-page .bll-submenu-item:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"]), :active){
	color: var(--bll-white);
	background: var(--bll-ink);
	box-shadow: none;
}

.bll-manager-page .bll-menu-item:focus-visible,
.bll-manager-page .bll-submenu-item:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: -3px;
}

@media screen and (min-width: 783px){
	.bll-manager-page .bll-menu-item{
		padding: 16px var(--bll-card-padding-x);
	}

}

/* A same-element icon: bll_ui_icon('database', 'bll-menu-icon'). */
.bll-manager-page .bll-menu-icon{
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: inherit;
}

/* An item's own count (`<span class="bll-menu-count">5</span>`) or error marker
   (`<span class="bll-menu-alert">`, a plain dot — screen readers get the count/alert
   from the item's accessible name, this is a visual echo only). */
.bll-manager-page .bll-menu-count{
	box-sizing: border-box;
	min-width: 18px;
	padding: 1px 6px;
	color: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	background: color-mix(in srgb, var(--bll-ink) 8%, transparent);
	border-radius: 999px;
}

.bll-manager-page :is(.bll-menu-item, .bll-submenu-item):is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"])) .bll-menu-count{
	background: color-mix(in srgb, var(--bll-white) 22%, transparent);
}

.bll-manager-page .bll-menu-alert{
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	background: var(--bll-danger);
	border-radius: 50%;
}

/* Vertical: a sidebar (with `.bll-grid-sidebar`). Until 2026-09-28 it was the horizontal
   bar turned on its side — edge-to-edge items with the bar's 16px padding and a black
   block for the active one — which read as a stack of buttons, and a Submenu nested in it
   was a second gray bar inside the first. Now the bar pads its items and each item has
   its own radius, so the active one is a pill inside the bar; the bar no longer clips
   (nothing reaches its edges) nor scrolls sideways. */
.bll-manager-page .bll-menu-vertical,
.bll-manager-page .bll-submenu-vertical{
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 6px;
	overflow: visible;
}

.bll-manager-page .bll-menu-vertical .bll-menu-item,
.bll-manager-page .bll-submenu-vertical .bll-submenu-item{
	justify-content: flex-start;
	flex-shrink: 0;
	white-space: normal;
	border-radius: var(--bll-radius-sm);
}

.bll-manager-page .bll-menu-vertical .bll-menu-item{
	padding: 9px 12px;
	font-weight: 600;
	line-height: 22px;
}

.bll-manager-page .bll-submenu-vertical .bll-submenu-item{
	padding: 6px 10px;
	border-radius: 7px;
}

/* Groups in one vertical Menu (a wiki's sidebar: Plugins / Modules / …):
   `div.bll-menu-group[role="group"][aria-labelledby]` with a `.bll-menu-label` first. */
.bll-manager-page .bll-menu-group{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bll-manager-page .bll-menu-label{
	margin: 12px 12px 4px;
	color: var(--bll-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bll-manager-page .bll-menu-vertical > .bll-menu-group:first-child > .bll-menu-label{
	margin-top: 6px;
}

/* A vertical Submenu nested in a vertical Menu, right after an item: that item's second
   level (the sections of the open page). A tree line and plain text instead of another
   bar; the item being read is marked on the line (like `.bll-tabs-vertical`), so the
   page's own active item stays the only dark pill. */
.bll-manager-page .bll-menu-vertical .bll-submenu-vertical{
	gap: 0;
	margin: 2px 0 6px 21px;
	padding: 0;
	background: none;
	border: 0;
	border-left: 1px solid var(--bll-border-strong);
	border-radius: 0;
	box-shadow: none;
}

.bll-manager-page .bll-menu-vertical .bll-submenu-vertical .bll-submenu-item{
	margin-left: -1px;
	padding: 5px 12px;
	color: var(--bll-muted);
	font-weight: 500;
	border-left: 2px solid transparent;
	border-radius: 0 7px 7px 0;
}

.bll-manager-page .bll-menu-vertical .bll-submenu-vertical .bll-submenu-item:hover{
	color: var(--bll-ink);
	background: color-mix(in srgb, var(--bll-ink) 5%, transparent);
}

.bll-manager-page .bll-menu-vertical .bll-submenu-vertical .bll-submenu-item:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"]), :active){
	color: var(--bll-ink);
	font-weight: 600;
	background: transparent;
	border-left-color: var(--bll-ink);
}

/* Components > Submenu */

/* Same component as Menu (shares every rule above), compressed: shorter items,
   smaller type and icon, a tighter radius. */
.bll-manager-page .bll-submenu{
	border-radius: 12px;
}

.bll-manager-page .bll-submenu-item{
	gap: 6px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

.bll-manager-page .bll-submenu .bll-menu-icon{
	flex-basis: 16px;
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* Components > Tabs */

/* Switches content within a view. Only the navigation: no container of its own and
   nothing attached to what follows — the panels are ordinary cards. An underline strip
   by default; `.bll-tabs-pill` for rounded pills (all four corners, always) with the
   same markup; `.bll-tabs-vertical` for either one in a column (pair it with
   `.bll-grid-sidebar`). Items are links (`aria-current`) or `role="tab"` buttons wired
   by BllUI.tablists() (`aria-selected`), same as Menu. */
.bll-manager-page .bll-tabs{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 0 0 var(--bll-space);
	padding: 0;
	border-bottom: 1px solid var(--bll-border);
}

.bll-manager-page .bll-tab{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 -1px;
	padding: 10px 2px;
	color: var(--bll-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.bll-manager-page .bll-tab:hover{
	color: var(--bll-ink);
	border-bottom-color: var(--bll-gray-300);
}

.bll-manager-page .bll-tab:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"])){
	color: var(--bll-ink);
	border-bottom-color: var(--bll-ink);
}

.bll-manager-page .bll-tab:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 2px;
}

.bll-manager-page .bll-tab-icon{
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: inherit;
}

/* `box-sizing` here and in `.bll-menu-count`: without `body.bll-manager` (Forms' editor
   counts its fields and destinations in these) the 18px pill grew to 30px. */
.bll-manager-page .bll-tab-count{
	box-sizing: border-box;
	min-width: 18px;
	padding: 1px 6px;
	color: var(--bll-gray-600);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	background: color-mix(in srgb, var(--bll-ink) 8%, transparent);
	border-radius: 999px;
}

.bll-manager-page .bll-tab:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"])) .bll-tab-count{
	color: var(--bll-white);
	background: var(--bll-ink);
}

.bll-manager-page .bll-tab-alert{
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	background: var(--bll-danger);
	border-radius: 50%;
}

.bll-manager-page .bll-tabs-vertical{
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	border-bottom: 0;
	border-left: 1px solid var(--bll-border);
}

.bll-manager-page .bll-tabs-vertical .bll-tab{
	margin: 0 0 0 -1px;
	padding: 9px 14px;
	white-space: normal;
	border-bottom: 0;
	border-left: 2px solid transparent;
}

.bll-manager-page .bll-tabs-vertical .bll-tab:hover{
	border-left-color: var(--bll-gray-300);
}

.bll-manager-page .bll-tabs-vertical .bll-tab:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"])){
	border-left-color: var(--bll-ink);
}

.bll-manager-page .bll-tabs-pill{
	gap: 6px;
	border-bottom: 0;
}

.bll-manager-page .bll-tabs-pill .bll-tab{
	margin: 0;
	padding: 7px 14px;
	border: 0;
	border-radius: 999px;
}

.bll-manager-page .bll-tabs-pill .bll-tab:hover{
	background: color-mix(in srgb, var(--bll-ink) 6%, transparent);
}

.bll-manager-page .bll-tabs-pill .bll-tab:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"])){
	color: var(--bll-white);
	background: var(--bll-ink);
}

.bll-manager-page .bll-tabs-pill .bll-tab:is(.is-active, [aria-selected="true"], [aria-current]:not([aria-current="false"])) .bll-tab-count{
	color: inherit;
	background: color-mix(in srgb, var(--bll-white) 22%, transparent);
}

.bll-manager-page .bll-tabs-pill.bll-tabs-vertical{
	gap: 4px;
	border-left: 0;
}

.bll-manager-page .bll-tabs-pill.bll-tabs-vertical .bll-tab{
	padding: 9px 14px;
	border: 0;
	border-radius: var(--bll-radius-sm);
}

/* Components > Tab panels */

/* `role="tablist"` + `role="tab"` + `role="tabpanel"` local-panel tabs (as opposed to
   links to a real `?tab=` URL, server-rendered): see BllUI.tablists() in bll-ui.js.
   Only the active panel is visible; switching is instant, no navigation. */
.bll-manager-page .bll-tabpanel{
	outline: none;
}

.bll-manager-page .bll-tabpanel[hidden]{
	display: none;
}

/* Components > Steps */

/* `<ol class="bll-steps"><li class="bll-step is-done">…</li><li class="bll-step is-current"
   aria-current="step">…</li>…</ol>`: where a multi-step process stands (detect → create →
   review → activate). Numbers come from a CSS counter and a done step swaps its number for
   a check, so the markup is only the step names. Not navigation — steps are text; the
   actions for the current one live in the cards below. Stacked on mobile, one row joined
   by a line from 783 px. */
.bll-manager-page .bll-steps{
	display: grid;
	gap: 12px;
	margin: 0 0 var(--bll-space);
	padding: 0;
	list-style: none;
	counter-reset: bll-step;
}

.bll-manager-page .bll-step{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	color: var(--bll-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	counter-increment: bll-step;
}

.bll-manager-page .bll-step::before{
	content: counter(bll-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	color: var(--bll-gray-600);
	font-size: 12px;
	font-weight: 700;
	background: var(--bll-surface);
	border: 1px solid var(--bll-border-strong);
	border-radius: 999px;
}

.bll-manager-page .bll-step.is-current{
	color: var(--bll-ink);
}

.bll-manager-page .bll-step.is-current::before{
	color: var(--bll-white);
	background: var(--bll-ink);
	border-color: var(--bll-ink);
}

.bll-manager-page .bll-step.is-done{
	color: var(--bll-text);
}

.bll-manager-page .bll-step.is-done::before{
	content: "✓";
	color: var(--bll-success-ink);
	background: var(--bll-success-bg);
	border-color: var(--bll-success-border);
}

@media screen and (min-width: 783px){
	.bll-manager-page .bll-steps{
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 12px;
	}

	.bll-manager-page .bll-step:not(:last-child)::after{
		content: "";
		flex: 1 1 16px;
		min-width: 16px;
		height: 1px;
		background: var(--bll-border-strong);
	}
}

/* Components > Badges */

.bll-manager-page .bll-badge{
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.bll-manager-page .bll-badge-success{
	color: var(--bll-success-ink);
	background: var(--bll-success-bg);
}

.bll-manager-page .bll-badge-danger{
	color: var(--bll-danger-ink);
	background: var(--bll-danger-bg);
}

.bll-manager-page .bll-badge-warning{
	color: var(--bll-warning-ink);
	background: var(--bll-warning-bg);
}

/* Neutral: a plain status word ("Sin datos", "Pendiente de revisión") with no
   success/warning/danger meaning attached to it. */
.bll-manager-page .bll-badge-neutral{
	color: var(--bll-gray-600);
	background: var(--bll-gray-100);
}

/* Label colors: a badge that only names a category the admin chose (a site tag, a
   client) and says nothing about state. Green, yellow, red and gray labels use the
   variants above; these are the hues they don't cover. */
.bll-manager-page .bll-badge-blue{
	color: var(--bll-accent-ink);
	background: var(--bll-accent-bg);
}

.bll-manager-page .bll-badge-violet{
	color: var(--bll-label-violet-ink);
	background: var(--bll-label-violet-bg);
}

.bll-manager-page .bll-badge-brown{
	color: var(--bll-label-brown-ink);
	background: var(--bll-label-brown-bg);
}

.bll-manager-page .bll-badge-black{
	color: var(--bll-white);
	background: var(--bll-ink);
}

/* Components > Tables */

.bll-manager-page .bll-table-responsive{
	position: relative;
	overflow-x: auto;
}

.bll-manager-page .bll-table{
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: 13px;
}

.bll-manager-page .bll-table th{
	padding: 12px 14px;
	color: var(--bll-muted);
	background: var(--bll-gray-50);
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.bll-manager-page .bll-table td{
	padding: 16px 14px;
	border-top: 1px solid var(--bll-border);
	vertical-align: middle;
}

/* A sortable column: the header's text becomes a link that flips the order, with an
   arrow that is faint until that column is the one in use. The sorting itself is the
   screen's business (a query argument, a request); this is only how it reads. The
   column keeps `aria-sort` so a screen reader announces the same thing the arrow says. */
.bll-manager-page .bll-sort{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.bll-manager-page .bll-sort:hover{
	color: var(--bll-ink);
}

.bll-manager-page .bll-sort .bll-ui-icon{
	font-size: 12px;
	opacity: 0.35;
	transition: opacity 0.15s ease;
}

.bll-manager-page .bll-sort:hover .bll-ui-icon{
	opacity: 0.7;
}

.bll-manager-page .bll-sort.is-active{
	color: var(--bll-ink);
}

.bll-manager-page .bll-sort.is-active .bll-ui-icon{
	color: var(--bll-accent);
	opacity: 1;
}

.bll-manager-page .bll-sort:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 2px;
	border-radius: var(--bll-radius-sm);
}

.bll-manager-page .bll-table-detail{
	display: block;
	color: var(--bll-muted);
	margin-top: 4px;
	font-size: 11px;
	overflow-wrap: anywhere;
}

.bll-manager-page .bll-table .bll-empty{
	padding: 40px 20px;
	text-align: center;
	color: var(--bll-muted);
}

/* `.bll-table-striped` modifier: alternating row background instead of (or together
   with) the border between rows — easier to scan a dense table row by row. */
.bll-manager-page .bll-table-striped tbody tr:nth-child(odd){
	background: var(--bll-gray-50);
}

/* After the stripe on purpose: same specificity, so an odd striped row still lights up
   on hover (it didn't when this rule came first). */
.bll-manager-page .bll-table tbody tr:hover{
	background: var(--bll-gray-100);
}

.bll-manager-page .bll-pagination{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 20px;
	color: var(--bll-muted);
}

/* Components > Empty state */

/* What a card or panel shows before it has anything in it: an icon, a short title saying
   what's missing, one line on how to get the first item and, optionally, the button that
   does it. `div.bll-empty` anywhere; `td.bll-empty` above stays the one-line table row.
   The icon is a same-element tile (`bll_ui_icon('inbox', 'bll-empty-icon')`). */
.bll-manager-page .bll-empty:not(td){
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 32px 16px;
	color: var(--bll-muted);
	text-align: center;
}

.bll-manager-page .bll-empty-icon{
	box-sizing: border-box;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
	padding: 12px;
	color: var(--bll-gray-400);
	background: var(--bll-gray-100);
	border-radius: 999px;
}

/* Tinted icon when the block states a status rather than "nothing here yet" (the HUB's
   connection card: plan active, paused or disabled). Same pairs as `.bll-stat-*`; without
   a variant the icon stays gray. */
.bll-manager-page .bll-empty-success .bll-empty-icon{
	color: var(--bll-success-ink);
	background: var(--bll-success-bg);
}

.bll-manager-page .bll-empty-warning .bll-empty-icon{
	color: var(--bll-warning-ink);
	background: var(--bll-warning-bg);
}

.bll-manager-page .bll-empty-danger .bll-empty-icon{
	color: var(--bll-danger-ink);
	background: var(--bll-danger-bg);
}

.bll-manager-page .bll-empty:not(td) :is(h2, h3, h4){
	margin: 0;
	color: var(--bll-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.bll-manager-page .bll-empty:not(td) p{
	max-width: 460px;
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
}

.bll-manager-page .bll-empty:not(td) .bll-btn{
	margin-top: 10px;
}

/* Components > Details */

.bll-manager-page .bll-details{
	margin: 0;
}

.bll-manager-page .bll-details-row{
	display: grid;
	padding: 15px 0;
	border-top: 1px solid var(--bll-border);
}

.bll-manager-page .bll-details-row:first-child{
	padding-top: 0;
	border-top: 0;
}

.bll-manager-page .bll-details dt{
	color: var(--bll-muted);
	font-size: 13px;
}

.bll-manager-page .bll-details dd{
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.bll-manager-page .bll-details-row{
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

@media screen and (min-width: 601px){
	.bll-manager-page .bll-details-row{
		grid-template-columns: minmax(110px, .85fr) minmax(0, 1.15fr);
		gap: 18px;
	}

}

/* Components > Card sections */

/* The parts of one card — a field's "Identity and value", "Classes", "Validation"; a
   card's button, then its confirmation — named with `h4.bll-subtitle` and kept apart with
   `hr.bll-divider` between them. The subtitle sits one step under the card's 18px title
   and clearly over a field's 13px / 600 label: written at that same size (each module had
   its own 13px heading), a part's name read as one more label and the parts ran together.
   The divider is a plain rule: WordPress' admin CSS gives every `hr` a second, lighter
   border underneath, taken off here. */
.bll-manager-page .bll-subtitle{
	margin: 0 0 12px;
	color: var(--bll-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.bll-manager-page .bll-divider{
	box-sizing: content-box;
	height: 0;
	margin: 24px 0;
	border: 0;
	border-top: 1px solid var(--bll-border);
}

/* Components > Disclosure */

/* `<details class="bll-disclosure"><summary>Más propiedades</summary>…</details>`: a
   secondary block opened on demand — technical details, advanced options, a list of notes.
   No surface of its own (a whole section is `.bll-card-collapsible`); the summary is a
   small outlined button (the size and colours of `.bll-btn-sm.bll-btn-outline-secondary`)
   with a chevron drawn in CSS before the text, so it needs no icon markup. Until
   2026-10-02 the summary was bare gray text with that chevron, which nobody read as
   something to click. */
.bll-manager-page .bll-disclosure{
	min-width: 0;
	margin: 0;
}

.bll-manager-page .bll-disclosure > summary{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 34px;
	padding: 5px 12px;
	color: var(--bll-gray-700);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	list-style: none;
	cursor: pointer;
	background: var(--bll-surface);
	border: 1px solid var(--bll-gray-300);
	border-radius: var(--bll-radius-sm);
	transition: color 0.18s ease, background-color 0.18s ease;
}

.bll-manager-page .bll-disclosure > summary::-webkit-details-marker{
	display: none;
}

.bll-manager-page .bll-disclosure > summary::before{
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin: 0 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.bll-manager-page .bll-disclosure[open] > summary::before{
	transform: rotate(45deg);
}

.bll-manager-page .bll-disclosure > summary:hover,
.bll-manager-page .bll-disclosure[open] > summary{
	color: var(--bll-ink);
	background: var(--bll-gray-100);
}

.bll-manager-page .bll-disclosure > summary:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 3px;
}

.bll-manager-page .bll-disclosure[open] > summary{
	margin-bottom: 16px;
}

/* Components > Code */

/* `pre.bll-code` for read-only technical output (a payload, an attempt history, detected
   source code) and `textarea.bll-code` for code or JSON someone edits. Monospace on the
   muted surface. The `pre` wraps long lines instead of widening its card and scrolls past
   360 px; the textarea keeps lines as typed (code reads badly re-wrapped) and scrolls
   sideways instead. */
.bll-manager-page .bll-code{
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 12px 14px;
	overflow: auto;
	color: var(--bll-gray-800);
	font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	tab-size: 2;
	background: var(--bll-surface-muted);
	border: 1px solid var(--bll-border);
	border-radius: var(--bll-radius-sm);
	box-shadow: none;
}

.bll-manager-page pre.bll-code{
	max-height: 360px;
}

.bll-manager-page textarea.bll-code{
	min-height: 160px;
	white-space: pre;
	overflow-wrap: normal;
	resize: vertical;
}

/* Components > Progress */

/* `<progress class="bll-progress" max="100" value="47">47%</progress>`: how far a long job
   has gone (a backup at 47 %). The native element, not a styled div: screen readers
   announce its value without ARIA, and the text inside is the fallback. Put it next to a
   label with the same number (a badge "En curso · 47 %"): a 6 px bar alone is hard to
   read. The fill is `currentColor`, so a tint is just a color: `-success`, `-warning`,
   `-danger`. No margin of its own — under a badge in a cell, add `bll-mt-2`. Without
   `value` the browser shows its own indeterminate state. */
.bll-manager-page .bll-progress{
	display: block;
	width: 100%;
	min-width: 80px;
	height: 6px;
	margin: 0;
	overflow: hidden;
	color: var(--bll-ink);
	background: var(--bll-gray-200);
	border: 0;
	border-radius: 999px;
	appearance: none;
}

.bll-manager-page .bll-progress::-webkit-progress-bar{
	background: var(--bll-gray-200);
	border-radius: 999px;
}

.bll-manager-page .bll-progress::-webkit-progress-value{
	background: currentColor;
	border-radius: 999px;
	transition: width 0.3s ease;
}

.bll-manager-page .bll-progress::-moz-progress-bar{
	background: currentColor;
	border-radius: 999px;
}

.bll-manager-page .bll-progress-success{
	color: var(--bll-success);
}

.bll-manager-page .bll-progress-warning{
	color: var(--bll-warning);
}

.bll-manager-page .bll-progress-danger{
	color: var(--bll-danger);
}

/* Components > Checklist */

/* A list of checks, each with its result: site health, requirements before an action.
   `<ul class="bll-checklist"><li class="is-warning">{bll_ui_icon('warning',
   'bll-checklist-icon')}<div><strong>Título</strong><span class="bll-checklist-detail">
   Qué pasa y qué hacer.</span></div></li>…</ul>`. The state is the `li` class —
   `is-success`, `is-warning`, `is-danger`, and `is-neutral` for "couldn't tell", which is
   not the same as "fine" — and it only tints the icon: the words carry the meaning, and a
   `screen-reader-text` prefix inside the `strong` ("Problema: ") says it for screen
   readers. Icons by convention: yes-alt, warning, dismiss, info. Order the items by
   severity so what needs attention comes first.

   `.bll-checklist-compact`: one line per item, no dividers, flowing into columns — what a
   plan includes (`yes` icon), short requirement lists. */
.bll-manager-page .bll-checklist{
	margin: 0;
	padding: 0;
	list-style: none;
}

.bll-manager-page .bll-checklist > li{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--bll-border);
}

.bll-manager-page .bll-checklist > li:first-child{
	padding-top: 0;
	border-top: 0;
}

.bll-manager-page .bll-checklist > li:last-child{
	padding-bottom: 0;
}

.bll-manager-page .bll-checklist > li > :not(.bll-checklist-icon){
	flex: 1 1 auto;
	min-width: 0;
}

.bll-manager-page .bll-checklist-icon{
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	color: var(--bll-muted);
}

.bll-manager-page .bll-checklist strong{
	display: block;
	color: var(--bll-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

.bll-manager-page .bll-checklist-detail{
	display: block;
	color: var(--bll-muted);
	font-size: 13px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.bll-manager-page .bll-checklist .is-success .bll-checklist-icon{
	color: var(--bll-success-ink);
}

.bll-manager-page .bll-checklist .is-warning .bll-checklist-icon{
	color: var(--bll-warning);
}

.bll-manager-page .bll-checklist .is-danger .bll-checklist-icon{
	color: var(--bll-danger-ink);
}

.bll-manager-page .bll-checklist-compact{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px 24px;
}

.bll-manager-page .bll-checklist-compact > li,
.bll-manager-page .bll-checklist-compact > li:first-child{
	align-items: center;
	gap: 10px;
	padding: 0;
	color: var(--bll-text);
	font-size: 13px;
	line-height: 1.5;
	border-top: 0;
}

.bll-manager-page .bll-checklist-compact .bll-checklist-icon{
	flex-basis: 18px;
	width: 18px;
	height: 18px;
}

/* Components > Tooltip */

/* Positioned in JS (assets/bll-ui/bll-ui.js, [data-bll-tooltip]): fixed + a transform
   keeps it independent of the trigger's own positioning context. It hangs from `<body>`,
   so only `body.bll-manager` gave it border-box; `max-width` is the same everywhere now. */
.bll-tooltip{
	position: fixed;
	z-index: 100000;
	box-sizing: border-box;
	max-width: 240px;
	padding: 6px 10px;
	color: var(--bll-white);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	background: var(--bll-ink);
	border-radius: 6px;
	transform: translate(-50%, calc(-100% - 8px));
	pointer-events: none;
}

.bll-tooltip::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 8px;
	height: 8px;
	background: inherit;
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Components > Popover */

/* The native `popover` attribute already handles the surface, backdrop and light
   dismiss; this only styles it to look like the rest of BLL UI. */
[popover].bll-popover{
	padding: 8px;
	color: var(--bll-ink);
	background: var(--bll-white);
	border: 1px solid var(--bll-border);
	border-radius: var(--bll-radius, 16px);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--bll-ink) 16%, transparent);
}

/* Components > Popup */

/* An information box: header (optional icon + title), descriptive text, and a footer of
   buttons. Usually a native `<dialog class="bll-popup">` opened with `.showModal()`,
   which already gives it the modal behavior (focus trap, Escape, `::backdrop`, the rest
   of the page inert) — BllUI.confirm()/BllUI.alert() build and open one. The box styles
   aren't tied to `dialog`, so the same markup renders in place too (the style guide's
   previews). Not scoped to `.bll-manager-page`: BllUI appends the dialog inside that
   wrapper when the screen has one, but the box must not depend on it.

   <dialog class="bll-popup bll-popup-danger" aria-labelledby="…" aria-describedby="…">
     <form method="dialog">
       <div class="bll-popup-body">
         <div class="bll-popup-header">
           {bll_ui_icon('trash', 'bll-popup-icon')}
           <h2 class="bll-popup-title" id="…">Título</h2>
         </div>
         <p class="bll-popup-text" id="…">Texto descriptivo.</p>
       </div>
       <div class="bll-popup-actions">
         <button class="bll-btn bll-btn-outline-secondary" value="cancel">Cancelar</button>
         <button class="bll-btn bll-btn-danger" value="confirm">Borrar</button>
       </div>
     </form>
   </dialog>

   Tint: `.bll-popup-success`, `.bll-popup-warning`, `.bll-popup-danger` color the icon;
   `-danger` also the title. */
.bll-popup{
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px));
	max-width: 100%;
	padding: 0;
	overflow: hidden;
	color: var(--bll-ink);
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
	background: var(--bll-surface);
	border: 1px solid var(--bll-border);
	border-radius: var(--bll-radius);
	box-shadow: var(--bll-shadow-lg);
}

.bll-popup *{
	box-sizing: border-box;
}

dialog.bll-popup::backdrop{
	background: color-mix(in srgb, var(--bll-ink) 48%, transparent);
}

.bll-popup form{
	margin: 0;
}

.bll-popup .bll-popup-body{
	padding: 24px 24px 22px;
}

.bll-popup .bll-popup-header{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
}

/* A same-element icon (`bll_ui_icon('trash', 'bll-popup-icon')`, BllUI.icon()): border-box
   + padding shrink the drawn icon to 20px inside the 40px tile. Not tied to `.bll-popup`,
   so the same tile works wherever a 40px icon badge is needed. */
.bll-popup-icon{
	display: block;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 10px;
	color: var(--bll-gray-600);
	background: var(--bll-gray-100);
	border-radius: 10px;
}

.bll-popup .bll-popup-title{
	margin: 0;
	color: var(--bll-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.bll-popup .bll-popup-text{
	margin: 0;
	color: var(--bll-gray-600);
	font-size: 14px;
	line-height: 1.6;
}

.bll-popup .bll-popup-actions{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 24px;
	background: var(--bll-surface-muted);
	border-top: 1px solid var(--bll-border);
}

.bll-popup-success .bll-popup-icon{
	color: var(--bll-success-ink);
	background: var(--bll-success-bg);
}

.bll-popup-warning .bll-popup-icon{
	color: var(--bll-warning-ink);
	background: var(--bll-warning-bg);
}

.bll-popup-danger .bll-popup-icon{
	color: var(--bll-danger-ink);
	background: var(--bll-danger-bg);
}

.bll-popup-danger .bll-popup-title{
	color: var(--bll-danger-ink);
}

/* `.bll-popup-lg`: the same box, 720 px wide, for reading or filling in something longer
   than a sentence — a submission's fields, a delivery's payload, a short form. The body
   scrolls inside the viewport so the actions stay visible below it. Written in the page
   markup (not built by BllUI.confirm()) and opened with a `data-bll-popup="id"` button. */
.bll-popup.bll-popup-lg{
	width: min(720px, calc(100vw - 32px));
}

.bll-popup-lg .bll-popup-body{
	max-height: calc(100vh - 180px);
	overflow: auto;
}

/* Longer content stacks several blocks under the header; the confirm/alert box only ever
   has header + one paragraph, so this spacing stays out of it. */
.bll-popup-lg .bll-popup-body > :not(.bll-popup-header) + *{
	margin-top: 14px;
}

@media screen and (max-width: 480px){
	.bll-popup .bll-popup-actions .bll-btn{
		flex: 1 1 auto;
	}

}

@media (prefers-reduced-motion: no-preference){
	dialog.bll-popup[open]{
		animation: bll-popup-in 0.16s ease;
	}

	dialog.bll-popup[open]::backdrop{
		animation: bll-popup-backdrop-in 0.16s ease;
	}
}

@keyframes bll-popup-in{
	from{
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
}

@keyframes bll-popup-backdrop-in{
	from{
		opacity: 0;
	}
}

/* Components > Accessibility */

@media (prefers-reduced-motion: reduce){
	.bll-manager-page *,
	.bll-manager-page *::before,
	.bll-manager-page *::after{
		transition: none !important;
	}

}

/* Components > Drag and drop */

.bll-manager-page .bll-card-draggable{
	position: relative;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.bll-manager-page .bll-card-draggable:hover{
	border-color: var(--bll-gray-400);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--bll-ink) 8%, transparent);
}

.bll-manager-page .bll-card-draggable.is-dragging{
	opacity: 0.45;
}

.bll-manager-page .bll-card-draggable.is-drop-target{
	outline: 2px dashed var(--bll-accent);
	outline-offset: 4px;
}

.bll-manager-page .bll-card-draggable .bll-card-header{
	padding-right: 44px;
}

/* The handle draws its own icon — three lines, from the button's `::before` and two
   shadows — so `<button class="bll-drag-handle" aria-label="…"></button>` needs no
   child. It used to be the dashicons "move" glyph from a bundled copy of the font
   (fonts/dashicons.woff2), which a browser won't load from `file://`: the guide opened
   by double click showed an empty button. A leftover `<span class="dashicons …">` child
   (Forms' field rows) is hidden, not drawn twice. */
.bll-manager-page .bll-drag-handle{
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--bll-muted);
	background: transparent;
	border: 0;
	border-radius: 6px;
	touch-action: none;
	cursor: grab;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.bll-manager-page .bll-drag-handle::before{
	content: "";
	width: 16px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.bll-manager-page .bll-drag-handle .dashicons{
	display: none;
}

.bll-manager-page .bll-drag-handle:hover{
	color: var(--bll-ink);
	background: var(--bll-gray-100);
}

.bll-manager-page .bll-drag-handle:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 2px;
}

.bll-manager-page .bll-drag-handle:active{
	cursor: grabbing;
}

/* An inline row (a field row, a mapping row) instead of a card's absolutely
   positioned corner button — same look, in flow. */
.bll-manager-page .bll-drag-handle.bll-drag-handle-inline{
	position: static;
	width: 28px;
	height: 28px;
}

.bll-manager-page .bll-drag-handle.bll-drag-handle-inline::before{
	width: 14px;
	box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
}

/* A row mid-drag (BllUI.sortable(), see bll-ui.js) and the gap that opens where it
   would land. */
.bll-manager-page [data-bll-sortable] > .is-dragging{
	opacity: 0.5;
}

.bll-manager-page [data-bll-sortable] > .bll-drop-line{
	height: 2px;
	margin: -1px 0;
	background: var(--bll-accent);
	border-radius: 1px;
}

/* Components > Icon buttons */

/* A button whose only content is a `.bll-ui-icon` — Duplicate/Delete/drag-adjacent
   row actions, a card's ⋮ menu trigger. Square, no label, `aria-label` required.
   `.bll-btn-icon-danger` only tints on hover/focus so a row of icon buttons doesn't
   read as "one of these is scary" before the visitor even touches it.
   `box-sizing` for an `<a class="bll-btn-icon">` outside `body.bll-manager`: see `.bll-btn`. */
:is(.bll-manager-page, .bll-popup) .bll-btn-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--bll-gray-500);
	font-size: 16px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

:is(.bll-manager-page, .bll-popup) .bll-btn-icon:hover{
	color: var(--bll-ink);
	background: var(--bll-gray-100);
	border-color: var(--bll-gray-200);
}

:is(.bll-manager-page, .bll-popup) .bll-btn-icon:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 2px;
}

:is(.bll-manager-page, .bll-popup) .bll-btn-icon:disabled{
	color: var(--bll-gray-300);
	cursor: not-allowed;
}

:is(.bll-manager-page, .bll-popup) .bll-btn-icon-danger:hover{
	color: var(--bll-danger-ink);
	background: var(--bll-danger-bg);
	border-color: transparent;
}

:is(.bll-manager-page, .bll-popup) .bll-btn-icon-sm{
	width: 28px;
	height: 28px;
	font-size: 14px;
}

/* Components > Switch */

/* `<label class="bll-switch"><input type="checkbox">Etiqueta visible o
   sr-only</label>` — a checkbox, not a custom widget: keyboard, forms and screen
   readers get it for free, only the checkbox itself is repainted as a track+thumb. */
.bll-manager-page .bll-switch{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
}

.bll-manager-page .bll-switch input[type="checkbox"]{
	appearance: none;
	flex: 0 0 34px;
	width: 34px;
	height: 20px;
	margin: 0;
	background: var(--bll-gray-300);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	position: relative;
	transition: background-color 0.15s ease;
}

/* `margin: 0` on purpose: WordPress' forms.css gives every checked checkbox a
   `::before` with `margin: -0.1875rem 0 0 -0.25rem` (its check mark). Everything else in
   that rule is overridden here, but not the margin, so the thumb jumped 3px up and 4px
   left as soon as the switch was turned on and poked out of the track. */
.bll-manager-page .bll-switch input[type="checkbox"]::before{
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--bll-white);
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.bll-manager-page .bll-switch input[type="checkbox"]:checked{
	background: var(--bll-success);
}

.bll-manager-page .bll-switch input[type="checkbox"]:checked::before{
	transform: translateX(14px);
}

.bll-manager-page .bll-switch input[type="checkbox"]:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: 2px;
}

.bll-manager-page .bll-switch input[type="checkbox"]:disabled{
	opacity: 0.5;
	cursor: not-allowed;
}

.bll-manager-page .bll-switch-sr-label{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Components > Segmented control */

/* `<div class="bll-segmented" role="radiogroup"><label><input type="radio"
   name="…"><span>Completo</span></label>…</div>` — a radio group in
   fieldset's clothing: 2–4 mutually exclusive choices (field width, captcha
   provider) where a `<select>` would hide options the visitor should compare at a
   glance. More than 4 choices, use a `<select>` instead. */
.bll-manager-page .bll-segmented{
	display: inline-flex;
	max-width: 100%;
	border: 1px solid var(--bll-gray-300);
	border-radius: 9px;
	overflow: hidden;
}

.bll-manager-page .bll-segmented label{
	display: flex;
	align-items: center;
	justify-content: center;
	/* `auto`, not `flex: 1`: a zero basis split the group into equal thirds whatever the
	   words, so the longest option ("Media library") never fit its third — it wrapped onto
	   two lines, or ran into its neighbor once kept to one. Each option now starts at its
	   own width and they share any extra space. One line per option; labels are meant to
	   be 1–2 words, and on a phone that can't fit them the span below ends in an ellipsis. */
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 10px;
	white-space: nowrap;
	color: var(--bll-gray-600);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bll-manager-page .bll-segmented label:not(:first-child){
	border-left: 1px solid var(--bll-gray-300);
}

.bll-manager-page .bll-segmented input{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.bll-manager-page .bll-segmented label > span{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bll-manager-page .bll-segmented input:checked + span{
	color: var(--bll-ink);
}

.bll-manager-page .bll-segmented label:has(input:checked){
	background: var(--bll-gray-100);
}

.bll-manager-page .bll-segmented label:has(input:focus-visible){
	outline: 2px solid var(--bll-accent);
	outline-offset: -2px;
}

/* A plain-button variant of the same look, for a control repeated inside a
   `<template>` clone (a field card in a list) where every radio group would need
   a JS-assigned unique `name` to avoid grouping across clones — a button only
   needs its own click handler. `aria-pressed` stands in for `:checked`. */
.bll-manager-page .bll-segmented button{
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--bll-gray-600);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bll-manager-page .bll-segmented button:not(:first-child){
	border-left: 1px solid var(--bll-gray-300);
}

.bll-manager-page .bll-segmented button[aria-pressed="true"]{
	color: var(--bll-ink);
	background: var(--bll-gray-100);
}

.bll-manager-page .bll-segmented button:focus-visible{
	outline: 2px solid var(--bll-accent);
	outline-offset: -2px;
}

/* Components > Chips */

/* A short value inline in text — a field, a page property, a fixed word — used by
   the integration mapping editor so a template reads as prose with objects in it
   instead of `{{field.name}}` syntax. `.bll-chip-removable` adds a trailing × button;
   `.bll-chip-muted` is the fixed-text/page-data variant next to a field chip. */
.bll-manager-page .bll-chip{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	color: var(--bll-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	background: var(--bll-gray-100);
	border-radius: 999px;
	white-space: nowrap;
}

.bll-manager-page .bll-chip .bll-ui-icon{
	font-size: 13px;
	color: var(--bll-gray-500);
}

.bll-manager-page .bll-chip-muted{
	color: var(--bll-gray-600);
	font-weight: 500;
	background: var(--bll-gray-50);
	border: 1px dashed var(--bll-gray-300);
}

.bll-manager-page .bll-chip-accent{
	color: var(--bll-accent-ink);
	background: var(--bll-accent-bg);
}

.bll-manager-page .bll-chip-accent .bll-ui-icon{
	color: inherit;
}

.bll-manager-page .bll-chip-remove{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: 0 -3px 0 1px;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.65;
}

.bll-manager-page .bll-chip-remove:hover{
	opacity: 1;
	background: color-mix(in srgb, var(--bll-ink) 12%, transparent);
}

.bll-manager-page .bll-chip-add{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px 3px 8px;
	color: var(--bll-gray-600);
	font-size: 12px;
	font-weight: 600;
	background: transparent;
	border: 1px dashed var(--bll-gray-300);
	border-radius: 999px;
	cursor: pointer;
}

.bll-manager-page .bll-chip-add:hover{
	color: var(--bll-ink);
	background: var(--bll-gray-50);
	border-color: var(--bll-gray-400);
}

.bll-manager-page .bll-chip-row{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 34px;
	padding: 5px 8px;
	background: var(--bll-white);
	border: 1px solid var(--bll-gray-300);
	border-radius: 9px;
}

.bll-manager-page .bll-chip-row:focus-within{
	box-shadow: var(--bll-focus-ring);
}

.bll-manager-page .bll-chip-row input{
	flex: 1 1 80px;
	min-width: 80px;
	height: 24px;
	min-height: 0;
	padding: 0 2px;
	border: 0;
	box-shadow: none;
}

/* Components > Dropdown */

/* `<button popovertarget="id" aria-haspopup="menu">⋮</button><div id="id" popover
   class="bll-dropdown" role="menu"><button role="menuitem" class="bll-dropdown-item">…` —
   built on the same native `popover` attribute as `.bll-popover`, so BllUI's existing
   `popovers()` already keeps the trigger's `aria-expanded` in sync; nothing new to
   wire in JS. The browser positions/dismisses it; `.bll-dropdown` only styles the sheet.
   It doesn't set `display`: an author `display` beats the browser's own
   `[popover]:not(:popover-open){display:none}` and would leave the sheet always open.

   Called `.bll-menu`/`.bll-menu-item` until 2026-09-17, when those names went to the page
   navigation (Menu, above). The transitional `.bll-menu[popover]` selectors that kept
   Forms' old markup working were removed once Forms switched to `.bll-dropdown`.
   `box-sizing` on the sheet and its items for screens without `body.bll-manager`: an
   `<a class="bll-dropdown-item">` is `width: 100%` plus its padding, and stuck out. */
.bll-manager-page .bll-dropdown{
	box-sizing: border-box;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	overflow: visible;
	color: var(--bll-ink);
	background: var(--bll-surface);
	border: 1px solid var(--bll-border);
	border-radius: 10px;
	box-shadow: var(--bll-shadow-md);
	inset: auto;
}

.bll-manager-page .bll-dropdown-item{
	display: flex;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	color: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	white-space: normal;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
}

.bll-manager-page .bll-dropdown-item:hover,
.bll-manager-page .bll-dropdown-item:focus-visible{
	color: inherit;
	background: var(--bll-gray-100);
	outline: none;
}

.bll-manager-page .bll-dropdown-item .bll-ui-icon{
	color: var(--bll-muted);
}

.bll-manager-page .bll-dropdown-item-danger{
	color: var(--bll-danger-ink);
}

.bll-manager-page .bll-dropdown-item-danger .bll-ui-icon{
	color: inherit;
}

.bll-manager-page .bll-dropdown-item-danger:hover,
.bll-manager-page .bll-dropdown-item-danger:focus-visible{
	color: var(--bll-danger-ink);
	background: var(--bll-danger-bg);
}

.bll-manager-page .bll-dropdown-separator{
	height: 1px;
	margin: 6px 4px;
	background: var(--bll-border);
}

/* Components > Toast */

/* `BllUI.toast(message, {actionLabel, onAction})` (bll-ui.js) appends one of these
   and removes it after a few seconds — "Campo eliminado · Deshacer" after a delete
   the visitor didn't have to confirm first. Fixed position is deliberate here: it is
   real wp-admin chrome, not a claude.ai artifact iframe. */
.bll-toast-region{
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateX(-50%);
	pointer-events: none;
}

.bll-toast{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px 10px 16px;
	color: var(--bll-gray-50);
	font-size: 13px;
	background: var(--bll-ink);
	border-radius: 10px;
	box-shadow: 0 10px 30px color-mix(in srgb, var(--bll-ink) 28%, transparent);
	pointer-events: auto;
}

.bll-toast-action{
	flex-shrink: 0;
	padding: 5px 10px;
	color: var(--bll-white);
	font-size: 12px;
	font-weight: 700;
	background: color-mix(in srgb, var(--bll-white) 14%, transparent);
	border: 0;
	border-radius: 7px;
	cursor: pointer;
}

.bll-toast-action:hover{
	background: color-mix(in srgb, var(--bll-white) 24%, transparent);
}

.bll-toast-dismiss{
	flex-shrink: 0;
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	color: var(--bll-gray-300);
	background: transparent;
	border: 0;
	cursor: pointer;
}

@media (max-width: 480px){
	.bll-toast-region{
		left: 16px;
		right: 16px;
		transform: none;
	}

	.bll-toast{
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: no-preference){
	.bll-toast{
		animation: bll-toast-in 0.18s ease;
	}
}

@keyframes bll-toast-in{
	from{
		opacity: 0;
		transform: translateY(6px);
	}
}

/* Utilities > Spacing */

/* Bootstrap-style margin and padding classes, for the spots where two elements with no
   class of their own end up glued together (a paragraph after a form, a button after a
   table) — reach for these instead of an inline style or a one-off rule in a module.
   `bll-{m|p}{side}-{step}`: side t/b (top/bottom), s/e (start/end, i.e. left/right
   and mirrored in RTL), x/y (both horizontal/vertical) or none (all four); step 0–6 is
   the --bll-space-* scale (0, 4, 8, 12, 16, 24, 32 px). Margins also take `-auto`.
   `!important` like any utility: it has to win over the component rule it adjusts,
   whatever that rule's specificity. One rule per line, it reads as a table. */

.bll-m-0{ margin: var(--bll-space-0) !important; }
.bll-m-1{ margin: var(--bll-space-1) !important; }
.bll-m-2{ margin: var(--bll-space-2) !important; }
.bll-m-3{ margin: var(--bll-space-3) !important; }
.bll-m-4{ margin: var(--bll-space-4) !important; }
.bll-m-5{ margin: var(--bll-space-5) !important; }
.bll-m-6{ margin: var(--bll-space-6) !important; }
.bll-m-auto{ margin: auto !important; }
.bll-mt-0{ margin-top: var(--bll-space-0) !important; }
.bll-mt-1{ margin-top: var(--bll-space-1) !important; }
.bll-mt-2{ margin-top: var(--bll-space-2) !important; }
.bll-mt-3{ margin-top: var(--bll-space-3) !important; }
.bll-mt-4{ margin-top: var(--bll-space-4) !important; }
.bll-mt-5{ margin-top: var(--bll-space-5) !important; }
.bll-mt-6{ margin-top: var(--bll-space-6) !important; }
.bll-mt-auto{ margin-top: auto !important; }
.bll-mb-0{ margin-bottom: var(--bll-space-0) !important; }
.bll-mb-1{ margin-bottom: var(--bll-space-1) !important; }
.bll-mb-2{ margin-bottom: var(--bll-space-2) !important; }
.bll-mb-3{ margin-bottom: var(--bll-space-3) !important; }
.bll-mb-4{ margin-bottom: var(--bll-space-4) !important; }
.bll-mb-5{ margin-bottom: var(--bll-space-5) !important; }
.bll-mb-6{ margin-bottom: var(--bll-space-6) !important; }
.bll-mb-auto{ margin-bottom: auto !important; }
.bll-ms-0{ margin-inline-start: var(--bll-space-0) !important; }
.bll-ms-1{ margin-inline-start: var(--bll-space-1) !important; }
.bll-ms-2{ margin-inline-start: var(--bll-space-2) !important; }
.bll-ms-3{ margin-inline-start: var(--bll-space-3) !important; }
.bll-ms-4{ margin-inline-start: var(--bll-space-4) !important; }
.bll-ms-5{ margin-inline-start: var(--bll-space-5) !important; }
.bll-ms-6{ margin-inline-start: var(--bll-space-6) !important; }
.bll-ms-auto{ margin-inline-start: auto !important; }
.bll-me-0{ margin-inline-end: var(--bll-space-0) !important; }
.bll-me-1{ margin-inline-end: var(--bll-space-1) !important; }
.bll-me-2{ margin-inline-end: var(--bll-space-2) !important; }
.bll-me-3{ margin-inline-end: var(--bll-space-3) !important; }
.bll-me-4{ margin-inline-end: var(--bll-space-4) !important; }
.bll-me-5{ margin-inline-end: var(--bll-space-5) !important; }
.bll-me-6{ margin-inline-end: var(--bll-space-6) !important; }
.bll-me-auto{ margin-inline-end: auto !important; }
.bll-mx-0{ margin-inline: var(--bll-space-0) !important; }
.bll-mx-1{ margin-inline: var(--bll-space-1) !important; }
.bll-mx-2{ margin-inline: var(--bll-space-2) !important; }
.bll-mx-3{ margin-inline: var(--bll-space-3) !important; }
.bll-mx-4{ margin-inline: var(--bll-space-4) !important; }
.bll-mx-5{ margin-inline: var(--bll-space-5) !important; }
.bll-mx-6{ margin-inline: var(--bll-space-6) !important; }
.bll-mx-auto{ margin-inline: auto !important; }
.bll-my-0{ margin-block: var(--bll-space-0) !important; }
.bll-my-1{ margin-block: var(--bll-space-1) !important; }
.bll-my-2{ margin-block: var(--bll-space-2) !important; }
.bll-my-3{ margin-block: var(--bll-space-3) !important; }
.bll-my-4{ margin-block: var(--bll-space-4) !important; }
.bll-my-5{ margin-block: var(--bll-space-5) !important; }
.bll-my-6{ margin-block: var(--bll-space-6) !important; }
.bll-my-auto{ margin-block: auto !important; }

.bll-p-0{ padding: var(--bll-space-0) !important; }
.bll-p-1{ padding: var(--bll-space-1) !important; }
.bll-p-2{ padding: var(--bll-space-2) !important; }
.bll-p-3{ padding: var(--bll-space-3) !important; }
.bll-p-4{ padding: var(--bll-space-4) !important; }
.bll-p-5{ padding: var(--bll-space-5) !important; }
.bll-p-6{ padding: var(--bll-space-6) !important; }
.bll-pt-0{ padding-top: var(--bll-space-0) !important; }
.bll-pt-1{ padding-top: var(--bll-space-1) !important; }
.bll-pt-2{ padding-top: var(--bll-space-2) !important; }
.bll-pt-3{ padding-top: var(--bll-space-3) !important; }
.bll-pt-4{ padding-top: var(--bll-space-4) !important; }
.bll-pt-5{ padding-top: var(--bll-space-5) !important; }
.bll-pt-6{ padding-top: var(--bll-space-6) !important; }
.bll-pb-0{ padding-bottom: var(--bll-space-0) !important; }
.bll-pb-1{ padding-bottom: var(--bll-space-1) !important; }
.bll-pb-2{ padding-bottom: var(--bll-space-2) !important; }
.bll-pb-3{ padding-bottom: var(--bll-space-3) !important; }
.bll-pb-4{ padding-bottom: var(--bll-space-4) !important; }
.bll-pb-5{ padding-bottom: var(--bll-space-5) !important; }
.bll-pb-6{ padding-bottom: var(--bll-space-6) !important; }
.bll-ps-0{ padding-inline-start: var(--bll-space-0) !important; }
.bll-ps-1{ padding-inline-start: var(--bll-space-1) !important; }
.bll-ps-2{ padding-inline-start: var(--bll-space-2) !important; }
.bll-ps-3{ padding-inline-start: var(--bll-space-3) !important; }
.bll-ps-4{ padding-inline-start: var(--bll-space-4) !important; }
.bll-ps-5{ padding-inline-start: var(--bll-space-5) !important; }
.bll-ps-6{ padding-inline-start: var(--bll-space-6) !important; }
.bll-pe-0{ padding-inline-end: var(--bll-space-0) !important; }
.bll-pe-1{ padding-inline-end: var(--bll-space-1) !important; }
.bll-pe-2{ padding-inline-end: var(--bll-space-2) !important; }
.bll-pe-3{ padding-inline-end: var(--bll-space-3) !important; }
.bll-pe-4{ padding-inline-end: var(--bll-space-4) !important; }
.bll-pe-5{ padding-inline-end: var(--bll-space-5) !important; }
.bll-pe-6{ padding-inline-end: var(--bll-space-6) !important; }
.bll-px-0{ padding-inline: var(--bll-space-0) !important; }
.bll-px-1{ padding-inline: var(--bll-space-1) !important; }
.bll-px-2{ padding-inline: var(--bll-space-2) !important; }
.bll-px-3{ padding-inline: var(--bll-space-3) !important; }
.bll-px-4{ padding-inline: var(--bll-space-4) !important; }
.bll-px-5{ padding-inline: var(--bll-space-5) !important; }
.bll-px-6{ padding-inline: var(--bll-space-6) !important; }
.bll-py-0{ padding-block: var(--bll-space-0) !important; }
.bll-py-1{ padding-block: var(--bll-space-1) !important; }
.bll-py-2{ padding-block: var(--bll-space-2) !important; }
.bll-py-3{ padding-block: var(--bll-space-3) !important; }
.bll-py-4{ padding-block: var(--bll-space-4) !important; }
.bll-py-5{ padding-block: var(--bll-space-5) !important; }
.bll-py-6{ padding-block: var(--bll-space-6) !important; }

/* Utilities > Text alignment */

/* Any element, table cells included (`<th class="bll-text-end">` for an actions
   column). Logical start/end, so they mirror in RTL like the spacing above. */
.bll-text-start{ text-align: start !important; }
.bll-text-center{ text-align: center !important; }
.bll-text-end{ text-align: end !important; }