/* =====================================================================
 * Numbi Sport — Mi cuenta
 * Todo cuelga de body.nbcta para no tocar el resto de la tienda.
 * ================================================================== */

body.nbcta {
	--nbt-orange: #fe5000;
	--nbt-orange-dark: #d94400;
	--nbt-ink: #14161c;
	--nbt-soft: #5b6270;
	--nbt-line: #e4e7ec;
	--nbt-bg: #f6f7f9;
	--nbt-radius: 12px;
	--nbt-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Divi encierra la página en .container + #left-area y deja media pantalla
 * vacía a la derecha; en el área de cliente no hay barra lateral que poner. */
body.nbcta #main-content .container {
	width: 100%;
	max-width: 1180px;
	padding-inline: 24px;
}

body.nbcta #main-content .container::before {
	display: none;
}

body.nbcta #left-area {
	width: 100%;
	padding: 0;
	float: none;
}

body.nbcta #sidebar {
	display: none;
}

body.nbcta #content-area {
	display: block;
}

body.nbcta .entry-title,
body.nbcta h1.entry-title {
	margin: 0 0 26px;
	padding: 0;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 800;
	color: var(--nbt-ink);
}

/* Divi pinta los avisos de WooCommerce con una hoja EN LÍNEA que lleva
 * `color:#fff!important`: es el único sitio donde hace falta !important. */
body.nbcta #main-content .woocommerce-info,
body.nbcta #main-content .woocommerce-message,
body.nbcta #main-content .woocommerce-error {
	color: var(--nbt-ink) !important;
}

body.nbcta #main-content .woocommerce-info,
body.nbcta #main-content .woocommerce-message,
body.nbcta #main-content .woocommerce-error {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid var(--nbt-line);
	border-left: 3px solid var(--nbt-orange);
	border-radius: var(--nbt-radius);
	background: var(--nbt-bg);
	font-size: 14px;
	list-style: none;
}

body.nbcta #main-content .woocommerce-info::before,
body.nbcta #main-content .woocommerce-message::before,
body.nbcta #main-content .woocommerce-error::before {
	display: none;
}

body.nbcta #main-content .woocommerce-error {
	border-left-color: #d92c20;
	background: #fdeceb;
}

body.nbcta #main-content .woocommerce-message {
	border-left-color: #2f9e56;
	background: #eef8f1;
}

/* ------------------------------------------------------------------ *
 * Campos y botones (mismo lenguaje que el checkout)
 * ------------------------------------------------------------------ */

body.nbcta .woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

body.nbcta .woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nbt-ink);
}

body.nbcta .woocommerce form .form-row .required {
	color: var(--nbt-orange);
	text-decoration: none;
}

body.nbcta .woocommerce form .form-row input.input-text,
body.nbcta .woocommerce form .form-row input[type="password"],
body.nbcta .woocommerce form .form-row input[type="email"],
body.nbcta .woocommerce form .form-row input[type="text"],
body.nbcta .woocommerce form .form-row select,
body.nbcta .woocommerce form .form-row textarea {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--nbt-line);
	border-radius: 10px;
	background: #fff;
	color: var(--nbt-ink);
	font-size: 15px;
	line-height: 48px;
	box-shadow: none;
	transition: border-color .18s, box-shadow .18s;
}

body.nbcta .woocommerce form .form-row textarea {
	height: auto;
	min-height: 110px;
	padding: 14px 16px;
	line-height: 1.5;
}

body.nbcta .woocommerce form .form-row input:focus,
body.nbcta .woocommerce form .form-row select:focus,
body.nbcta .woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--nbt-orange);
	box-shadow: 0 0 0 3px rgba(254, 80, 0, .14);
}

body.nbcta .woocommerce .button,
body.nbcta .woocommerce button.button,
body.nbcta .woocommerce input.button,
body.nbcta .nbcta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: var(--nbt-orange);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, transform .15s var(--nbt-ease);
}

body.nbcta .woocommerce .button:hover,
body.nbcta .woocommerce button.button:hover,
body.nbcta .woocommerce input.button:hover,
body.nbcta .nbcta-btn:hover {
	background: var(--nbt-orange-dark);
	color: #fff;
	transform: translateY(-1px);
}

body.nbcta .nbcta-btn--ghost {
	background: #fff;
	color: var(--nbt-ink);
	border: 1px solid var(--nbt-line);
}

body.nbcta .nbcta-btn--ghost:hover {
	background: var(--nbt-bg);
	color: var(--nbt-ink);
	border-color: #c9ced7;
}

/* ------------------------------------------------------------------ *
 * Acceso y registro (sin sesión)
 * ------------------------------------------------------------------ */

/* `flow-root` es necesario: WooCommerce flota las columnas y sin un contexto
 * de formato propio la tarjeta se quedaba con la altura de las pestañas y el
 * formulario se salía por debajo. */
body.nbcta-fuera .u-columns.col2-set {
	display: flow-root;
	max-width: 460px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid var(--nbt-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 26px 60px -40px rgba(20, 22, 28, .55);
}

body.nbcta-fuera .u-columns.col2-set::before,
body.nbcta-fuera .u-columns.col2-set::after {
	display: none;
}

/* WooCommerce las flota con `.woocommerce .col2-set .col-1` (0,3,0), así que
 * hay que nombrar también esas clases para ganarle. */
body.nbcta-fuera .u-columns .col-1,
body.nbcta-fuera .u-columns .col-2,
body.nbcta-fuera .u-column1,
body.nbcta-fuera .u-column2 {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}

/* Los títulos "Acceder" y "Registrarse" se sustituyen por las pestañas */
body.nbcta-fuera .u-column1 > h2,
body.nbcta-fuera .u-column2 > h2 {
	display: none;
}

body.nbcta-fuera .u-column2 {
	display: none;
}

body.nbcta-fuera.nbcta-registro .u-column1 {
	display: none;
}

body.nbcta-fuera.nbcta-registro .u-column2 {
	display: block;
}

body.nbcta .nbcta-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 0 0 24px;
	padding: 4px;
	border-radius: 999px;
	background: var(--nbt-bg);
}

body.nbcta .nbcta-tab {
	height: 42px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--nbt-soft);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s;
}

body.nbcta .nbcta-tab.is-active {
	background: #fff;
	color: var(--nbt-ink);
	box-shadow: 0 2px 8px -3px rgba(20, 22, 28, .35);
}

body.nbcta-fuera .woocommerce-form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

body.nbcta-fuera .woocommerce-form-login__submit,
body.nbcta-fuera .woocommerce-form-register__submit {
	width: 100%;
	float: none;
	margin: 6px 0 0;
}

body.nbcta-fuera .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 13.5px;
	color: var(--nbt-soft);
}

body.nbcta-fuera .woocommerce-LostPassword {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13.5px;
}

body.nbcta-fuera .woocommerce-LostPassword a {
	color: var(--nbt-soft);
	text-decoration: underline;
}

body.nbcta-fuera .woocommerce-LostPassword a:hover {
	color: var(--nbt-orange);
}

body.nbcta-fuera .woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	line-height: 1.55;
	color: #8a919d;
}

body.nbcta input[type="checkbox"] {
	accent-color: var(--nbt-orange);
	width: 17px;
	height: 17px;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Área de cliente (con sesión)
 * ------------------------------------------------------------------ */

/* OJO: `woocommerce-account` es una clase del <body>, no un contenedor
 * interno; con `.woocommerce-account .woocommerce` el selector no casaba. */
body.nbcta-dentro .woocommerce {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	align-items: start;
	gap: 28px;
}

body.nbcta-dentro .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

body.nbcta-dentro .woocommerce-MyAccount-navigation {
	width: auto;
	float: none;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--nbt-line);
	border-radius: var(--nbt-radius);
	background: #fff;
}

body.nbcta-dentro .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	margin: 0;
	padding: 26px;
	border: 1px solid var(--nbt-line);
	border-radius: var(--nbt-radius);
	background: #fff;
}

/* Ficha del cliente */

/* La ficha se pinta antes del menú, así que en la rejilla ocupa una fila
 * entera por encima de las dos columnas. */
body.nbcta .nbcta-user {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--nbt-line);
	border-radius: var(--nbt-radius);
	background: #fff;
}

body.nbcta .nbcta-user__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--nbt-ink);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
}

body.nbcta .nbcta-user__txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.nbcta .nbcta-user__txt strong {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--nbt-ink);
	line-height: 1.3;
}

body.nbcta .nbcta-user__txt small {
	font-size: 12.5px;
	color: var(--nbt-soft);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Menú lateral */

body.nbcta-dentro .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.nbcta-dentro .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.nbcta-dentro .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 11px 14px;
	border-radius: 9px;
	color: var(--nbt-soft);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background .16s, color .16s;
}

body.nbcta-dentro .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--nbt-bg);
	color: var(--nbt-ink);
}

body.nbcta-dentro .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--nbt-ink);
	color: #fff;
}

body.nbcta-dentro .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #c0392b;
}

body.nbcta-dentro .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #fdeceb;
	color: #a5281b;
}

/* Escritorio */

body.nbcta .nbcta-hola h2 {
	margin: 0 0 6px;
	padding: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--nbt-ink);
}

body.nbcta .nbcta-hola p {
	margin: 0 0 22px;
	padding: 0;
	font-size: 14.5px;
	color: var(--nbt-soft);
}

body.nbcta .nbcta-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: 0 0 26px;
}

body.nbcta .nbcta-kpi {
	padding: 16px 18px;
	border-radius: var(--nbt-radius);
	background: var(--nbt-bg);
}

body.nbcta .nbcta-kpi__n {
	display: block;
	font-size: 24px;
	font-weight: 800;
	color: var(--nbt-ink);
	line-height: 1.2;
}

body.nbcta .nbcta-kpi__n .woocommerce-Price-amount {
	font-size: 24px;
}

body.nbcta .nbcta-kpi__t {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--nbt-soft);
}

body.nbcta .nbcta-bloque__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

body.nbcta .nbcta-bloque__head h3 {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--nbt-ink);
}

body.nbcta .nbcta-bloque__head a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nbt-orange);
	text-decoration: none;
}

body.nbcta .nbcta-pedidos {
	display: grid;
	gap: 8px;
	margin-bottom: 26px;
}

body.nbcta .nbcta-pedido {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 13px 15px;
	border: 1px solid var(--nbt-line);
	border-radius: 10px;
	color: var(--nbt-ink);
	text-decoration: none;
	transition: border-color .18s, box-shadow .18s;
}

body.nbcta .nbcta-pedido:hover {
	border-color: #c9ced7;
	box-shadow: 0 10px 22px -18px rgba(20, 22, 28, .6);
}

body.nbcta .nbcta-pedido__id {
	font-weight: 800;
	font-size: 14px;
}

body.nbcta .nbcta-pedido__fecha {
	font-size: 13px;
	color: var(--nbt-soft);
}

body.nbcta .nbcta-pedido__total {
	margin-left: auto;
	font-weight: 800;
	font-size: 14.5px;
	white-space: nowrap;
}

body.nbcta .nbcta-estado {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--nbt-bg);
	color: var(--nbt-soft);
	font-size: 11.5px;
	font-weight: 700;
}

body.nbcta .nbcta-estado--completed {
	background: #eef8f1;
	color: #1c7a3a;
}

body.nbcta .nbcta-estado--processing {
	background: #fff2e8;
	color: #b8480a;
}

body.nbcta .nbcta-estado--cancelled,
body.nbcta .nbcta-estado--failed,
body.nbcta .nbcta-estado--refunded {
	background: #fdeceb;
	color: #b32d20;
}

body.nbcta .nbcta-vacio {
	padding: 30px 20px;
	margin-bottom: 26px;
	border: 1px dashed var(--nbt-line);
	border-radius: var(--nbt-radius);
	text-align: center;
	color: var(--nbt-soft);
}

body.nbcta .nbcta-vacio p {
	margin: 0 0 14px;
	padding: 0;
}

body.nbcta .nbcta-accesos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

body.nbcta .nbcta-acceso {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px;
	border: 1px solid var(--nbt-line);
	border-radius: var(--nbt-radius);
	text-decoration: none;
	transition: border-color .18s, transform .18s var(--nbt-ease), box-shadow .18s;
}

body.nbcta .nbcta-acceso:hover {
	border-color: var(--nbt-orange);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -22px rgba(20, 22, 28, .7);
}

body.nbcta .nbcta-acceso strong {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--nbt-ink);
}

body.nbcta .nbcta-acceso small {
	font-size: 12.5px;
	color: var(--nbt-soft);
}

/* ------------------------------------------------------------------ *
 * Tablas (pedidos, descargas)
 * ------------------------------------------------------------------ */

body.nbcta .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

body.nbcta .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 0 12px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--nbt-line);
	background: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--nbt-soft);
	text-align: left;
}

body.nbcta .woocommerce-MyAccount-content table.shop_table tbody td {
	padding: 14px 12px 14px 0;
	border: 0;
	border-bottom: 1px solid var(--nbt-line);
	font-size: 14px;
	color: var(--nbt-ink);
	vertical-align: middle;
}

body.nbcta .woocommerce-MyAccount-content table.shop_table .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

body.nbcta .woocommerce-MyAccount-content table.shop_table .button {
	height: 38px;
	padding: 0 16px;
	font-size: 13px;
}

body.nbcta .woocommerce-pagination {
	margin-top: 18px;
}

/* Direcciones */

/* Las tarjetas de dirección también llevan col-1/col-2 y WooCommerce las flota
 * con `.woocommerce .col2-set .col-1` (0,3,0): hay que subir de especificidad. */
body.nbcta .woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 18px 0 0;
}

body.nbcta .woocommerce-MyAccount-content .woocommerce-Addresses::before,
body.nbcta .woocommerce-MyAccount-content .woocommerce-Addresses::after {
	display: none;
}

body.nbcta .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address,
body.nbcta .woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
body.nbcta .woocommerce-MyAccount-content .woocommerce-Addresses .col-2 {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--nbt-line);
	border-radius: var(--nbt-radius);
}

body.nbcta .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

body.nbcta .woocommerce-Address-title h2,
body.nbcta .woocommerce-Address-title h3 {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--nbt-ink);
}

body.nbcta .woocommerce-Address-title a {
	font-size: 13px;
	font-weight: 600;
	color: var(--nbt-orange);
	text-decoration: none;
}

body.nbcta .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--nbt-soft);
}

body.nbcta fieldset {
	margin: 26px 0 0;
	padding: 22px 0 0;
	border: 0;
	border-top: 1px solid var(--nbt-line);
}

body.nbcta fieldset legend {
	padding: 0;
	font-size: 15px;
	font-weight: 800;
	color: var(--nbt-ink);
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	body.nbcta #main-content .container {
		padding-inline: 16px;
	}

	body.nbcta-dentro .woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	body.nbcta-dentro .woocommerce-MyAccount-navigation ul {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	body.nbcta-dentro .woocommerce-MyAccount-navigation ul li a {
		white-space: nowrap;
	}

	body.nbcta-dentro .woocommerce-MyAccount-content {
		padding: 18px;
	}

	body.nbcta .nbcta-pedido__total {
		margin-left: 0;
		flex: 1 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.nbcta * {
		transition-duration: .01ms !important;
	}
}