/* #################################################################  BRANDING DUDOCTOR  ################################################################# */

/*
	La marca de DuDoctor en un solo archivo: los colores, la letra, el espaciado, los radios y las sombras (las
	variables de :root), los textos sin clases (títulos, párrafos, negritas, enlaces, el foco) y las piezas que se ven
	igual en cualquier pantalla de cualquier software de DuDoctor: botones, enlaces de acción, campos, casillas,
	tarjetas de opción, interruptores, insignias, píldoras, chips de estado y avisos.

	Es el MISMO archivo en la carpeta de la marca (/branding/css/branding.css) y en cada software, que lleva una copia
	literal, sin retoques (un cmp entre las copias no encuentra ninguna diferencia):
	- dudoctor/public/assets/css/branding.css, la aplicación (la carga cada página, la primera);
	- dudoctor-realtime/public/branding.css, la página de estado del hub de tiempo real.
	Para cambiar algo, se cambia en /branding y se copia entero. Las hojas de cada software no redefinen estas piezas:
	las colocan (márgenes, anchos, rejillas) y, en un sitio concreto, ajustan lo que haga falta.

	Nombres: los de DuDoctor. BEM ligero (.bloque, .bloque__elemento, .bloque--variante) y estados .is-*.

	Dos registros, con los mismos nombres y el mismo marcado:
	- la web (lo normal: no hace falta poner ninguna clase): la web pública, el cuestionario, el área de paciente y el
	  instalador. Botones en píldora, campos de 52 px con el radio mediano y casillas dibujadas por la marca;
	- la herramienta (.tool-ui, en el <body>): el panel, sus pantallas de acceso y la página de estado del hub. Radios
	  pequeños, campos de 48 px, el botón sin variante en gris, casillas del navegador y, desde 900 px, la letra de los
	  controles un punto más pequeña.
	Lo que cambia de uno a otro va en las variables de «Según el registro», y .tool-ui las cambia todas a la vez.

	El acento lo elige cada clínica (en la aplicación, Panel › Ajustes): la aplicación escribe --accent y --accent-ink
	en un <style> DESPUÉS de esta hoja, y todo lo que lleva el acento sale de esas dos con color-mix(), también las
	sombras de color. Las flechas y la marca de las casillas son data: URI, que no leen variables: su color va a mano.

	MOBILE FIRST: la base es el móvil y las mejoras van solo con min-width 600 / 900 / 1200. No hay estructura de
	página (contenedores, cabeceras, rejillas, el fondo del <body>): eso es de cada software (en la aplicación,
	tokens.css y sus hojas). La letra es la del sistema: sin archivos de fuentes. Los iconos (icons.svg) son de línea
	y se pintan con color (su trazo es currentColor).
*/


/* Marca: el acento y lo que sale de él. --accent y --accent-ink los sustituye la aplicación con los de la clínica */
:root {
	--accent: #0b7a75; /* El teal de DuDoctor. */
	--accent-hover: color-mix(in srgb, var(--accent) 84%, #000); /* Al pasar el ratón; también el texto en acento sobre los fondos suaves. */
	--accent-soft: color-mix(in srgb, var(--accent) 10%, #fff); /* Fondos suaves: insignias, avatares, lo elegido. */
	--accent-softer: color-mix(in srgb, var(--accent) 5%, #fff); /* Fondos más suaves todavía: bandas, citas, la opción marcada. */
	--accent-line: color-mix(in srgb, var(--accent) 28%, #fff); /* Bordes suaves en el acento. */
	--accent-ink: #ffffff; /* El texto encima del acento (la aplicación pone uno oscuro si el acento elegido es claro). */
	--brand-accent: #0b7a75; /* El color FIJO de la marca: el de --accent, pero que una página con color propio (una categoría, un tratamiento) no cambia. La aplicación pone el de su marca. */
	--brand-accent-ink: #ffffff; /* El texto encima de --brand-accent. */
}

/* Texto y superficies */
:root {
	--ink: #0f1f2e; /* Títulos, negritas y el texto de los controles. */
	--ink-soft: #3d4f61; /* El texto corrido. */
	--muted: #6b7c8f; /* Notas, ayudas y lo secundario (4,28:1 sobre blanco: no llega al 4,5:1 de AA en letra pequeña). */
	--line: #e2e9ef; /* Bordes de tarjetas y separadores. */
	--line-soft: #eef2f6; /* Separadores dentro de una tarjeta. */
	--line-strong: color-mix(in srgb, var(--muted) 45%, var(--line)); /* Borde de un control de la herramienta y del botón secundario (2:1 sobre blanco). */
	--field-border: color-mix(in srgb, var(--muted) 78%, #fff); /* Borde de los campos de la web (2,9:1 sobre blanco). */
	--bg: #ffffff;
	--bg-soft: #f5f8f9; /* El fondo del panel y de las secciones suaves. */
	--bg-sunken: #edf2f4; /* Lo hundido: el botón gris, las insignias neutras, las barras. */
	--night: #0c1a26; /* Bandas oscuras, el pie, las burbujas y los toasts. */
	--night-ink: #d5dfe8; /* El texto sobre --night. */
}

/* Estados: cada familia con su color de texto, su fondo suave y su borde */
:root {
	--ok: #15803d; /* Hecho, correcto, respondida. */
	--ok-soft: #e8f6ed;
	--ok-line: color-mix(in srgb, var(--ok) 30%, var(--ok-soft));
	--warn: #b45309; /* Cuidado, pendiente, por decidir. */
	--warn-soft: #fdf3e2;
	--warn-line: color-mix(in srgb, var(--warn) 35%, var(--warn-soft));
	--danger: #b91c1c; /* Error, no apta, borrar. */
	--danger-soft: #fdeaea;
	--danger-line: color-mix(in srgb, var(--danger) 30%, var(--danger-soft));
	--info: #1d4ed8; /* Información, en revisión. */
	--info-soft: #e8effd;
	--info-line: color-mix(in srgb, var(--info) 25%, var(--info-soft));
	--treat: #6d28d9; /* «En tratamiento». */
	--treat-soft: #f1ebfd;
}

/* Letra: la del sistema, sin archivos de fuentes (la CSP de la aplicación es font-src self) */
:root {
	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Códigos, referencias, texto técnico. */
	--fs-xs: 0.8125rem; /* 13 px. */
	--fs-sm: 0.875rem; /* 14 px. */
	--fs-base: 1rem; /* 16 px: el mínimo de un campo, para que iOS no haga zoom al enfocarlo. */
	--fs-md: 1.125rem; /* 18 px. */
	--fs-lg: 1.375rem; /* 22 px. */
	--fs-xl: 1.75rem; /* 28 px. */
	--fs-2xl: 2.125rem; /* 34 px. */
	--fs-3xl: clamp(2.25rem, 1.4rem + 4.2vw, 3.75rem); /* Titulares de portada, fluido. */
	--lh-tight: 1.15; /* Títulos. */
	--lh-base: 1.6; /* Texto corrido de la web. */
}

/* Espaciado: la escala que usan todas las piezas y todas las pantallas */
:root {
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
}

/* Forma: radios, sombras y el halo del foco */
:root {
	--r-sm: 8px; /* Lo pequeño, y los controles de la herramienta. */
	--r-md: 14px; /* Campos de la web, cajas dentro de una tarjeta, avisos. */
	--r-lg: 22px; /* Tarjetas. */
	--r-pill: 999px; /* Botones de la web, píldoras y chips de estado. */
	--shadow-sm: 0 1px 2px rgba(15, 31, 46, .06), 0 1px 3px rgba(15, 31, 46, .08);
	--shadow-md: 0 4px 14px rgba(15, 31, 46, .08), 0 2px 4px rgba(15, 31, 46, .05);
	--shadow-lg: 0 18px 40px rgba(15, 31, 46, .14);
	--ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); /* El halo del foco, en el acento. */
}

/* Controles: el objetivo táctil */
:root {
	--tap: 48px; /* El alto de un control normal: botón, campo, casilla, interruptor. */
	--tap-sm: 44px; /* El mínimo de un control compacto de la herramienta en el móvil. */
}

/* Movimiento */
:root {
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* Dibujos: flechas y marcas como data: URI (la CSP de la aplicación admite data: en img-src). El color va a mano */
:root {
	--ddr-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); /* Flecha, como máscara: toma el color del texto. */
	--ddr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); /* Marca, como máscara. */
	--ddr-check-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7L9.5 16.5 5 12'/%3E%3C/svg%3E"); /* Marca blanca de las casillas marcadas. */
	--ddr-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4f61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* Flecha de los desplegables de la web (= --ink-soft). */
	--ddr-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7c8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Flecha de los desplegables de la herramienta (= --muted). */
}


/* ········································ SEGÚN EL REGISTRO ········································ */

/*
	Una variable no puede valer «lo que herede» (inherit en una variable copia la variable del padre, no la propiedad):
	donde la web deja heredar y la herramienta pone un valor, la herramienta lleva su regla, con :where(.tool-ui).
*/

/* La web (lo normal: no hace falta poner ninguna clase). */
:root {
	--body-lh: var(--lh-base);
	--h-weight: 750;
	--h-lh: var(--lh-tight);
	--h-ls: -0.02em;
	--h-wrap: balance;
	--h-color: var(--ink);
	--h1-size: var(--fs-2xl);
	--h1-ls: -0.03em;
	--h2-size: var(--fs-xl);
	--h2-ls: -0.025em;
	--h3-size: var(--fs-lg);
	--h4-size: var(--fs-md);
	--p-wrap: pretty;
	--strong-weight: 650;
	--small-size: var(--fs-sm);
	--hr-margin: var(--s-5) 0;
	--link-offset: 0.18em;
	--link-thickness: 0.08em;
	--selection-bg: var(--accent-soft);
	--focus-radius: var(--r-sm);
	--control-h: var(--tap);
	--btn-radius: var(--r-pill);
	--btn-border: 1.5px;
	--btn-pad: var(--s-2) var(--s-5);
	--btn-bg: transparent;
	--btn-fs: var(--fs-base);
	--btn-ls: -0.005em;
	--btn-ws: normal;
	--btn-press: translateY(1px) scale(.99);
	--btn-speed: .2s;
	--btn-primary-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
	--btn-secondary-shadow: var(--shadow-sm);
	--btn-secondary-hover-bg: var(--bg);
	--btn-danger-fg: #fff;
	--btn-danger-bg: var(--danger);
	--btn-danger-line: var(--danger);
	--btn-danger-hover-fg: #fff;
	--btn-danger-hover-bg: color-mix(in srgb, var(--danger) 86%, #000);
	--btn-danger-hover-line: color-mix(in srgb, var(--danger) 86%, #000);
	--btn-sm-h: 40px;
	--btn-sm-pad: var(--s-1) var(--s-4);
	--btn-sm-fs: var(--fs-sm);
	--field-gap: var(--s-2);
	--field-label-display: block;
	--field-note-fs: var(--fs-sm);
	--field-h: 52px;
	--field-pad: var(--s-3) var(--s-4);
	--field-border-w: 1.5px;
	--field-line: var(--field-border);
	--field-radius: var(--r-md);
	--field-fs: var(--fs-base);
	--field-off-fg: var(--muted);
	--field-off-opacity: 1;
	--field-error-w: 2px;
	--placeholder-opacity: 1;
	--textarea-h: 128px;
	--textarea-pad: var(--s-3) var(--s-4);
	--textarea-lh: 1.55;
	--select-arrow: var(--ddr-chevron);
	--select-arrow-x: 14px;
	--select-pad-end: 44px;
	--check-h: var(--tap);
	--check-pad: var(--s-3) 0;
	--check-fs: 1em;
	--check-box: 24px;
	--check-look: none; /* none: la casilla y el radio los dibuja la marca; auto: los del navegador. */
	--check-off: var(--bg); /* El fondo de la casilla y del radio dibujados, sin marcar y marcados. */
	--check-on: var(--ddr-check-w) center / 15px no-repeat, var(--accent);
	--radio-on: radial-gradient(circle, var(--accent-ink) 0 30%, transparent 34%), var(--accent);
	--check-ring: var(--ring);
	--check-off-opacity: .5; /* La casilla desactivada: la dibujada se atenúa; la del navegador ya se ve desactivada. */
	--badge-border: none;
	--badge-radius: var(--r-sm);
	--badge-bg: var(--bg-sunken);
	--badge-fs: var(--fs-xs);
	--badge-lh: 1.5;
	--badge-align: baseline;
	--status-gap: var(--s-2);
	--status-pad: 3px var(--s-3) 3px var(--s-2);
	--status-weight: 650;
	--status-lh: 1.5;
	--status-dot: 8px;
	--alert-pad: var(--s-4);
	--alert-radius: var(--r-md);
	--alert-bg: var(--bg-soft);
	--alert-ico: currentColor;
	--alert-title-fs: var(--fs-base);
	--alert-title-gap: 0;
	--alert-stack: var(--s-1);
}

/* La herramienta (.tool-ui): el panel y lo que se le parece. */
.tool-ui {
	--body-lh: 1.5;
	--h-weight: 700;
	--h-lh: 1.25;
	--h-ls: -0.01em;
	--h-wrap: wrap;
	--h-color: currentColor; /* hereda el color de su caja (en color, currentColor es inherit) */
	--h1-size: 2em;
	--h1-ls: -0.01em;
	--h2-size: 1.5em;
	--h2-ls: -0.01em;
	--h3-size: 1.17em;
	--h4-size: 1em;
	--p-wrap: wrap;
	--strong-weight: bolder;
	--small-size: var(--fs-xs);
	--hr-margin: var(--s-4) 0;
	--link-offset: 2px;
	--link-thickness: 1px;
	--selection-bg: var(--accent-line);
	--focus-radius: 4px;
	--control-h: var(--tap);
	--btn-radius: var(--r-sm);
	--btn-border: 1px;
	--btn-pad: 0 var(--s-4);
	--btn-bg: var(--bg-sunken);
	--btn-fs: var(--fs-base);
	--btn-ls: normal;
	--btn-ws: nowrap;
	--btn-press: translateY(1px);
	--btn-speed: .15s;
	--btn-primary-shadow: var(--shadow-sm);
	--btn-secondary-shadow: none;
	--btn-secondary-hover-bg: var(--bg-soft);
	--btn-danger-fg: var(--danger);
	--btn-danger-bg: var(--bg);
	--btn-danger-line: var(--danger-line);
	--btn-danger-hover-fg: var(--danger);
	--btn-danger-hover-bg: var(--danger-soft);
	--btn-danger-hover-line: var(--danger);
	--btn-sm-h: var(--tap-sm);
	--btn-sm-pad: 0 var(--s-3);
	--btn-sm-fs: var(--fs-sm);
	--field-gap: 6px;
	--field-label-display: flex;
	--field-note-fs: var(--fs-xs);
	--field-h: var(--control-h);
	--field-pad: 0 var(--s-3);
	--field-border-w: 1px;
	--field-line: var(--line-strong);
	--field-radius: var(--r-sm);
	--field-fs: var(--fs-base);
	--field-off-fg: var(--ink-soft);
	--field-off-opacity: .75;
	--field-error-w: 1px;
	--placeholder-opacity: .8;
	--textarea-h: 112px;
	--textarea-pad: var(--s-3);
	--textarea-lh: 1.5;
	--select-arrow: var(--ddr-chevron-muted);
	--select-arrow-x: 10px;
	--select-pad-end: calc(var(--s-3) + 24px);
	--check-h: var(--tap-sm);
	--check-pad: 10px 0;
	--check-fs: var(--fs-sm);
	--check-box: 22px;
	--check-look: auto;
	--check-off: none;
	--check-on: none;
	--radio-on: none;
	--check-ring: none;
	--check-off-opacity: 1;
	--badge-border: 1px solid var(--line);
	--badge-radius: 6px;
	--badge-bg: var(--bg);
	--badge-fs: 0.75rem;
	--badge-lh: 1.45;
	--badge-align: middle;
	--status-gap: 6px;
	--status-pad: 3px 10px 3px 8px;
	--status-weight: 700;
	--status-lh: 1.4;
	--status-dot: 7px;
	--alert-pad: var(--s-3) var(--s-4);
	--alert-radius: var(--r-sm);
	--alert-bg: var(--bg);
	--alert-ico: var(--muted);
	--alert-title-fs: 1em;
	--alert-title-gap: 2px;
	--alert-stack: 0;
}

/* Desde 900 px (con el ratón), la herramienta baja los controles a 44 px y su letra a 14 px. */
@media (min-width: 900px) {
	.tool-ui {
		--control-h: 44px;
		--btn-fs: var(--fs-sm);
		--btn-sm-h: 36px;
		--btn-sm-fs: var(--fs-xs);
		--field-fs: var(--fs-sm);
	}
	:where(.tool-ui) textarea.input--mono {font-size: var(--fs-xs);}
}


/* ········································ BASE ········································ */

*, *::before, *::after {box-sizing: border-box;}

html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: var(--body-lh);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: var(--h-weight);
	line-height: var(--h-lh);
	letter-spacing: var(--h-ls);
	color: var(--h-color);
	text-wrap: var(--h-wrap);
}
h1 {font-size: var(--h1-size); letter-spacing: var(--h1-ls);}
h2 {font-size: var(--h2-size); letter-spacing: var(--h2-ls);}
h3 {font-size: var(--h3-size);}
h4 {font-size: var(--h4-size);}

p {margin: 0; text-wrap: var(--p-wrap);}
ul, ol {margin: 0; padding: 0;}
img, svg, video {max-width: 100%;}
svg {flex: none; vertical-align: middle;}
hr {border: 0; border-top: 1px solid var(--line); margin: var(--hr-margin);}
small {font-size: var(--small-size);}
strong, b {font-weight: var(--strong-weight);}
address {font-style: normal;}
[hidden] {display: none !important;}

a {color: var(--accent); text-underline-offset: var(--link-offset); text-decoration-thickness: var(--link-thickness);}
a:hover {color: var(--accent-hover);}

/* Especificidad 0: no pisa a las piezas de los formularios, que también son :where(). */
:where(button, input, select, textarea) {font: inherit; color: inherit;}
button {cursor: pointer;}
fieldset {margin: 0; padding: 0; border: 0; min-width: 0;}
legend {padding: 0;}

::selection {background: var(--selection-bg); color: var(--ink);}
::placeholder {color: var(--muted); opacity: var(--placeholder-opacity);}

/* Lo que pinta el navegador (casillas de la herramienta, barras de progreso...), en el acento. */
:root {accent-color: var(--accent);}

/*
	Un acento PROPIO en una parte de la página (en la aplicación, la tarjeta de una categoría o de un tratamiento con su
	color): el elemento lleva style="--accent: …; --accent-ink: …" y esta clase. Las variables que salen del acento se
	calculan donde se declaran, en :root, con el de la página; aquí se vuelven a sacar del de la parte. Son LAS MISMAS
	fórmulas que en :root y en el bloque de la web: si cambias una, cambia aquí la suya. Las del registro (la sombra del
	botón principal, las casillas dibujadas, la selección) solo en la web; en la herramienta siguen siendo las suyas.
	Para la página entera no hace falta: basta con dar otro --accent y --accent-ink en :root.
	.brand-scope es lo contrario: una parte que lleva SIEMPRE el color fijo de la marca (--brand-accent), aunque la
	página tenga otro (en la aplicación, el recuadro de la cuenta, la ventana para entrar y los consentimientos del pago
	de un tratamiento con su color).
*/
.accent-scope, .brand-scope {
	--accent-hover: color-mix(in srgb, var(--accent) 84%, #000);
	--accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
	--accent-softer: color-mix(in srgb, var(--accent) 5%, #fff);
	--accent-line: color-mix(in srgb, var(--accent) 28%, #fff);
	--ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
	accent-color: var(--accent);
}
.brand-scope {
	--accent: var(--brand-accent);
	--accent-ink: var(--brand-accent-ink);
}
:where(body:not(.tool-ui)) :is(.accent-scope, .brand-scope) {
	--selection-bg: var(--accent-soft);
	--btn-primary-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
	--check-on: var(--ddr-check-w) center / 15px no-repeat, var(--accent);
	--radio-on: radial-gradient(circle, var(--accent-ink) 0 30%, transparent 34%), var(--accent);
}

/* Ocultos a la vista, no al lector de pantalla. */
.sr-only, .u-hidden-visually {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ········································ FOCO ········································ */

/*
	El foco visible: un contorno de 2 px en el acento, separado 2 px. En la web, además, el halo --ring; con :where()
	para que conserve la especificidad de un :focus-visible y las piezas con sombra propia la mantengan. Los campos lo
	sustituyen por su borde y el halo (ver «Campos»).
*/
:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--focus-radius);}
:where(body:not(.tool-ui)) :focus-visible {box-shadow: var(--ring);}
:focus:not(:focus-visible) {outline: none;}


/* ········································ BOTONES ········································ */

/*
	<a class="btn btn--primary" href="…">…</a> o <button class="btn btn--primary">. Variantes:
	--primary (la acción principal: una por pantalla), --secondary (blanco con borde), --ghost (sin fondo), --danger
	(en la web, en rojo; en la herramienta, el texto rojo sobre blanco), --light y --outline-light (sobre bandas
	oscuras o de acento) y --off (un <span> que se queda en su sitio sin llevar a ningún sitio: su title dice por qué).
	Tallas: la normal (48 px), --sm (40 px en la web; 44, y 36 desde 900, en la herramienta) y --lg (56, la web).
	--icon: cuadrado, solo el icono (con aria-label). --block: a todo el ancho; --block-mobile, solo en el móvil.
	Cada variante dice el color de su texto en --btn-fg, que es también el de la ruedita de «enviando» (.is-loading,
	la pone ui.js al enviar un formulario).
*/
.btn {
	--btn-fg: var(--ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: var(--control-h);
	padding: var(--btn-pad);
	border: var(--btn-border) solid transparent;
	border-radius: var(--btn-radius);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: inherit;
	font-size: var(--btn-fs);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: var(--btn-ls);
	text-align: center;
	text-decoration: none;
	white-space: var(--btn-ws);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none; /* Safari no conoce todavía la propiedad sin prefijo. */
	user-select: none;
	transition: background-color var(--btn-speed) var(--ease), border-color var(--btn-speed) var(--ease), color var(--btn-speed) var(--ease),
	            box-shadow var(--btn-speed) var(--ease), transform var(--btn-speed) var(--ease);
}
.btn:hover {color: var(--btn-fg);}
.btn:active {transform: var(--btn-press);}
.btn:focus-visible {border-radius: var(--btn-radius);}
:where(.tool-ui) .btn:focus-visible {outline: none; box-shadow: var(--ring);}
.btn svg {flex: none;}

.btn--primary {
	--btn-fg: var(--accent-ink);
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: var(--btn-primary-shadow);
}
.btn--primary:hover {background: var(--accent-hover); border-color: var(--accent-hover);}

.btn--secondary {
	--btn-fg: var(--ink);
	background: var(--bg);
	border-color: var(--line-strong);
	box-shadow: var(--btn-secondary-shadow);
}
.btn--secondary:hover {--btn-fg: var(--accent-hover); background: var(--btn-secondary-hover-bg); border-color: var(--accent);}

.btn--ghost {--btn-fg: var(--ink-soft); background: transparent;}
.btn--ghost:hover {--btn-fg: var(--ink); background: var(--bg-sunken);}

.btn--danger {--btn-fg: var(--btn-danger-fg); background: var(--btn-danger-bg); border-color: var(--btn-danger-line);}
.btn--danger:hover {--btn-fg: var(--btn-danger-hover-fg); background: var(--btn-danger-hover-bg); border-color: var(--btn-danger-hover-line);}

/* Sobre fondos de acento u oscuros (la banda final de la web, las secciones nocturnas). */
.btn--light {--btn-fg: var(--ink); background: #fff; border-color: #fff; box-shadow: var(--shadow-md);}
.btn--light:hover {background: var(--accent-soft); border-color: var(--accent-soft);}
.btn--outline-light {--btn-fg: #fff; border-color: color-mix(in srgb, #fff 55%, transparent);}
.btn--outline-light:hover {background: color-mix(in srgb, #fff 14%, transparent); border-color: #fff;}

/* «Empezar consulta» (y «Iniciar mi consulta»), en TODA la web y sobre cualquier fondo: SIEMPRE NEGRO, nunca del
   acento de la página, de una categoría o de un tratamiento. Va detrás de las demás variantes: si se junta con una,
   manda esta. */
.btn--start {--btn-fg: #fff; background: #000; border-color: #000; box-shadow: 0 1px 2px rgb(0 0 0 / .28), 0 6px 16px rgb(0 0 0 / .16);}
.btn--start:hover {--btn-fg: #fff; background: #262626; border-color: #262626;}

/* El color FIJO de la marca (--brand-accent): como --primary, pero sin cambiar con el color de una categoría o de un
   tratamiento. «Enviar y pagar». */
.btn--brand {
	--btn-fg: var(--brand-accent-ink);
	background: var(--brand-accent);
	border-color: var(--brand-accent);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-accent) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--brand-accent) 22%, transparent);
}
.btn--brand:hover {--btn-fg: var(--brand-accent-ink); background: color-mix(in srgb, var(--brand-accent) 84%, #000); border-color: color-mix(in srgb, var(--brand-accent) 84%, #000);}

.btn--lg {min-height: 56px; padding-inline: var(--s-6); font-size: var(--fs-md);}
/* --sm: solo para acciones secundarias dentro de tarjetas, filas o tablas. */
.btn--sm {min-height: var(--btn-sm-h); padding: var(--btn-sm-pad); font-size: var(--btn-sm-fs);}
.btn--block {display: flex; width: 100%;}
.btn--block-mobile {display: flex; width: 100%;}
.btn--icon {width: var(--control-h); padding: 0;}
.btn--icon.btn--sm {width: var(--btn-sm-h);}

/* El botón «mostrar contraseña» ([data-toggle-password] de ui.js), activado. */
.btn[aria-pressed="true"] {color: var(--accent);}

.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

/*
	--off: un botón que ahora no lleva a ningún sitio pero se queda en su SITIO para que la fila no cambie («Ver
	página» de un tratamiento inactivo). Es un <span>: no se pulsa. A diferencia de [disabled] SÍ recibe el ratón, para
	que su title diga por qué; el lector de pantalla lo oye en el texto oculto que lleva dentro.
*/
.btn--off, .btn--off:hover {
	--btn-fg: var(--ink);
	opacity: .55;
	background: var(--bg);
	border-color: var(--line-strong);
	cursor: not-allowed;
	box-shadow: none;
}
.btn--off:active {transform: none;}

/* Enviando: el texto y el icono se ocultan sin que el botón cambie de tamaño, y gira una ruedita de su color. */
.btn.is-loading {color: transparent !important; pointer-events: none; opacity: 1 !important;}
.btn.is-loading > * {visibility: hidden;}
.btn.is-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2.5px solid color-mix(in srgb, var(--btn-fg) 30%, transparent);
	border-top-color: var(--btn-fg);
	border-radius: 50%;
	animation: ddr-spin .7s linear infinite;
}
@keyframes ddr-spin {to {transform: rotate(360deg);}}

@media (min-width: 600px) {
	.btn--block-mobile {display: inline-flex; width: auto;}
}


/* ········································ ENLACES DE ACCIÓN ········································ */

/* Enlace con flecha («Ver más →»): la flecha la pinta la marca, no hace falta icono en el HTML. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	width: fit-content; /* que no se estire dentro de una rejilla o una pila */
	min-height: var(--tap);
	font-weight: 650;
	color: var(--accent);
	text-decoration: none;
}
.link-arrow::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--ddr-arrow) center / contain no-repeat;
	mask: var(--ddr-arrow) center / contain no-repeat;
	transition: transform .25s var(--ease);
}
.link-arrow:hover::after, a:hover > .link-arrow::after {transform: translateX(4px);}
.link-arrow--back {flex-direction: row-reverse;}
.link-arrow--back::after {transform: scaleX(-1);}
.link-arrow--back:hover::after {transform: scaleX(-1) translateX(4px);}

/* Enlace con aspecto de texto para acciones secundarias en una línea (sobre todo en la herramienta). */
.link-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	min-height: var(--tap-sm);
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
}
.link-btn:hover {color: var(--accent-hover); text-decoration: underline;}
.link-btn--danger, .link-btn--danger:hover {color: var(--danger);}


/* ········································ CAMPOS ········································ */

/*
	<div class="field">
	  <label class="field__label" for="x">Nombre <span class="field__req">*</span></label>
	  <input class="input" id="x" name="x">
	  <p class="field__hint">…</p>  <p class="field__error">…</p>
	</div>
	Dentro de un .field, los <input>, <select> y <textarea> salen con el aspecto de la marca aunque no lleven clase;
	fuera, con .input, .select o .textarea. Todo con :where() (especificidad 0): cualquier modificador o ajuste de una
	hoja gana sin !important. El error: .field--error o .has-error en el .field, o aria-invalid="true" en el campo.
*/
.field {display: grid; gap: var(--field-gap); min-width: 0; align-content: start;}
.field__label, .field > label:not(.check):not(.switch) {
	display: var(--field-label-display);
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-2);
	color: var(--ink);
	font-size: var(--fs-sm);
	font-weight: 650;
}
.field__req {color: var(--danger);}
:where(.tool-ui) .field__req {font-weight: 700;}
.field__optional, .field__opt {color: var(--muted); font-weight: 500;}
.field__opt {font-size: var(--fs-xs);}
.field__hint {color: var(--muted); font-size: var(--field-note-fs);}
:where(.tool-ui) .field__hint {line-height: 1.45;}
.field__error {display: flex; align-items: flex-start; gap: var(--s-1); color: var(--danger); font-size: var(--field-note-fs); font-weight: 600;}
.field__foot {display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start;}
.field__counter {margin-left: auto; flex: none; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap;}
.field__counter.is-near {color: var(--warn); font-weight: 600;}
.field__counter.is-over {color: var(--danger); font-weight: 700;}

:where(.input, .select, .textarea,
       .field input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="range"], [type="hidden"]),
       .field select, .field textarea) {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: var(--field-h);
	padding: var(--field-pad);
	border: var(--field-border-w) solid var(--field-line);
	border-radius: var(--field-radius);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--field-fs); /* 16 px en el móvil: iOS no hace zoom al enfocar */
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
:where(.input, .select, .textarea, .field input, .field select, .field textarea):hover {border-color: var(--muted);}
:where(.input, .select, .textarea, .field input, .field select, .field textarea):focus,
:where(.input, .select, .textarea, .field input, .field select, .field textarea):focus-visible {
	outline: none;
	border-color: var(--accent);
	border-radius: var(--field-radius);
	box-shadow: var(--ring);
}
:where(.input, .select, .textarea, .field input, .field select, .field textarea):disabled,
:where(.input, .textarea, .field input, .field textarea)[readonly] {
	background: var(--bg-sunken);
	color: var(--field-off-fg);
}
:where(.input, .select, .textarea, .field input, .field select, .field textarea):disabled {cursor: not-allowed; opacity: var(--field-off-opacity);}

:where(.textarea, .field textarea) {
	min-height: var(--textarea-h);
	padding: var(--textarea-pad);
	line-height: var(--textarea-lh);
	resize: vertical;
}
.textarea--sm {min-height: 76px;}
.textarea--lg {min-height: 220px;}

:where(.select, .field select) {
	padding-right: var(--select-pad-end);
	background-image: var(--select-arrow);
	background-repeat: no-repeat;
	background-position: right var(--select-arrow-x) center;
	background-size: 18px;
	cursor: pointer;
	text-overflow: ellipsis;
}
/* Los puntos suspensivos solo existen con el desbordamiento recortado; sin él, Safari deja salir de
   la caja el texto de una opción larga y la página entera gana scroll horizontal en el móvil. La
   lista de selección múltiple no: se desplaza por dentro. */
:where(.select:not([multiple], [size]), .field select:not([multiple], [size])) {overflow: hidden;}
:where(.select, .field select)[multiple] {background-image: none; padding: var(--s-2); min-height: 120px;}
:where(input[type="date"].input, .field input[type="date"]) {min-width: 0;}

.field--error :where(.input, .select, .textarea, input, select, textarea),
.field.has-error :where(.input, .select, .textarea, input, select, textarea),
:where(.input, .select, .textarea)[aria-invalid="true"],
.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
	border-color: var(--danger);
	border-width: var(--field-error-w);
	background: color-mix(in srgb, var(--danger-soft) 45%, var(--bg));
}

/* Código o texto técnico (robots.txt, plantillas HTML, JSON). */
.input--mono {font-family: var(--font-mono); tab-size: 2; line-height: 1.55;}
textarea.input--mono {white-space: pre; overflow-x: auto; min-height: 220px;}

/* Campo con prefijo, sufijo o botón pegado: <div class="input-group"><span class="input-group__addon">…</span><input class="input"></div>. */
.input-group {display: flex; align-items: stretch; min-width: 0;}
.input-group > :where(.input, .select, input, select) {flex: 1; min-width: 0;}
.input-group__addon {
	display: inline-flex;
	align-items: center;
	flex: none;
	max-width: 55%;
	padding: 0 var(--s-3);
	border: var(--field-border-w) solid var(--field-line);
	background: var(--bg-soft);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.input-group > :not(:first-child) {border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px;}
.input-group > :not(:last-child) {border-top-right-radius: 0; border-bottom-right-radius: 0;}
.input-group > :first-child {border-top-left-radius: var(--field-radius); border-bottom-left-radius: var(--field-radius);}
.input-group > :last-child {border-top-right-radius: var(--field-radius); border-bottom-right-radius: var(--field-radius);}
.input-group > :focus {position: relative; z-index: 1;}
.input-group > .btn {flex: none; border-color: var(--field-line);}

/* Campo con su unidad a la derecha (kg, cm…): <div class="input-unit"><input class="input"><span class="input-unit__suffix">kg</span></div>. */
.input-unit {display: flex;}
.input-unit .input {border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0;}
.input-unit__suffix {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--s-4);
	border: var(--field-border-w) solid var(--field-line);
	border-left: 0;
	border-radius: 0 var(--field-radius) var(--field-radius) 0;
	background: var(--bg-soft);
	color: var(--ink-soft);
	font-weight: 600;
	white-space: nowrap;
}

/*
	Contraseña con el botón mostrar / ocultar (ui.js: [data-toggle-password]). El botón solo aparece con JavaScript
	(html.js) y lleva DOS iconos, eye y eye-off: se ve el que toca según aria-pressed.
*/
.password-field {position: relative;}
.password-field .input {padding-right: 56px;}
.password-field__toggle {
	position: absolute;
	right: 2px;
	top: 2px;
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	border: 0;
	border-radius: var(--field-radius);
	background: none;
	color: var(--muted);
}
.js .password-field__toggle {display: inline-flex;}
.password-field__toggle:hover {color: var(--ink);}
.password-field__toggle[aria-pressed="false"] svg:last-child,
.password-field__toggle[aria-pressed="true"] svg:first-child {display: none;}

/* Subir un archivo: el control del navegador, con el aspecto de la marca (funciona sin JavaScript y es accesible). */
.file-input, .field input[type="file"] {
	display: block;
	width: 100%;
	min-height: var(--control-h);
	padding: 5px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--field-radius);
	background: var(--bg-soft);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
	cursor: pointer;
}
.file-input::file-selector-button, .field input[type="file"]::file-selector-button {
	min-height: 36px;
	margin-right: var(--s-3);
	padding: 0 var(--s-3);
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}
.file-input:hover, .field input[type="file"]:hover {border-color: var(--accent);}


/* ········································ CASILLAS Y RADIOS ········································ */

/*
	<label class="check"><input type="checkbox" name="x"><span>Texto <small>explicación</small></span></label>. El input
	es el de verdad: se elige con el teclado y el lector de pantalla lo anuncia. En la web la marca dibuja la casilla y
	el radio (--check-look: none); en la herramienta son los del navegador en el acento (--check-look: auto). Con los
	colores forzados del sistema (alto contraste), siempre los del navegador.
*/
.check {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	min-height: var(--check-h);
	padding: var(--check-pad);
	font-size: var(--check-fs);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
:where(.tool-ui) .check {line-height: 1.45;}
/* El texto se lleva el hueco sobrante y puede encoger: si no, una etiqueta larga se sale de la tarjeta en el móvil. */
.check > span {flex: 1; min-width: 0;}
.check small {display: block; color: var(--muted);}
.check--sm {font-size: var(--fs-sm);}
.check-group {display: grid;}

.check input, .option-card input {
	flex: none;
	width: var(--check-box);
	height: var(--check-box);
	margin: 0;
	border: 1.5px solid var(--field-border);
	border-radius: 7px;
	background: var(--check-off);
	-webkit-appearance: var(--check-look);
	appearance: var(--check-look);
	cursor: pointer;
	transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.check input[type="radio"], .option-card input[type="radio"] {border-radius: 50%;}
.check input:hover, .option-card input:hover {border-color: var(--accent);}
.check input:checked, .option-card input:checked {border-color: var(--accent); background: var(--check-on);}
.check input[type="radio"]:checked, .option-card input[type="radio"]:checked {background: var(--radio-on);}
.check input:focus-visible, .option-card input:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--check-ring);}
.check input[disabled] {opacity: var(--check-off-opacity); cursor: not-allowed;}

/*
	Grupo de opciones EXCLUYENTES encuadrado (sobre todo en la herramienta): para cuando va suelto en una tarjeta y si no
	se leería como varias frases sin relación. La elegida se tiñe y el foco va en la FILA entera.
*/
.check-group--boxed {border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg);}
.check-group--boxed > .check {align-items: center; min-height: var(--control-h); padding: var(--s-2) var(--s-3);}
.check-group--boxed > .check + .check {border-top: 1px solid var(--line-soft);}
.check-group--boxed > .check:hover {background: var(--bg-soft);}
/* El radio interior de la caja es el suyo menos el borde: con --r-sm a secas, el fondo de la primera y la última fila asoma 1 px. */
.check-group--boxed > .check:first-child {border-radius: calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px) 0 0;}
.check-group--boxed > .check:last-child {border-radius: 0 0 calc(var(--r-sm) - 1px) calc(var(--r-sm) - 1px);}
.check-group--boxed > .check:only-child {border-radius: calc(var(--r-sm) - 1px);}
.check-group--boxed > .check:has(input:checked) {background: var(--accent-soft); font-weight: 650;}
.check-group--boxed > .check:has(input:focus-visible) {box-shadow: inset var(--ring);}


/* ········································ TARJETAS DE OPCIÓN ········································ */

/*
	Un radio o una casilla como tarjeta táctil: <div class="option-list"><label class="option-card"><input type="radio"
	name="x"><span class="option-card__body"><span class="option-card__title">…</span>…</span></label></div>.
*/
.option-list {display: grid; gap: var(--s-3);}
.option-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 64px;
	padding: var(--s-3) var(--s-4);
	border: 1.5px solid color-mix(in srgb, var(--muted) 38%, var(--line));
	border-radius: var(--r-md);
	background: var(--bg);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}
.option-card:active {transform: scale(.995);}
.option-card__body {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.option-card__title {font-weight: 650; line-height: 1.35;}
.option-card > svg, .option-card > .icon-tile {flex: none; color: var(--accent);}
/* La marcada: con :has() cambia la tarjeta entera; sin él, el control ya se ve marcado y se tiñe el título. */
.option-card:has(input:checked) {border-color: var(--accent); background: var(--accent-softer); box-shadow: inset 0 0 0 1px var(--accent);}
.option-card:has(input:focus-visible) {box-shadow: var(--ring);}
.option-card:has(input:checked):has(input:focus-visible) {box-shadow: inset 0 0 0 1px var(--accent), var(--ring);}
.option-card:has(input[disabled]) {opacity: .55; cursor: not-allowed;}
.option-card input:checked ~ .option-card__body .option-card__title {color: var(--accent-hover);}

@media (hover: hover) {
	.option-card:hover {border-color: var(--accent);}
}
@media (min-width: 600px) {
	.option-list--2col {grid-template-columns: repeat(2, minmax(0, 1fr));}
}


/* ········································ INTERRUPTOR ········································ */

/*
	<label class="switch"><span class="switch__text">Texto <small>explicación</small></span><input type="checkbox"
	name="x"><span class="switch__track" aria-hidden="true"></span></label>. El input, oculto solo a la vista.
	--boxed: con el aspecto de un campo, para ir junto a otros campos en una rejilla.
*/
.switch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: var(--control-h);
	padding: var(--s-2) 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.switch__text {display: grid; gap: 2px; min-width: 0; font-size: var(--fs-sm); font-weight: 650; line-height: 1.35;}
.switch__text small {color: var(--muted); font-weight: 400; line-height: 1.45;}
.switch input {position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;}
.switch__track {
	position: relative;
	flex: none;
	width: 46px;
	height: 28px;
	border-radius: var(--r-pill);
	background: var(--line-strong);
	transition: background .2s var(--ease);
}
.switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bg);
	box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease);
}
.switch input:checked + .switch__track {background: var(--accent);}
.switch input:checked + .switch__track::after {transform: translateX(18px);}
.switch input:focus-visible + .switch__track {box-shadow: var(--ring);}
.switch input:disabled + .switch__track {opacity: .5;}
.switch-list > .switch + .switch {border-top: 1px solid var(--line-soft);}
.switch--boxed {
	min-height: var(--control-h);
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--bg);
}


/* ········································ INSIGNIAS ········································ */

/*
	<span class="badge badge--ok">Activo</span>. Sin variante, neutra. Familias: --accent (la marca), --ok, --warn,
	--danger, --info, --muted (apagado), --flag (marcado en rojo, con borde), --admin (en el acento, con borde) y
	--night (sobre una banda oscura o una foto). --count: una cifra en una pastilla (con .is-accent, en el acento).
*/
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border: var(--badge-border);
	border-radius: var(--badge-radius);
	background: var(--badge-bg);
	color: var(--ink-soft);
	font-size: var(--badge-fs);
	font-weight: 650;
	line-height: var(--badge-lh);
	white-space: nowrap;
	vertical-align: var(--badge-align);
}
:where(.tool-ui) .badge svg {width: 13px; height: 13px;}
.badge--accent {border-color: transparent; background: var(--accent-soft); color: var(--accent-hover);}
.badge--night {border-color: transparent; background: color-mix(in srgb, #fff 14%, transparent); color: #fff;}
.badge--ok {border-color: transparent; background: var(--ok-soft); color: var(--ok);}
.badge--warn {border-color: transparent; background: var(--warn-soft); color: var(--warn);}
.badge--danger {border-color: transparent; background: var(--danger-soft); color: var(--danger);}
.badge--info {border-color: transparent; background: var(--info-soft); color: var(--info);}
.badge--muted {border-color: transparent; background: var(--bg-sunken); color: var(--muted);}
.badge--flag {border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger);}
.badge--admin {border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-hover);}
.badge--count {
	min-width: 22px;
	justify-content: center;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--bg-sunken);
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}
.badge--count.is-accent {background: var(--accent); color: var(--accent-ink);}


/* ········································ PÍLDORAS ········································ */

/* Etiqueta en píldora, también como enlace (un índice de temas, un filtro): <a class="pill" href="…">…</a>. */
.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-1) var(--s-3);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}
a.pill:hover {border-color: var(--accent); color: var(--accent-hover);}
.pill svg {color: var(--accent);}
.pill--accent {background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover);}


/* ········································ CHIPS DE ESTADO ········································ */

/*
	El estado de una consulta, con su punto: class="status status--<estado>", con EXACTAMENTE las claves de
	consultations.status. Los previos a la bolsa (awaiting_payment, cancelled) llevan el punto HUECO.
*/
.status {
	display: inline-flex;
	align-items: center;
	gap: var(--status-gap);
	padding: var(--status-pad);
	border-radius: var(--r-pill);
	background: var(--bg-sunken);
	color: var(--ink-soft);
	font-size: var(--fs-xs);
	font-weight: var(--status-weight);
	line-height: var(--status-lh);
	white-space: nowrap;
}
.status::before {content: ""; flex: none; width: var(--status-dot); height: var(--status-dot); border-radius: 50%; background: currentColor;}
.status--pending {background: var(--warn-soft); color: var(--warn);}
.status--in_review {background: var(--info-soft); color: var(--info);}
.status--answered {background: var(--ok-soft); color: var(--ok);}
.status--in_treatment {background: var(--treat-soft); color: var(--treat);}
.status--closed {background: var(--bg-sunken); color: var(--ink-soft);}
.status--rejected {background: var(--danger-soft); color: var(--danger);}
.status--awaiting_payment {background: var(--warn-soft); color: var(--warn);}
.status--cancelled {background: var(--bg-sunken); color: var(--ink-soft);}
.status--awaiting_payment::before, .status--cancelled::before {background: transparent; box-shadow: inset 0 0 0 2px currentColor;}

/*
	El chip que EXPLICA su estado (en la aplicación, partials/status-chip y ui.js): al pasar el ratón, con el foco o al
	tocarlo, una burbuja (.status-pop) dice qué significa.
	- Suelto es un <button>: fuera lo que pone el navegador, con :where() para que .status siga mandando.
	- Dentro de un enlace es un <span data-status-link>, sin foco propio: el foco y la descripción son del enlace. Por
	  eso solo el botón agranda su zona táctil hasta los 48 px (su ::after; el ::before ya es el punto).
	- La explicación va dentro, oculta (.status__help): la lee el lector de pantalla y ui.js la copia en la burbuja,
	  que es UNA para toda la página y cuelga del <body>.
*/
:where(button.status) {
	border: 0;
	margin: 0;
	font: inherit;
	line-height: inherit;
	cursor: help;
	-webkit-appearance: none;
	appearance: none;
}
[data-status-tip] {position: relative; cursor: help;}
[data-status-tip]:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-pill);}
button[data-status-tip]::after {content: ""; position: absolute; inset: -12px -6px;}
.status__help[hidden] {display: none;}
/* La burbuja: fixed (no la recorta ninguna tabla ni tarjeta con scroll); se puede pasar el ratón por encima. */
.status-pop {
	position: fixed;
	z-index: 150;
	max-width: min(20rem, calc(100vw - 2 * var(--s-4)));
	padding: var(--s-2) var(--s-3);
	border: 1px solid transparent; /* visible con los colores forzados */
	border-radius: var(--r-sm);
	background: var(--night);
	color: var(--night-ink);
	font-size: var(--fs-xs);
	line-height: 1.45;
	white-space: normal;
	box-shadow: var(--shadow-md);
	pointer-events: auto;
	transition: opacity .12s var(--ease);
}
.status-pop[hidden] {display: none;}


/* ········································ AVISOS ········································ */

/*
	<div class="alert alert--warn" role="status"><svg>…</svg><div class="alert__body"><strong class="alert__title">…
	</strong><p>…</p><div class="alert__actions">…</div></div><button class="alert__close">×</button></div>.
	Variantes: --ok, --info, --warn (cuidado) y --err; sin variante, una nota neutra. El botón de cerrar solo sale con
	JavaScript (lo atiende ui.js) y mide 44 px sin engordar el aviso.
*/
.alert {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--alert-pad);
	border: 1px solid var(--line);
	border-left-width: 4px;
	border-radius: var(--alert-radius);
	background: var(--alert-bg);
	color: var(--ink);
	font-size: var(--fs-sm);
}
:where(.tool-ui) .alert {line-height: 1.5;}
.alert > svg {margin-top: 1px; color: var(--alert-ico);}
.alert__body {flex: 1; min-width: 0;}
.alert__body > * + * {margin-top: var(--alert-stack);}
.alert__title {display: block; margin-bottom: var(--alert-title-gap); font-size: var(--alert-title-fs); font-weight: 700;}
.alert__actions {display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2);}
.alert__close {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px -12px -10px 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: none;
	color: inherit;
	font-size: var(--fs-lg);
	line-height: 1;
	opacity: .7;
}
.js .alert__close {display: inline-flex;}
.alert__close:hover {opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent);}
.alert--ok {border-color: var(--ok-line); border-left-color: var(--ok); background: var(--ok-soft);}
.alert--ok > svg {color: var(--ok);}
.alert--err {border-color: var(--danger-line); border-left-color: var(--danger); background: var(--danger-soft);}
.alert--err > svg {color: var(--danger);}
.alert--warn {border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-soft);}
.alert--warn > svg {color: var(--warn);}
.alert--info {border-color: var(--info-line); border-left-color: var(--info); background: var(--info-soft);}
.alert--info > svg {color: var(--info);}


/* ········································ ACCESIBILIDAD ········································ */

/* Colores forzados del sistema (alto contraste): un borde para lo que solo se distingue por su fondo, y los controles del navegador. */
@media (forced-colors: active) {
	.btn, .option-card, .status, .badge, .pill {border: 1px solid currentColor;}
	.check input, .option-card input {-webkit-appearance: auto; appearance: auto;}
}

/* Menos movimiento: las animaciones y transiciones, casi al instante. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.status-pop {display: none;}
}