/* #################################################################  BRANDING TODOPINGA  ################################################################# */

/*
	Se pega en cualquier web y lo que hay en ella coge los estilos de la marca sin poner clases:
	títulos, textos, negritas, enlaces dentro de párrafos, campos de formulario...
	Las clases solo hacen falta para lo que el HTML no dice por sí solo: .btn, .note, .badge, .ico, .logo...

	Colores: por defecto, para fondo claro. En una zona oscura, .dark-section (o .surface-dark-1 / .surface-dark-2)
	cambia todo lo que tiene dentro a la versión oscura; .light-section vuelve a la clara.

	No hay estructura (márgenes, anchos, rejillas...): solo tipografía, colores y componentes.
	La tipografía va en la carpeta CircularStd/, al lado de la carpeta css/.
*/

* {
	margin: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	padding-inline-end: 0;
	box-sizing: border-box;
}

html {overflow-x: hidden;}
html, body {
	font-family: var(--font-p-family);
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%; /* desactiva el escalado automático */
	-webkit-text-size-adjust: 100%; /* Desactiva el escalado automático */
}
ul {list-style: none;}
.hidden {display: none !important;}


/* Circular Std: una sola familia con todos sus pesos, así font-weight: 700 usa la Bold de verdad (no una negrita imitada). */

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-Book.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-Book.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-BookItalic.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-BookItalic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-Medium.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-MediumItalic.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-MediumItalic.ttf") format("truetype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-Bold.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-BoldItalic.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-BoldItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-Black.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Circular Std";
	src: url("../CircularStd/CircularStd-BlackItalic.woff2") format("woff2"),
	     url("../CircularStd/CircularStd-BlackItalic.ttf") format("truetype");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/* Fondos. */
:root {
	--surface-light-color-1: #FFFFFF;
	--surface-light-color-2: #F6F5F3;
	--surface-dark-color-1: #0E0E0E;
	--surface-dark-color-2: #1A1A1A;
}

/* Brand. */
:root {
	--brand-color: #FF7300;
	--brand-color-low-contrast: #FF9D4D;
	--brand-color-soft: rgba(255, 115, 0, .10); /* Fondo de las badges. */
	--brand-color-underline: rgba(255, 115, 0, .35); /* Raya bajo los enlaces. */
	--brand-text-color-surface-light: var(--brand-color); /* Texto naranja: el corporativo, igual sobre claro que sobre oscuro. */
	--brand-text-color-surface-dark: var(--brand-color);
	--brand-text-color-to-surface-brand-color: #111111; /* Sobre el naranja, texto negro: en blanco no se lee (2.7:1). */
}

/* Tipografias. */
:root {
	--font-family: "Circular Std", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-h1-family: var(--font-family);
	--font-h1-weight: 700;
	--font-h1-size-1: 2rem;
	--font-h1-size-2: 3.4rem;
	--font-h1-size: var(--font-h1-size-1);
	--font-h1-line-height: 1.1;
	--font-h1-letter-spacing: -0.02em;
	--font-h1-color-surface-light: #111111;
	--font-h1-color-surface-dark: #F2F2F2;
	--font-h2-family: var(--font-family);
	--font-h2-weight: 700;
	--font-h2-size-1: 1.6rem;
	--font-h2-size-2: 2.3rem;
	--font-h2-size: var(--font-h2-size-1);
	--font-h2-line-height: 1.15;
	--font-h2-letter-spacing: -0.02em;
	--font-h2-color-surface-light: #111111;
	--font-h2-color-surface-dark: #F2F2F2;
	--font-h3-family: var(--font-family);
	--font-h3-weight: 500;
	--font-h3-size-1: 1.25rem;
	--font-h3-size-2: 1.6rem;
	--font-h3-size: var(--font-h3-size-1);
	--font-h3-line-height: 1.25;
	--font-h3-letter-spacing: -0.01em;
	--font-h3-color-surface-light: var(--brand-text-color-surface-light);
	--font-h3-color-surface-dark: var(--brand-text-color-surface-dark);
	--font-h4-family: var(--font-family);
	--font-h4-weight: 700;
	--font-h4-size-1: 1rem;
	--font-h4-size-2: 1.2rem;
	--font-h4-size: var(--font-h4-size-1);
	--font-h4-line-height: 1.3;
	--font-h4-letter-spacing: 0;
	--font-h4-color-surface-light: #111111;
	--font-h4-color-surface-dark: #F2F2F2;
	--font-p-family: var(--font-family);
	--font-p-weight: 400;
	--font-p-bold-weight: 700;
	--font-link-weight: 500;
	--font-btn-weight: 700;
	--font-text-size-1: 1rem;
	--font-text-size-2: 1.0625rem;
	--font-text-size: var(--font-text-size-1);
	--font-text-line-height: 1.6;
	--font-text-color-surface-light: #5C5C5C;
	--font-textbold-color-surface-light: #111111;
	--font-text-color-surface-dark: #ABABAB;
	--font-textbold-color-surface-dark: #F2F2F2;
	--font-note-size-1: 0.8125rem;
	--font-note-size-2: 0.875rem;
	--font-note-size: var(--font-note-size-1);
	--font-note-line-height: 1.5;
	--font-note-color-surface-light: #6E6E6E;
	--font-notebold-color-surface-light: #5C5C5C;
	--font-note-color-surface-dark: #8A8A8A;
	--font-notebold-color-surface-dark: #ABABAB;
	--font-label-letter-spacing: 0.06em; /* Rótulos en mayúsculas (badges). */
	--font-ico-size-1: 16px;
	--font-ico-size-2: 20px;
	--font-ico-size: var(--font-ico-size-1);
	--font-ico-color-surface-light: #111111;
	--font-ico-color-surface-dark: #F2F2F2;
}

/* Forms y buttons. */
:root {
	--form-field-border-radius: 12px;
	--form-control-border-radius: 5px; /* Casilla del checkbox. Si se cambia, el svg del checkbox se descuadra. */
	--btn-border-radius: 50px; /* Botones en píldora, como en la web. */
	--form-field-height-1: 48px;
	--form-field-height-2: 52px;
	--form-field-height: var(--form-field-height-1);
	--form-field-height-sm-1: 25px;
	--form-field-height-sm-2: 30px;
	--form-field-height-sm: var(--form-field-height-sm-1);
	--form-surface-color-surface-light: #FFFFFF;
	--form-surface-color-surface-dark: #1A1A1A;
	--form-field-padding: 16px;
	--form-field-padding-sm: 10px;
	--btn-padding: 22px;
	--btn-padding-sm: 12px;
	--form-text-color-surface-light: #111111;
	--form-text-color-surface-dark: #F2F2F2;
	--form-ico-size-1: 12px;
	--form-ico-size-2: 15px;
	--form-ico-size: var(--form-ico-size-1);
	--form-ico-color-surface-light: #8A8A8A;
	--form-ico-color-surface-dark: #8A8A8A;
	--form-control-height-1: 17px;
	--form-control-height-2: 21px;
	--form-control-height: var(--form-control-height-1);
	--form-border-size: 1px;
	--form-border-color-surface-light: #D9D5CF;
	--form-border-color-surface-dark: #3A3A3A;
	--form-shadow-size: 10px;
	--form-shadow-opacity: 0.05;
	--form-border-size-hover: 2px;
	--form-border-color-hover: var(--brand-color-low-contrast);
	--form-border-size-focus: 2px;
	--form-border-color-focus: var(--brand-color);
	--form-shadow-size-focus: 8px;
	--form-shadow-color-focus: rgba(255, 115, 0, .45);
	--form-required-surface-light: var(--brand-text-color-surface-light);
	--form-required-surface-dark: var(--brand-text-color-surface-dark);
	--btn-primary-text-color: var(--brand-text-color-to-surface-brand-color);
	--btn-primary-surface-color: var(--brand-color);
	--btn-primary-surface-color-hover: var(--brand-color-low-contrast);
	--btn-secondary-text-color-surface-light: #FFFFFF;
	--btn-secondary-surface-color-surface-light: #111111;
	--btn-secondary-surface-color-hover-surface-light: #3D3D3D;
	--btn-secondary-text-color-surface-dark: #111111;
	--btn-secondary-surface-color-surface-dark: #F2F2F2;
	--btn-secondary-surface-color-hover-surface-dark: #D1D1D1;
	--btn-control-surface-color-hover-surface-light: #F6F5F3;
	--btn-control-surface-color-hover-surface-dark: #0E0E0E;
	--badge-on-text-color: #166534;
	--badge-on-surface-color: #DCFCE7;
	--badge-on-surface-color-hover: #86EFAC;
	--badge-on-border-color: #86EFAC;
	--badge-off-text-color: #8F1D14;
	--badge-off-surface-color: #FDECEA;
	--badge-off-surface-color-hover: #F7C6C0;
	--badge-off-border-color: #F7C6C0;
}

/* Animaciones. */
:root {
	--transition-resize: 0.5s;
	--transition-interactive: 0.3s;
}

@media (min-width: 600px) {
	:root {
		--font-h1-size: var(--font-h1-size-2);
		--font-h2-size: var(--font-h2-size-2);
		--font-h3-size: var(--font-h3-size-2);
		--font-h4-size: var(--font-h4-size-2);
		--font-text-size: var(--font-text-size-2);
		--font-note-size: var(--font-note-size-2);
		--font-ico-size: var(--font-ico-size-2);
		--form-field-height: var(--form-field-height-2);
		--form-field-height-sm: var(--form-field-height-sm-2);
		--form-ico-size: var(--form-ico-size-2);
		--form-control-height: var(--form-control-height-2);
	}
}


/* ········································ COLORES SEGÚN EL FONDO ········································ */

/* Sobre claro (lo normal: no hace falta poner ninguna clase). */
:root, .light-section, .surface-light-1, .surface-light-2 {
	--font-h1-color: var(--font-h1-color-surface-light);
	--font-h2-color: var(--font-h2-color-surface-light);
	--font-h3-color: var(--font-h3-color-surface-light);
	--font-h4-color: var(--font-h4-color-surface-light);
	--font-text-color: var(--font-text-color-surface-light);
	--font-textbold-color: var(--font-textbold-color-surface-light);
	--font-note-color: var(--font-note-color-surface-light);
	--font-notebold-color: var(--font-notebold-color-surface-light);
	--font-ico-color: var(--font-ico-color-surface-light);
	--brand-text-color: var(--brand-text-color-surface-light);
	--form-surface-color: var(--form-surface-color-surface-light);
	--form-text-color: var(--form-text-color-surface-light);
	--form-ico-color: var(--form-ico-color-surface-light);
	--form-border-color: var(--form-border-color-surface-light);
	--form-shadow-rgb: 0 0 0;
	--form-required-color: var(--form-required-surface-light);
	--btn-secondary-text-color: var(--btn-secondary-text-color-surface-light);
	--btn-secondary-surface-color: var(--btn-secondary-surface-color-surface-light);
	--btn-secondary-surface-color-hover: var(--btn-secondary-surface-color-hover-surface-light);
	--btn-control-surface-color-hover: var(--btn-control-surface-color-hover-surface-light);
}

/* Sobre oscuro. */
.dark-section, .surface-dark-1, .surface-dark-2 {
	--font-h1-color: var(--font-h1-color-surface-dark);
	--font-h2-color: var(--font-h2-color-surface-dark);
	--font-h3-color: var(--font-h3-color-surface-dark);
	--font-h4-color: var(--font-h4-color-surface-dark);
	--font-text-color: var(--font-text-color-surface-dark);
	--font-textbold-color: var(--font-textbold-color-surface-dark);
	--font-note-color: var(--font-note-color-surface-dark);
	--font-notebold-color: var(--font-notebold-color-surface-dark);
	--font-ico-color: var(--font-ico-color-surface-dark);
	--brand-text-color: var(--brand-text-color-surface-dark);
	--form-surface-color: var(--form-surface-color-surface-dark);
	--form-text-color: var(--form-text-color-surface-dark);
	--form-ico-color: var(--form-ico-color-surface-dark);
	--form-border-color: var(--form-border-color-surface-dark);
	--form-shadow-rgb: 255 255 255;
	--form-required-color: var(--form-required-surface-dark);
	--btn-secondary-text-color: var(--btn-secondary-text-color-surface-dark);
	--btn-secondary-surface-color: var(--btn-secondary-surface-color-surface-dark);
	--btn-secondary-surface-color-hover: var(--btn-secondary-surface-color-hover-surface-dark);
	--btn-control-surface-color-hover: var(--btn-control-surface-color-hover-surface-dark);
	color-scheme: dark; /* Calendario, desplegables y barras de scroll del navegador, también en oscuro. */
}


/* ········································ BGS ········································ */

.surface-light-1 {background-color: var(--surface-light-color-1);}
.surface-light-2 {background-color: var(--surface-light-color-2);}
.surface-dark-1 {background-color: var(--surface-dark-color-1);}
.surface-dark-2 {background-color: var(--surface-dark-color-2);}


/* ········································ TEXTS, LOGOS E ICONOS ········································ */

/* Generales: el texto se hereda, así párrafos, listas, tablas, spans... cogen el estilo sin tocarlos. */
:where(body, .light-section, .dark-section, .surface-light-1, .surface-light-2, .surface-dark-1, .surface-dark-2) {color: var(--font-text-color);}
:where(body) {font-weight: var(--font-p-weight); font-size: var(--font-text-size); line-height: var(--font-text-line-height); transition: font-size var(--transition-resize) ease;}
:where(h1) {font-family: var(--font-h1-family); font-weight: var(--font-h1-weight); font-size: var(--font-h1-size); line-height: var(--font-h1-line-height); letter-spacing: var(--font-h1-letter-spacing); color: var(--font-h1-color); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(h2) {font-family: var(--font-h2-family); font-weight: var(--font-h2-weight); font-size: var(--font-h2-size); line-height: var(--font-h2-line-height); letter-spacing: var(--font-h2-letter-spacing); color: var(--font-h2-color); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(h3) {font-family: var(--font-h3-family); font-weight: var(--font-h3-weight); font-size: var(--font-h3-size); line-height: var(--font-h3-line-height); letter-spacing: var(--font-h3-letter-spacing); color: var(--font-h3-color); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(h4) {font-family: var(--font-h4-family); font-weight: var(--font-h4-weight); font-size: var(--font-h4-size); line-height: var(--font-h4-line-height); letter-spacing: var(--font-h4-letter-spacing); color: var(--font-h4-color); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(a, abbr) {color: inherit; text-decoration: none;}
:where(p a:not(.btn)) {color: var(--brand-text-color); font-weight: var(--font-link-weight); border-bottom: 2px solid var(--brand-color-underline); transition: border-color var(--transition-interactive) ease, color var(--transition-interactive) ease;}
:where(p a:not(.btn):hover, p a:not(.btn):focus-visible) {border-bottom-color: var(--brand-color);}
:where(.note, .note-brand) {font-size: var(--font-note-size); line-height: var(--font-note-line-height); transition: font-size var(--transition-resize) ease, color var(--transition-interactive) ease;}
:where(b, strong) {font-weight: var(--font-p-bold-weight);}
:where(i, em) {font-style: italic;} /* Negrita + cursiva sale sola: Circular Std tiene BoldItalic. */
:where(.required) {font-weight: var(--font-p-bold-weight); font-size: var(--font-text-size);}
:where(.hover-underline:hover) {text-decoration: underline;}
:where(svg) {overflow: visible; transition: width var(--transition-resize) ease, height var(--transition-resize) ease, min-width var(--transition-resize) ease, min-height var(--transition-resize) ease,fill var(--transition-interactive) ease;}
:where(.ico) {width: var(--font-ico-size); min-width: var(--font-ico-size); height: var(--font-ico-size); min-height: var(--font-ico-size);}


/* Colores (cambian solos con el fondo: ver «Colores según el fondo») */
:where(p b, p strong, li b, li strong) {color: var(--font-textbold-color);}
:where(.note) {color: var(--font-note-color);}
:where(.note b, .note strong) {color: var(--font-notebold-color);}
:where(.required) {color: var(--form-required-color);}
:where(.logo, .ico) {fill: var(--font-ico-color);} /* En el logo, las partes negras; las naranjas llevan su color. */
:where(h1 .logo, h1 .ico) {fill: var(--font-h1-color);}
:where(svg.ico-text) {fill: var(--font-text-color);}
:where(.hoverable:hover) {color: var(--font-textbold-color);}
:where(.hoverable:hover svg) {fill: var(--font-textbold-color);}


/* Branding */
:where(.note-brand) {color: var(--btn-primary-surface-color-hover);} /* El naranja claro del hover del botón; la negrita, en el corporativo. */
:where(.note-brand b, .note-brand strong) {color: var(--brand-text-color);}
:where(.punto-brand) {fill: var(--brand-color); width: 6px; min-width: 6px; height: 6px; min-height: 6px; transition: width var(--transition-resize) ease, height var(--transition-resize) ease;}
:where(.check-brand) {fill: var(--brand-color); width: 12px; min-width: 12px; height: 12px; min-height: 12px; transition: width var(--transition-resize) ease, height var(--transition-resize) ease;}


/* ········································ A HREF | FORM BUTTON TYPE: SUMBIT ········································ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	height: var(--form-field-height);
	min-width: 140px;
	padding: 0px var(--btn-padding);
	border-radius: var(--btn-border-radius);
	font-family: var(--font-p-family);
	font-weight: var(--font-btn-weight);
	font-size: var(--font-text-size);
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / min(1, calc(4 * var(--form-shadow-opacity))));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		background-color var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}
.btn:focus-visible {outline: 3px solid var(--brand-color); outline-offset: 2px;}

.btn.btn-secondary {color: var(--btn-secondary-text-color); background-color: var(--btn-secondary-surface-color);}
.btn.btn-secondary:not(.unselectable):hover {background-color: var(--btn-secondary-surface-color-hover);}

.btn.btn-primary {color: var(--btn-primary-text-color); background-color: var(--btn-primary-surface-color);}
.btn.btn-primary:not(.unselectable):hover {background-color: var(--btn-primary-surface-color-hover);}

.btn.control {color: var(--font-textbold-color); background-color: var(--form-surface-color); box-shadow: inset 0px 0px 0px var(--form-border-size) var(--form-border-color), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));}
.btn.control:not(.unselectable):hover {background-color: var(--btn-control-surface-color-hover);}

.btn.unselectable {cursor: not-allowed; opacity: 0.5;}


/* ········································ FORM SELECT ········································ */

select {
	min-width: 150px;
	height: var(--form-field-height);
	padding: 0px calc(var(--form-field-padding) * 2 + var(--form-ico-size)) 0px var(--form-field-padding);
	border-radius: var(--form-field-border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	color: var(--form-text-color);
	background-color: var(--form-surface-color);
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%238A8A8A'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); /* Cambiar el color manualmente (= --form-ico-color). */
	box-shadow: inset 0px 0px 0px var(--select-border-size, var(--form-border-size)) var(--select-border-color, var(--form-border-color)), 0px 0px var(--select-shadow-size, 0px) 0px var(--select-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease,
		background-image var(--transition-interactive) ease;
	background-repeat: no-repeat;
	background-position: right var(--form-field-padding) top 0px;
	background-size: var(--form-ico-size) var(--form-field-height);
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
select option {color: var(--form-text-color);}

select:hover {
	--select-border-size: var(--form-border-size-hover);
	--select-border-color: var(--form-border-color-hover);
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%23FF9D4D'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); /* Cambiar el color manualmente (= --form-border-color-hover). */
}

select:focus {
	--select-border-size: var(--form-border-size-focus);
	--select-border-color: var(--form-border-color-focus);
	--select-shadow-size: var(--form-shadow-size-focus);
	--select-shadow-color: var(--form-shadow-color-focus);
	background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16.16' fill='%23FF7300'%3E %3Cpath d='M15,16.16c-.38,0-.76-.14-1.05-.43L.45,2.58C-.14,2-.15,1.05.43.45c.58-.59,1.53-.61,2.12-.03l12.45,12.14L27.45.43c.59-.58,1.54-.57,2.12.03.58.59.57,1.54-.03,2.12l-13.5,13.16c-.29.28-.67.43-1.05.43Z'/%3E %3C/svg%3E"); /* Cambiar el color manualmente (= --form-border-color-focus). */
}


/* ········································ FORM TEXTAREA ········································ */

/* Modifica el estilo del texto del marcador de posición (el texto que aparece dentro de un campo antes de escribir. */
/* textarea::placeholder {color: ;} */

textarea {
	padding: 12px var(--form-field-padding);
	border-radius: var(--form-field-border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	color: var(--form-text-color);
	background-color: var(--form-surface-color);
	box-shadow: inset 0px 0px 0px var(--textarea-border-size, var(--form-border-size)) var(--textarea-border-color, var(--form-border-color)), 0px 0px var(--textarea-shadow-size, 0px) 0px var(--textarea-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
	cursor: text;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

textarea:hover {
	--textarea-border-size: var(--form-border-size-hover);
	--textarea-border-color: var(--form-border-color-hover);
}

textarea:focus {
	--textarea-border-size: var(--form-border-size-focus);
	--textarea-border-color: var(--form-border-color-focus);
	--textarea-shadow-size: var(--form-shadow-size-focus);
	--textarea-shadow-color: var(--form-shadow-color-focus);
}


/* ········································ FORM INPUT TYPE: TEXT, PASSWORD, EMAIL, SEARCH, TEL, URL ········································ */

/* Modifica el estilo del texto del marcador de posición (el texto que aparece dentro de un campo antes de escribir. */
/* input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], input[type=url]::placeholder {color: ;} */

input[type=text], input[type=password], input[type=email], input[type=search], input[type=tel], input[type=url] {
	height: var(--form-field-height);
	padding: 0px var(--form-field-padding);
	border-radius: var(--form-field-border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	color: var(--form-text-color);
	background-color: var(--form-surface-color);
	box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
	cursor: text;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=url]:hover {
	--input-border-size: var(--form-border-size-hover);
	--input-border-color: var(--form-border-color-hover);
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=url]:focus {
	--input-border-size: var(--form-border-size-focus);
	--input-border-color: var(--form-border-color-focus);
	--input-shadow-size: var(--form-shadow-size-focus);
	--input-shadow-color: var(--form-shadow-color-focus);
}


/* ········································ FORM INPUT TYPE: DATE ········································ */

input[type=date] {
	position: relative;
	height: var(--form-field-height);
	padding: 0px calc(var(--form-field-padding) * 2 + var(--form-ico-size) - 22px) 0px var(--form-field-padding);
	border-radius: var(--form-field-border-radius);
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	color: var(--form-text-color);
	background-color: var(--form-surface-color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%238A8A8A'%3E%3Cpath d='M37,40H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h34c1.65,0,3,1.35,3,3v34c0,1.65-1.35,3-3,3ZM3,2c-.55,0-1,.45-1,1v34c0,.55.45,1,1,1h34c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1H3Z'/%3E%3Cpath d='M39,12.56H1c-.55,0-1-.45-1-1s.45-1,1-1h38c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Ccircle cx='11.56' cy='20' r='1.69'/%3E%3Ccircle cx='20' cy='20' r='1.69'/%3E%3Ccircle cx='28.44' cy='20' r='1.69'/%3E%3Ccircle cx='11.56' cy='28.44' r='1.69'/%3E%3Ccircle cx='20' cy='28.44' r='1.69'/%3E%3C/svg%3E"); /* Cambiar el color manualmente (= --form-ico-color). */
	box-shadow: inset 0px 0px 0px var(--input-border-size, var(--form-border-size)) var(--input-border-color, var(--form-border-color)), 0px 0px var(--input-shadow-size, 0px) 0px var(--input-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease,
		background-image var(--transition-interactive) ease;
	background-repeat: no-repeat;
	background-position: right var(--form-field-padding) top 0px;
	background-size: var(--form-ico-size) var(--form-field-height);
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

input[type=date]:hover {
	--input-border-size: var(--form-border-size-hover);
	--input-border-color: var(--form-border-color-hover);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23FF9D4D'%3E%3Cpath d='M37,40H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h34c1.65,0,3,1.35,3,3v34c0,1.65-1.35,3-3,3ZM3,2c-.55,0-1,.45-1,1v34c0,.55.45,1,1,1h34c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1H3Z'/%3E%3Cpath d='M39,12.56H1c-.55,0-1-.45-1-1s.45-1,1-1h38c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Ccircle cx='11.56' cy='20' r='1.69'/%3E%3Ccircle cx='20' cy='20' r='1.69'/%3E%3Ccircle cx='28.44' cy='20' r='1.69'/%3E%3Ccircle cx='11.56' cy='28.44' r='1.69'/%3E%3Ccircle cx='20' cy='28.44' r='1.69'/%3E%3C/svg%3E"); /* Cambiar el color manualmente (= --form-border-color-hover). */
}

input[type=date]:focus {
	--input-border-size: var(--form-border-size-focus);
	--input-border-color: var(--form-border-color-focus);
	--input-shadow-size: var(--form-shadow-size-focus);
	--input-shadow-color: var(--form-shadow-color-focus);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23FF7300'%3E%3Cpath d='M37,40H3c-1.65,0-3-1.35-3-3V3C0,1.35,1.35,0,3,0h34c1.65,0,3,1.35,3,3v34c0,1.65-1.35,3-3,3ZM3,2c-.55,0-1,.45-1,1v34c0,.55.45,1,1,1h34c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1H3Z'/%3E%3Cpath d='M39,12.56H1c-.55,0-1-.45-1-1s.45-1,1-1h38c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Ccircle cx='11.56' cy='20' r='1.69'/%3E%3Ccircle cx='20' cy='20' r='1.69'/%3E%3Ccircle cx='28.44' cy='20' r='1.69'/%3E%3Ccircle cx='11.56' cy='28.44' r='1.69'/%3E%3Ccircle cx='20' cy='28.44' r='1.69'/%3E%3C/svg%3E"); /* Cambiar el color manualmente (= --form-border-color-focus). */
}

input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	right: var(--form-field-padding);
	cursor: pointer;
	opacity: 0;
}

/* ········································ FORM INPUT TYPE: NUMBER ········································ */

.number {
	display: inline-flex;
	justify-content: space-between;
	height: var(--form-field-height);
	border-radius: var(--form-field-border-radius);
	background-color: var(--form-surface-color);
	box-shadow: inset 0px 0px 0px var(--number-border-size, var(--form-border-size)) var(--number-border-color, var(--form-border-color)), 0px 0px var(--number-shadow-size, 0px) 0px var(--number-shadow-color, transparent), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
}

.number:hover {
	--number-border-size: var(--form-border-size-hover);
	--number-border-color: var(--form-border-color-hover);
}

.number:focus-within {
	--number-border-size: var(--form-border-size-focus);
	--number-border-color: var(--form-border-color-focus);
	--number-shadow-size: var(--form-shadow-size-focus);
	--number-shadow-color: var(--form-shadow-color-focus);
}

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; appearance: none; margin: 0;}
input[type=number] {
	text-align: center;
	background-color: transparent;
	width: 45px;
	font-family: var(--font-p-family);
	font-size: var(--font-text-size);
	color: var(--form-text-color);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease;
	cursor: text;
	box-sizing: border-box;
	border: none;
	outline: none;
	-moz-appearance: textfield; /* Firefox: sin flechitas. */
	-webkit-appearance: none;
	appearance: none;
}

.number button {
	background-color: transparent;
	padding: 0px var(--form-field-padding);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.number button svg {
	width: var(--form-ico-size);
	height: var(--form-field-height);
	fill: var(--form-ico-color);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		fill var(--transition-interactive) ease;
}

.number button:hover svg {fill: var(--form-border-color-focus);}


/* ········································ FORM SM ········································ */

.btn.sm, input.sm, select.sm, .number.sm {
	height: var(--form-field-height-sm);
	font-size: var(--font-note-size);
	min-width: unset;
}
.btn.sm {
	padding: 0px var(--btn-padding-sm);
}
input.sm, select.sm {
	padding: 0px var(--form-field-padding-sm);
}

select.sm, input[type=date].sm {background-size: var(--form-ico-size) var(--form-field-height-sm); background-position: right var(--form-field-padding-sm) top 0px;}
select.sm {padding: 0px calc(var(--form-field-padding-sm) * 2 + var(--form-ico-size)) 0px var(--form-field-padding-sm);}
input[type=date].sm {padding: 0px calc(var(--form-field-padding-sm) * 2 + var(--form-ico-size) - 22px) 0px var(--form-field-padding-sm);}

.number.sm button:first-child {padding: 0px 0px 0px var(--form-field-padding-sm);}
.number.sm button:last-child {padding: 0px var(--form-field-padding-sm) 0px 0px;}
.number.sm button svg {height: var(--form-field-height-sm);}


/* ········································ FORM INPUT TYPE: CHECKBOX ········································ */

.container-checkbox, label.checkbox {
	display: flex;
	align-items: center;
	gap: 7px;
}
label.checkbox {cursor: pointer;}
label.checkbox input[type=checkbox], label.checkbox input[type=checkbox] + svg {
	width: var(--form-control-height);
	min-width: var(--form-control-height);
	height: var(--form-control-height);
	min-height: var(--form-control-height);
}
label.checkbox input[type=checkbox] {
	border-radius: var(--form-control-border-radius);
	background-color: var(--form-surface-color);
	box-shadow: inset 0px 0px 0px var(--checkbox-border-size, var(--form-border-size)) var(--checkbox-border-color, var(--form-border-color)), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		box-shadow var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

label.checkbox:hover {
	--checkbox-border-size: var(--form-border-size-hover);
	--checkbox-border-color: var(--form-border-color-hover);
}

label.checkbox input[type=checkbox]:checked {
	--checkbox-border-size: var(--form-border-size-focus);
	--checkbox-border-color: var(--form-border-color-focus);
}

label.checkbox input[type=checkbox] + svg {
	position: absolute;
	fill: none;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: var(--form-border-color-focus);
	stroke-dasharray: var(--svg-array, 86.12);
	stroke-dashoffset: var(--svg-offset, 86.12);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		stroke-dasharray var(--transition-interactive) ease,
		stroke-dashoffset var(--transition-interactive) ease;
}

label.checkbox input[type=checkbox]:checked + svg {
	--svg-array: 16.1 86.12;
	--svg-offset: 102.22;
}


/* ········································ FORM INPUT TYPE: CHECKBOX TOGGLE ········································ */

.container-checkbox-toggle, label.checkbox-toggle {
	display: flex;
	align-items: center;
	gap: 7px;
}
label.checkbox-toggle {cursor: pointer;}

/* Contenedor */
label.checkbox-toggle input[type=checkbox] {
	position: relative;
	width: calc(var(--form-control-height) * 2);
	height: var(--form-control-height);
	border-radius: 50px;
	background-color: var(--form-border-color);
	box-shadow: 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		background-color var(--transition-interactive) ease;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

label.checkbox-toggle:hover input[type=checkbox] {
	background-color: var(--form-border-color-hover);
}

/* Bola */
label.checkbox-toggle input[type=checkbox]:before {
	content: "";
	position: absolute;
	width: calc(var(--form-control-height) - 6px);
	height: calc(var(--form-control-height) - 6px);
	top: calc(6px / 2);
	left: 4px;
	border-radius: 50%;
	background-color: var(--form-surface-color);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		left var(--transition-interactive) linear;
}

label.checkbox-toggle input[type=checkbox]:checked {
	background-color: var(--form-border-color-focus);
}

label.checkbox-toggle input[type=checkbox]:checked:before {
	left: calc((var(--form-control-height) * 2) - (var(--form-control-height) - 6px) - 4px);
}


/* ········································ FORM INPUT TYPE: RADIO ········································ */

.container-radio, label.radio {
	display: flex;
	align-items: center;
	gap: 7px;
}
label.radio {cursor: pointer;}
label.radio input[type=radio] {display: none;}
label.radio input[type=radio] + div {
	width: var(--form-control-height);
	min-width: var(--form-control-height);
	height: var(--form-control-height);
	min-height: var(--form-control-height);
	border-radius: 50%;
	background-color: var(--form-surface-color);
	box-shadow: inset 0px 0px 0px var(--radio-border-size, var(--form-border-size)) var(--radio-border-color, var(--form-border-color)), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		background-color var(--transition-interactive) ease,
		box-shadow var(--transition-interactive) ease;
}

label.radio:hover {
	--radio-border-size: var(--form-border-size-hover);
	--radio-border-color: var(--form-border-color-hover);
}

label.radio input[type=radio]:checked + div {
	background-color: var(--form-border-color-focus);
	box-shadow: inset 0px 0px 0px var(--form-border-size-focus) var(--form-border-color-focus), inset 0px 0px 0px calc(var(--form-border-size-focus) + 3px) var(--form-surface-color), 0px 0px var(--form-shadow-size) 0px rgb(var(--form-shadow-rgb) / var(--form-shadow-opacity));
}


/* ········································ BADGE ········································ */

/* Sin más clases, la etiqueta de la marca (naranja suave, en mayúsculas, como en la web). */
.badge {
	height: 24px;
	width: fit-content;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0px 10px;
	border-radius: 50px;
	font-family: var(--font-p-family);
	font-weight: var(--font-p-bold-weight);
	font-size: var(--font-note-size);
	letter-spacing: var(--font-label-letter-spacing);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--brand-text-color);
	background-color: var(--brand-color-soft);
	transition:
		width var(--transition-resize) ease,
		min-width var(--transition-resize) ease,
		height var(--transition-resize) ease,
		min-height var(--transition-resize) ease,
		padding var(--transition-resize) ease,
		font-size var(--transition-resize) ease,
		background-color var(--transition-interactive) ease,
		box-shadow var(--transition-interactive) ease;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.badge.selectable {
	cursor: pointer;
}

.badge.on {
	background-color: var(--badge-on-surface-color);
	color: var(--badge-on-text-color);
	box-shadow: inset 0px 0px 0px 1px var(--badge-on-border-color);
}
.badge.on.selectable:hover {
	background-color: var(--badge-on-surface-color-hover);
}

.badge.off {
	background-color: var(--badge-off-surface-color);
	color: var(--badge-off-text-color);
	box-shadow: inset 0px 0px 0px 1px var(--badge-off-border-color);
}

.badge.off.selectable:hover {
	background-color: var(--badge-off-surface-color-hover);
}


/* ········································ RESPONSIVE ········································ */

@media (min-width: 600px) {
	.punto-brand {width: 8px; min-width: 8px; height: 8px; min-height: 8px;}
	.check-brand {width: 15px; min-width: 15px; height: 15px; min-height: 15px;}
}