/* Afina Mi Cuenta · área de cliente
   Identidad: amarillo #FFD931 · azul #2E508A · gris #686868 · Space Grotesk */

/* ============================================================
   AISLAMIENTO: neutraliza todo lo heredado del tema (Astra),
   WooCommerce y Elementor. Se usa :where() para que el reset
   tenga especificidad 0 y las reglas del componente (más abajo)
   siempre ganen. all: revert devuelve cada propiedad al valor
   del navegador, borrando los estilos de autor del tema.
   ============================================================ */
.afina-account.afina-account,
.afina-account.afina-account :where(div, section, article, aside, nav, header, footer, ul, ol, li, dl, dt, dd,
	h1, h2, h3, h4, h5, h6, p, span, small, b, strong, em, i, a, button, label, form, fieldset,
	input, select, textarea, table, thead, tbody, tr, td, th, figure, img, svg, hr, br, i, em){
	all: revert;
	box-sizing: border-box;
	font-family: "Space Grotesk", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
/* Restaura comportamientos base que all:revert deja en valor de navegador. */
.afina-account.afina-account :where(a){ color: inherit; text-decoration: none; }
.afina-account.afina-account :where(button){ background: none; border: 0; cursor: pointer; }
.afina-account.afina-account :where(img, svg){ max-width: 100%; }
.afina-account.afina-account :where(ul, ol){ list-style: none; margin: 0; padding: 0; }
.afina-account.afina-account :where(input, select, textarea, button){ font: inherit; }
/* Ningún texto del área usa mayúsculas por CSS (van en el contenido): anula el
   text-transform que fuerzan Astra/Elementor en títulos y enlaces. */
.afina-account.afina-account :where(h1, h2, h3, h4, h5, h6, p, a, span, small, b, strong, em, i, li, label, button, div, select, input, textarea){
	text-transform: none !important;
}

.afina-account.afina-account{
	/* Full-bleed: se sale del contenedor estrecho del tema/Elementor y ocupa
	   todo el ancho de la ventana; el padding centra el contenido a 1240px.
	   El ancho va explícito (y sin encoger) porque en los endpoints Elementor
	   nos mete dentro de un .woocommerce en flex: con `width:auto` seríamos un
	   flex item y cogeríamos el ancho del contenido, no el de la ventana —
	   por eso «Inicio» salía más ancho que el resto. */
	width: 100vw;
	flex: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 8px max(20px, calc(50vw - 620px)) 48px;
	--af-yellow: #FFD931;
	--af-blue: #2E508A;
	--af-blue-dark: #223c68;
	--af-gray: #686868;
	--af-ink: #2E508A; /* textos principales en azul Afina */
	--af-bg: #f5f6f9;
	--af-line: #e4e7ee;
	--af-white: #fff;
	--af-radius: 14px;
	--af-shadow: 0 1px 2px rgba(28, 36, 52, .05), 0 8px 24px -12px rgba(28, 36, 52, .12);
	font-family: "Space Grotesk", Arial, sans-serif;
	color: var(--af-ink);
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
.afina-account.afina-account *, .afina-account.afina-account *::before, .afina-account.afina-account *::after{ box-sizing: border-box; }
.afina-account.afina-account svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.afina-account.afina-account h2, .afina-account.afina-account h3, .afina-account.afina-account h4{ margin: 0; font-family: inherit; color: inherit; line-height: 1.2 !important; }
.afina-account.afina-account p{ margin: 0; }
.afina-account.afina-account a{ text-decoration: none; }
.afina-account .af-sprite{ position: absolute; width: 0; height: 0; }

/* ------------------------------ Sidebar ------------------------------ */
.afina-account .af-sidebar{ position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.afina-account .af-profile-mini{
	display: flex; align-items: center; gap: 12px;
	background: var(--af-white); border: 1px solid var(--af-line); border-radius: var(--af-radius);
	padding: 14px 16px; box-shadow: var(--af-shadow);
}
.afina-account .af-profile-mini strong{ display: block; font-size: 15px; }
.afina-account .af-profile-mini small{ color: var(--af-gray); font-size: 12px; }
.afina-account .af-avatar{
	width: 42px; height: 42px; border-radius: 50%; flex: none;
	display: grid; place-items: center; font-weight: 700; font-size: 15px;
	background: var(--af-yellow); color: var(--af-ink);
}
.afina-account .af-mobile-menu{ display: none; }

.afina-account .af-account-nav{
	background: var(--af-white); border: 1px solid var(--af-line); border-radius: var(--af-radius);
	padding: 10px; box-shadow: var(--af-shadow); display: flex; flex-direction: column; gap: 2px;
}
.afina-account .af-nav-item{
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 9px; border: 0; background: none;
	font: 500 14px/1.3 "Space Grotesk", Arial, sans-serif; color: var(--af-ink);
	cursor: pointer; text-align: left; transition: background .15s, color .15s;
}
.afina-account .af-nav-item:hover{ background: var(--af-bg); color: var(--af-blue); }
.afina-account .af-nav-item.active{ background: var(--af-blue); color: #fff; }
.afina-account .af-nav-item.active:hover{ color: #fff; }
.afina-account .af-nav-item em{ margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: var(--af-yellow); color: var(--af-ink); border-radius: 20px; padding: 2px 8px; }
.afina-account .af-nav-item.af-logout{ color: #b3261e; }
.afina-account .af-nav-item.af-logout:hover{ background: #fdf0ef; color: #b3261e; }
.afina-account .af-nav-group-title{
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 10px 12px; border: 0; background: none; border-radius: 9px;
	font: 600 14px/1.3 "Space Grotesk", Arial, sans-serif; color: var(--af-ink);
	cursor: pointer;
}
.afina-account .af-nav-group-title:hover{ background: var(--af-bg); }
.afina-account .af-nav-group-title .af-chev{ margin-left: auto; width: 16px; height: 16px; transition: transform .2s; }
.afina-account .af-nav-group.open .af-nav-group-title .af-chev{ transform: rotate(180deg); }
.afina-account .af-nav-children{ display: none; flex-direction: column; gap: 2px; padding: 2px 0 6px 30px; }
.afina-account .af-nav-group.open .af-nav-children{ display: flex; }
.afina-account .af-nav-children .af-nav-item{ padding: 8px 10px; font-weight: 400; color: var(--af-gray); }
.afina-account .af-nav-children .af-nav-item:hover{ color: var(--af-blue); }
.afina-account .af-nav-children .af-nav-item.active{ color: #fff; font-weight: 600; }

.afina-account .af-help-card{
	background: var(--af-blue); color: #fff; border-radius: var(--af-radius);
	padding: 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--af-shadow);
}
.afina-account .af-help-card svg{ width: 24px; height: 24px; margin-bottom: 6px; color: var(--af-yellow); }
.afina-account .af-help-card strong{ font-size: 15px; }
.afina-account .af-help-card span{ font-size: 12px; opacity: .8; }
.afina-account .af-help-card a{ color: var(--af-yellow); font-weight: 700; font-size: 18px; margin-top: 4px; }

/* Asesor asignado (ventaja de PRO PLUS y Distribuidor): sustituye a la tarjeta
   de soporte. La foto se sale por la derecha, así que la tarjeta recorta. */
.afina-account .af-advisor{
	position: relative;
	background: var(--af-blue); color: #fff; border-radius: var(--af-radius);
	padding: 18px; box-shadow: var(--af-shadow);
}
/* La foto va dentro de la tarjeta, alineada con el padding. */
.afina-account .af-advisor-photo{
	position: absolute; right: 18px; top: 16px; width: 92px; height: 92px; border-radius: 50%;
	border: 4px solid #fff; overflow: hidden; background: #8fa0bf;
	display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 700;
}
.afina-account .af-advisor-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.afina-account .af-advisor .af-eyebrow{ color: var(--af-yellow); }
/* El !important en text-transform es necesario: el endurecimiento contra las
   mayúsculas del tema fuerza `none` y aquí sí las queremos. */
.afina-account .af-advisor h3{
	margin: 6px 0 0 !important; font-size: 15px !important; font-weight: 700; line-height: 1.25;
	text-transform: uppercase !important; letter-spacing: .02em; color: #fff !important;
	max-width: 120px; /* deja libre la foto */
}
.afina-account .af-advisor-role{ font-size: 10px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 4px; max-width: 120px; }
.afina-account .af-advisor-rule{ width: 42px; height: 3px; background: var(--af-yellow); border-radius: 3px; margin: 12px 0; }
.afina-account .af-advisor-quote{ font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.9) !important; margin: 0 !important; }
.afina-account .af-advisor-acts{ display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.afina-account .af-advisor-row{ display: flex; gap: 8px; }
.afina-account .af-advisor-row .af-advisor-btn{ flex: 1; min-width: 0; }
.afina-account .af-advisor-btn{
	display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none !important;
	font: 600 12.5px/1 "Space Grotesk", Arial, sans-serif; border-radius: 9px; padding: 10px;
	border: 2px solid transparent;
}
.afina-account .af-advisor-btn svg{ width: 15px; height: 15px; flex: none; }
/* El número, en amarillo: es la acción principal (llamada). */
.afina-account .af-advisor-call{ background: var(--af-yellow); color: #fff !important; text-shadow: 0 1px 2px rgba(28,36,52,.3); font-size: 14px; }
.afina-account .af-advisor-call:hover{ filter: brightness(.95); }
.afina-account .af-advisor-wa,
.afina-account .af-advisor-mail{ border-color: rgba(255,255,255,.55); color: #fff !important; }
.afina-account .af-advisor-wa:hover,
.afina-account .af-advisor-mail:hover{ background: #fff; color: var(--af-blue) !important; text-shadow: none; }

/* ------------------------------ Cabeceras ------------------------------ */
.afina-account .af-content{ display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.afina-account .af-page-heading{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.afina-account .af-page-heading p{ font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--af-blue); margin: 0 0 4px; }
.afina-account .af-page-heading h2{ font-size: 30px !important; font-weight: 700 !important; }
.afina-account .af-page-heading > div > span{ color: var(--af-gray); font-size: 14px; display: block; margin-top: 4px; }
.afina-account .af-section-title{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.afina-account .af-section-title h3{ font-size: 20px !important; }
.afina-account .af-eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--af-blue); display: block; margin-bottom: 4px; }

/* ------------------------------ Botones ------------------------------ */
.afina-account .af-btn-primary, .afina-account .af-content .af-btn-primary{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--af-yellow); color: #fff !important; border: 2px solid var(--af-yellow);
	text-shadow: 0 1px 2px rgba(28, 36, 52, .25);
	border-radius: 10px; padding: 10px 20px; font: 700 14px/1.2 "Space Grotesk", Arial, sans-serif;
	cursor: pointer; transition: filter .15s, transform .1s; text-align: center;
}
.afina-account .af-btn-primary:hover{ filter: brightness(.96); transform: translateY(-1px); }
.afina-account .af-btn-outline, .afina-account .af-content .af-btn-outline{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--af-white); color: var(--af-blue) !important; border: 2px solid var(--af-blue);
	border-radius: 10px; padding: 9px 18px; font: 600 14px/1.2 "Space Grotesk", Arial, sans-serif;
	cursor: pointer; transition: background .15s, color .15s;
}
.afina-account .af-btn-outline:hover{ background: var(--af-blue); color: #fff !important; }
.afina-account .af-btn-outline svg{ width: 16px; height: 16px; }
.afina-account .af-btn-outline.af-disabled{ opacity: .45; pointer-events: none; border-color: var(--af-gray); color: var(--af-gray) !important; }
.afina-account .af-withdraw{ flex-direction: column; gap: 0; line-height: 1.1; }
.afina-account .af-withdraw small{ font-size: 10px; font-weight: 500; opacity: .75; }
/* El fondo/borde van con !important igual que el color: si una regla del tema
   (más específica que el reset de aislamiento) ganase el fondo, el texto azul
   quedaría invisible sobre azul. */
.afina-account .af-text-btn{
	display: inline-flex; align-items: center; gap: 6px; padding: 0;
	border: 0 !important; background: none !important;
	font: 600 14px/1.2 "Space Grotesk", Arial, sans-serif; color: var(--af-blue) !important; cursor: pointer;
}
.afina-account .af-text-btn:hover{ text-decoration: underline; }
.afina-account .af-text-btn svg{ width: 16px; height: 16px; transition: transform .15s; }
.afina-account .af-text-btn:hover svg{ transform: translateX(3px); }

/* ------------------------------ Paneles ------------------------------ */
.afina-account .af-panel{
	background: var(--af-white); border: 1px solid var(--af-line); border-radius: var(--af-radius);
	padding: 24px; box-shadow: var(--af-shadow);
}
.afina-account .af-empty{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 24px; color: var(--af-gray); }
.afina-account .af-notice{ background: #eef7ef; border: 1px solid #bfe3c2; color: #1e6b2c; border-radius: 10px; padding: 12px 16px; font-size: 14px; }

/* ------------------------------ Fidelización ------------------------------ */
.afina-account .af-level-card{
	display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden;
	background: var(--af-blue); color: #fff; border-radius: var(--af-radius); box-shadow: var(--af-shadow);
}
.afina-account .af-level-main{ padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.afina-account .af-level-card .af-eyebrow{ color: var(--af-yellow); }
.afina-account .af-level-title{ display: flex; align-items: center; gap: 14px; }
.afina-account .af-level-title small{ opacity: .75; font-size: 12px; }
.afina-account .af-level-title h3{ font-size: 26px !important; letter-spacing: .02em !important; }
.afina-account .af-level-icon{
	min-width: 52px; height: 52px; border-radius: 14px; flex: none; padding: 0 14px;
	display: grid; place-items: center; font-weight: 700; font-size: 17px; letter-spacing: 2px;
	background: var(--af-yellow); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .25);
}
.afina-account .af-nivel-bronce{ background: linear-gradient(110deg, #6e3a12, #b57b42 30%, #efc79a 50%, #9c5f2e 72%, #5c2f0e); }
.afina-account .af-nivel-plata{ background: linear-gradient(110deg, #3a3a3a, #9e9e9e 30%, #efefef 50%, #8a8a8a 72%, #2e2e2e); }
.afina-account .af-nivel-oro{ background: linear-gradient(110deg, #8a6508, #d1a92c 30%, #f7e77e 50%, #b8860b 72%, #6e5205); }
.afina-account .af-nivel-distribuidor{ background: linear-gradient(110deg, #152540, #2E508A 30%, #5f83c0 50%, #27436f 72%, #101c33); }
.afina-account .af-level-main p{ font-size: 14px; opacity: .85; max-width: 46ch; }
.afina-account .af-progress-label{ display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.afina-account .af-progress-label strong{ color: var(--af-yellow); }
.afina-account .af-progress{ height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.afina-account .af-progress i{ display: block; height: 100%; background: var(--af-yellow); border-radius: 8px; }
.afina-account .af-level-main > small{ font-size: 12px; opacity: .6; }
.afina-account .af-benefits{ background: var(--af-blue-dark); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.afina-account .af-benefits h4{ font-size: 12px !important; letter-spacing: .12em !important; color: var(--af-yellow); }
.afina-account .af-benefits ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.afina-account .af-benefits li{ display: flex; gap: 10px; font-size: 14px; align-items: flex-start; }
.afina-account .af-benefits li svg{ width: 17px; height: 17px; color: var(--af-yellow); margin-top: 2px; }
.afina-account .af-benefits b{ color: var(--af-yellow); font-weight: 700; }

/* ------------------------------ Pedido (tarjeta) ------------------------------ */
.afina-account .af-order-card{ display: flex; flex-direction: column; gap: 20px; }
.afina-account .af-order-top{ display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.afina-account .af-order-top small, .afina-account .af-order-row small{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--af-gray); margin-bottom: 2px; }
.afina-account .af-order-top strong{ font-size: 16px; }
.afina-account .af-status{ display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--af-blue); background: #eef2f9; border-radius: 20px; padding: 6px 14px; }
.afina-account .af-status i{ width: 8px; height: 8px; border-radius: 50%; background: var(--af-blue); animation: af-pulse 1.6s infinite; }
.afina-account .af-status.delivered{ color: #1e6b2c; background: #eef7ef; }
.afina-account .af-status.delivered i{ background: #2e9e44; animation: none; }
@keyframes af-pulse { 50% { opacity: .35; } }
.afina-account .af-order-body{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.afina-account .af-product-img{ width: 64px; height: 64px; border-radius: 10px; background: var(--af-bg); overflow: hidden; flex: none; display: grid; place-items: center; }
.afina-account .af-product-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.afina-account .af-product-copy strong{ display: block; font-size: 15px; }
.afina-account .af-product-copy span{ color: var(--af-gray); font-size: 13px; }
.afina-account .af-more-products{ font-size: 13px; color: var(--af-gray); background: var(--af-bg); border-radius: 20px; padding: 5px 12px; }
.afina-account .af-order-actions{ margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.afina-account .af-order-progress{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--af-line); padding-top: 20px; }
.afina-account .af-order-progress i{ font-style: normal; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; }
.afina-account .af-order-progress i::before{ content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--af-line); }
.afina-account .af-order-progress i:first-child::before{ display: none; }
.afina-account .af-order-progress i b{ width: 24px; height: 24px; border-radius: 50%; background: var(--af-line); display: grid; place-items: center; position: relative; z-index: 1; }
.afina-account .af-order-progress i b svg{ width: 13px; height: 13px; color: var(--af-ink); stroke-width: 2.4; }
.afina-account .af-order-progress i span{ font-size: 12px; color: var(--af-gray); }
.afina-account .af-order-progress i.done::before, .afina-account .af-order-progress i.current::before{ background: var(--af-yellow); }
.afina-account .af-order-progress i.done b{ background: var(--af-yellow); }
.afina-account .af-order-progress i.current b{ background: var(--af-white); border: 3px solid var(--af-yellow); }
.afina-account .af-order-progress i.done span, .afina-account .af-order-progress i.current span{ color: var(--af-ink); font-weight: 600; }

/* ------------------------------ Pedidos (listado) ------------------------------ */
.afina-account .af-table-panel{ padding: 6px 24px; }
/* Cada pedido en su propia tarjeta */
.afina-account .af-orders-list{ display: flex; flex-direction: column; gap: 14px; }
.afina-account .af-order-row{ display: grid; grid-template-columns: 1fr .9fr .9fr auto; gap: 18px 22px; align-items: center; }
.afina-account .af-order-row b{ font-size: 15px; }
.afina-account .af-order-row > div > span{ display: block; color: var(--af-gray); font-size: 13px; margin-top: 2px; }
.afina-account .af-order-row .af-status{ margin-left: 0; display: inline-flex !important; width: auto; }
.afina-account .af-row-actions{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.afina-account .af-deadline-note{ display: flex; align-items: center; gap: 8px; color: var(--af-gray); font-size: 13px; }
.afina-account .af-deadline-note svg{ width: 16px; height: 16px; color: var(--af-blue); }

/* ------------------------------ Detalle de pedido (rediseño) ------------------------------ */
.afina-account .af-track{ display: flex; align-items: center; gap: 18px; background: var(--af-blue); color: #fff; }
.afina-account .af-track-icon{ width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.14); color: var(--af-yellow); }
.afina-account .af-track-icon svg{ width: 26px; height: 26px; }
.afina-account .af-track-copy{ flex: 1; min-width: 0; }
.afina-account .af-track-copy .af-eyebrow{ color: var(--af-yellow); }
.afina-account .af-track-copy h3{ margin: 2px 0 4px; font-size: 18px !important; color: #fff !important; }
.afina-account .af-track-copy p{ margin: 0; font-size: 14px; color: rgba(255,255,255,.85); }
.afina-account .af-track-copy b{ color: #fff; }
.afina-account .af-track .af-btn-primary{ flex: none; background: var(--af-yellow); border-color: var(--af-yellow); color: var(--af-blue); text-shadow: none; }
.afina-account .af-track .af-btn-primary:hover{ filter: brightness(.95); }
.afina-account .af-track-pending{ background: var(--af-white); color: var(--af-ink); }
.afina-account .af-track-pending .af-track-icon{ background: var(--af-bg); color: var(--af-blue); }
.afina-account .af-track-pending .af-eyebrow{ color: var(--af-gray); }
.afina-account .af-track-pending h3{ color: var(--af-blue) !important; }
.afina-account .af-track-pending p{ color: var(--af-gray); }
@media (max-width: 560px){ .afina-account .af-track{ flex-wrap: wrap; } .afina-account .af-track .af-btn-primary{ width: 100%; } }

.afina-account .af-orderv{ display: flex; flex-direction: column; gap: 22px; }
.afina-account .af-orderv-top{ display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.afina-account .af-orderv-top small{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--af-gray); margin-bottom: 2px; }
.afina-account .af-orderv-top strong{ font-size: 16px; }
.afina-account .af-orderv-total{ font-size: 20px !important; color: var(--af-blue); }
.afina-account .af-orderv-top .af-status{ margin-left: auto; }
.afina-account .af-status.cancelled{ color: #9a3535; background: #fbecec; }
.afina-account .af-status.cancelled i{ background: #cf4b4b; animation: none; }

.afina-account .af-orderv-items{ display: flex; flex-direction: column; gap: 12px; }
.afina-account .af-orderv-item{ display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; }
.afina-account .af-orderv-item-main{ display: flex; align-items: center; gap: 16px; }
.afina-account .af-orderv-item-buy{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px dashed var(--af-line); padding-top: 12px; }
.afina-account .af-orderv-buy-label{ font-size: 12.5px; color: var(--af-gray); font-weight: 600; margin-right: auto; }
.afina-account .af-orderv-item-buy .af-add-form{ margin: 0; }
.afina-account .af-orderv-thumb{ width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--af-bg); flex: none; display: grid; place-items: center; }
.afina-account .af-orderv-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.afina-account .af-orderv-item-copy{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.afina-account .af-orderv-item-copy strong{ font-size: 15px; }
.afina-account .af-orderv-item-copy small{ font-size: 12px; color: var(--af-gray); }
.afina-account .af-orderv-meta{ font-size: 12px; color: var(--af-gray); }
.afina-account .af-orderv-qty{ flex: none; color: var(--af-gray); font-weight: 600; font-size: 14px; }
.afina-account .af-orderv-line{ flex: none; font-weight: 700; color: var(--af-blue); font-size: 15px; min-width: 74px; text-align: right; }

.afina-account .af-orderv-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 22px; }
.afina-account .af-orderv-summary h4{ font-size: 12px; letter-spacing: .1em; color: var(--af-gray); margin: 0 0 12px; text-transform: uppercase; }
.afina-account .af-orderv-trow{ display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--af-line); font-size: 14px; }
.afina-account .af-orderv-trow span:first-child{ color: var(--af-gray); }
.afina-account .af-orderv-trow.is-total{ border-bottom: 0; margin-top: 4px; padding-top: 14px; border-top: 2px solid var(--af-line); font-size: 17px; font-weight: 700; color: var(--af-blue); }
.afina-account .af-orderv-trow.is-total span:first-child{ color: var(--af-blue); }
.afina-account .af-orderv-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.afina-account .af-factura-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.afina-account .af-factura-btn svg{ width: 16px; height: 16px; }
.afina-account .af-factura-link{ display: inline-flex; align-items: center; gap: 5px; }
.afina-account .af-factura-link svg{ width: 14px; height: 14px; }
.afina-account .af-factura-solicitar{ display: inline-flex; align-items: center; gap: 5px; }
.afina-account .af-factura-solicitar svg{ width: 14px; height: 14px; }
.afina-account .af-factura-req{ display: inline-flex; align-items: center; gap: 5px; color: #1f8a4c !important; cursor: default; }
.afina-account .af-factura-req:hover{ text-decoration: none; }
.afina-account .af-factura-req svg{ width: 14px; height: 14px; }
.afina-account .af-factura-req:hover svg{ transform: none; }
/* Modal de confirmación de solicitud de factura */
.afina-account .af-fact-modal{ position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.6); opacity: 0; transition: opacity .25s; }
.afina-account .af-fact-modal.show{ opacity: 1; }
.afina-account .af-fact-modal-card{ position: relative; background: #fff; border-radius: 18px; max-width: 430px; width: 100%; padding: 36px 32px; text-align: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); transform: translateY(16px) scale(.98); transition: transform .25s; font-family: "Space Grotesk", Arial, sans-serif; }
.afina-account .af-fact-modal-card{ border-top: 4px solid #FFD931; }
.afina-account .af-fact-modal-x{ position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: #9aa3b2; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 9px; transition: background .15s, color .15s; }
.afina-account .af-fact-modal-x:hover{ background: #f1f3f8; color: #2E508A; }
.afina-account .af-fact-modal.show .af-fact-modal-card{ transform: none; }
.afina-account .af-fact-modal-ic{ width: 68px; height: 68px; border-radius: 50%; background: #e8f7ee; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.afina-account .af-fact-modal-ic svg{ width: 36px; height: 36px; fill: none; stroke: #1f8a4c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.afina-account .af-fact-modal-card h3{ margin: 0 0 10px; font-size: 22px; font-weight: 700; color: #2E508A; }
.afina-account .af-fact-modal-card p{ margin: 0 0 26px; font-size: 15.5px; line-height: 1.55; color: #555; }
.afina-account .af-fact-modal.af-err .af-fact-modal-ic{ background: #fdecec; }
.afina-account .af-fact-modal.af-err .af-fact-modal-ic svg{ stroke: #d64545; }
.afina-account .af-orderv-actions .af-btn-primary,
.afina-account .af-orderv-actions .af-withdraw{ justify-content: center; }
.afina-account .af-orderv-addresses{ display: flex; flex-direction: column; gap: 16px; }
.afina-account .af-orderv-addresses .af-address-kind{ display: inline-flex; align-items: center; gap: 6px; }
.afina-account .af-orderv-addresses .af-address-kind svg{ width: 14px; height: 14px; }
.afina-account .af-orderv-addresses p{ font-size: 14px; line-height: 1.6; color: var(--af-ink); margin: 8px 0; }
.afina-account .af-orderv-note{ margin-top: 16px; }
.afina-account .af-orderv-note p{ margin-top: 6px; font-size: 14px; color: var(--af-ink); }
@media (max-width: 780px){
	.afina-account .af-orderv-cols{ grid-template-columns: 1fr; }
}
.afina-account .af-pagination{ display: flex; gap: 10px; justify-content: center; }

/* ------------------------------ Promociones ------------------------------ */
.afina-account .af-promo-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
/* Banner de promoción (imagen subida en el CPT de promociones) */
.afina-account .af-promo-banner{ display: block; border-radius: var(--af-radius); overflow: hidden; box-shadow: var(--af-shadow); transition: transform .15s, box-shadow .15s; }
.afina-account .af-promo-banner:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(28, 36, 52, .28); }
.afina-account .af-promo-banner img{ display: block; width: 100%; height: auto; }
.afina-account .af-promo-card{ border-radius: var(--af-radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; box-shadow: var(--af-shadow); }
.afina-account .af-promo-card.blue{ background: var(--af-blue); color: #fff; }
.afina-account .af-promo-card.lime{ background: var(--af-yellow); color: var(--af-ink); }
.afina-account .af-promo-tag{ font-size: 10px; font-weight: 700; letter-spacing: .12em; background: rgba(255, 255, 255, .2); border-radius: 20px; padding: 4px 10px; align-self: flex-start; }
.afina-account .af-promo-card.lime .af-promo-tag{ background: rgba(28, 36, 52, .12); }
.afina-account .af-promo-symbol{ position: absolute; right: 18px; top: 12px; font-size: 64px; font-weight: 700; opacity: .14; }
.afina-account .af-promo-card h3{ font-size: 19px !important; }
.afina-account .af-promo-card p{ font-size: 13px; opacity: .85; }
.afina-account .af-promo-card small{ font-size: 12px; opacity: .65; }
.afina-account .af-promo-card a{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; margin-top: 4px; color: inherit !important; }
.afina-account .af-promo-card.blue a{ color: var(--af-yellow) !important; }
.afina-account .af-promo-card a svg{ width: 15px; height: 15px; }

/* ------------------------------ Productos comprados ------------------------------ */
.afina-account .af-tools{ display: flex; gap: 14px; }
.afina-account .af-search{ display: flex; align-items: center; gap: 10px; flex: 1; background: var(--af-white); border: 1px solid var(--af-line); border-radius: 10px; padding: 10px 14px; }
.afina-account .af-search svg{ width: 17px; height: 17px; color: var(--af-gray); }
.afina-account .af-search input{ border: 0 !important; outline: none !important; background: none !important; box-shadow: none !important; width: 100%; font: 400 14px "Space Grotesk", Arial, sans-serif; padding: 0 !important; }
.afina-account .af-purchased-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.afina-account .af-product-card{ display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.afina-account .af-product-visual{ display: block; border-radius: 10px; overflow: hidden; background: var(--af-bg); aspect-ratio: 4/3; }
.afina-account .af-product-visual img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.afina-account .af-product-card h3{ font-size: 15px !important; }
.afina-account .af-product-card h3 a{ color: var(--af-ink) !important; }
.afina-account .af-variant{ font-size: 12px; color: var(--af-gray); }
.afina-account .af-variant b{ color: var(--af-ink); }
.afina-account .af-price{ font-size: 17px; font-weight: 700; color: var(--af-blue); }
.afina-account .af-price del{ color: var(--af-gray); font-weight: 400; font-size: 13px; margin-right: 6px; text-decoration: line-through; }
.afina-account .af-price ins{ text-decoration: none; color: var(--af-blue); font-weight: 700; }
.afina-account .af-off{ display: inline-block; background: var(--af-yellow); color: #fff; text-shadow: 0 1px 2px rgba(28, 36, 52, .3); font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.afina-account .af-bought{ font-size: 11px; color: var(--af-gray); }
.afina-account .af-product-card .af-btn-primary{ margin-top: auto; }
/* Botón de las cards de producto: azul con texto blanco, hover amarillo */
.afina-account .af-product-card .af-btn-primary{ background: var(--af-blue); border-color: var(--af-blue); text-shadow: none; }
.afina-account .af-product-card .af-btn-primary:hover{ background: var(--af-yellow); border-color: var(--af-yellow); filter: none; transform: none; text-shadow: 0 1px 2px rgba(28, 36, 52, .3); }

/* ------------------------------ Carrusel de comprados ------------------------------ */
.afina-account .af-carousel{ display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--af-line) transparent; }
.afina-account .af-carousel .af-product-card{ flex: 0 0 258px; scroll-snap-align: start; }
.afina-account .af-carousel::-webkit-scrollbar{ height: 6px; }
.afina-account .af-carousel::-webkit-scrollbar-thumb{ background: var(--af-line); border-radius: 6px; }
.afina-account .af-carousel-nav{ display: flex; align-items: center; gap: 10px; }
.afina-account .af-carousel-nav button{ width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--af-blue); background: var(--af-white); color: var(--af-blue); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.afina-account .af-carousel-nav button:hover{ background: var(--af-blue); color: #fff; }
.afina-account .af-carousel-nav button svg{ width: 16px; height: 16px; }
.afina-account .af-car-prev svg{ transform: rotate(180deg); }
.afina-account .af-carousel-nav .af-text-btn{ margin-left: 6px; }

/* ------------------------------ Opiniones ------------------------------ */
.afina-account .af-review-tabs{ display: flex; gap: 10px; }
.afina-account .af-review-tabs button{ border: 2px solid var(--af-line); background: var(--af-white); border-radius: 20px; padding: 8px 18px; font: 600 13px "Space Grotesk", Arial, sans-serif; cursor: pointer; color: var(--af-gray); }
.afina-account .af-review-tabs button.active{ border-color: var(--af-blue); background: var(--af-blue); color: #fff; }
.afina-account .af-review-tabs em{ font-style: normal; font-weight: 700; margin-left: 4px; }
.afina-account .af-review-list{ display: none; flex-direction: column; gap: 14px; }
.afina-account .af-review-list.active{ display: flex; }
.afina-account .af-review-list article{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.afina-account .af-review-list article > div{ flex: 1; min-width: 200px; }
.afina-account .af-review-list h3{ font-size: 15px !important; }
.afina-account .af-review-list article span{ color: var(--af-gray); font-size: 13px; }
.afina-account .af-review-thumb{ width: 56px; height: 56px; border-radius: 10px; background: var(--af-bg); overflow: hidden; flex: none; display: grid; place-items: center; }
.afina-account .af-review-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Opt-in de notificaciones push (dos estados: activar / activado + desactivar) */
.afina-account .af-push-optin{ display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.afina-account .af-push-text{ flex: 1; display: flex; flex-direction: column; }
.afina-account .af-push-text strong{ font-size: 15px; }
.afina-account .af-push-text span{ font-size: 13px; color: var(--af-gray); }
.afina-account .af-push-optin .af-btn-primary{ flex: none; }
.afina-account .af-push-on{ flex: none; display: flex; align-items: center; gap: 14px; }
.afina-account .af-push-status{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: #1f9d55; }
.afina-account .af-push-status svg{ width: 18px; height: 18px; }
.afina-account .af-push-disable{ color: var(--af-gray) !important; }
.afina-account .af-push-disable:hover{ color: var(--af-blue) !important; }
/* El atributo hidden debe ganar al display de los botones/paneles. */
.afina-account .af-push-optin[hidden],
.afina-account .af-push-enable[hidden],
.afina-account .af-push-on[hidden]{ display: none !important; }
@media (max-width: 700px){
	.afina-account .af-push-optin{ flex-wrap: wrap; }
	.afina-account .af-push-text{ flex: 1 1 100%; }
	.afina-account .af-push-optin .af-btn-primary{ width: 100%; }
	/* Estado activado: «Notificaciones activadas» y «Desactivar» apilados, sin salirse */
	.afina-account .af-push-on{ width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Feed de notificaciones */
.afina-account .af-notif-list{ display: flex; flex-direction: column; gap: 14px; }
.afina-account .af-notif{ position: relative; }
.afina-account .af-notif-dismiss{ position: absolute; top: 8px; right: 10px; z-index: 2; border: 0; background: none; color: var(--af-gray); font-size: 20px; line-height: 1; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.afina-account .af-notif-dismiss:hover{ background: var(--af-bg); color: var(--af-blue); }
.afina-account .af-notif-row{ display: flex; align-items: center; gap: 16px; padding-right: 22px; }
.afina-account .af-notif-icon{ width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--af-bg); color: var(--af-blue); }
.afina-account .af-notif-icon svg{ width: 22px; height: 22px; }
.afina-account .af-notif-row > div{ flex: 1; min-width: 200px; }
.afina-account .af-notif h3{ font-size: 15px !important; margin: 0 0 2px; }
.afina-account .af-notif p{ font-size: 13px; color: var(--af-ink); margin: 0; }
.afina-account .af-notif small{ display: block; margin-top: 4px; font-size: 11px; color: var(--af-gray); }
.afina-account .af-notif .af-text-btn{ flex: none; white-space: nowrap; }
/* Tarjeta con banner a ancho completo (promociones visuales) */
.afina-account .af-notif-banner-card{ padding: 0; overflow: hidden; }
.afina-account .af-notif-banner-card .af-notif-row{ padding: 18px 22px; }
.afina-account .af-notif-banner{ display: block; }
.afina-account .af-notif-banner img{ display: block; width: 100%; max-height: 200px; object-fit: cover; }
/* Acento de color por tipo en el icono */
.afina-account .af-notif-envio .af-notif-icon{ background: #eaf3ff; color: var(--af-blue); }
.afina-account .af-notif-entregado .af-notif-icon{ background: #e7f6ec; color: #1f9d55; }
.afina-account .af-notif-factura .af-notif-icon{ background: #f1eefb; color: #6b4fc7; }
.afina-account .af-notif-oferta .af-notif-icon{ background: var(--af-yellow); color: var(--af-blue); }
.afina-account .af-notif-comunicado .af-notif-icon{ background: #eaf3ff; color: var(--af-blue); }
@media (max-width: 560px){
	.afina-account .af-notif-row{ flex-wrap: wrap; }
	.afina-account .af-notif .af-text-btn{ width: 100%; justify-content: flex-start; }
}
.afina-account .af-stars-ro{ color: var(--af-yellow); font-size: 17px; letter-spacing: 2px; text-shadow: 0 0 1px rgba(28,36,52,.4); }
.afina-account .af-badge{ font-size: 11px; font-weight: 700; background: var(--af-bg); color: var(--af-gray); border-radius: 20px; padding: 5px 12px; }
.afina-account .af-badge.ok{ background: #eef7ef; color: #1e6b2c; }

/* Formulario de valoración en línea (plugin Afina Reviews) */
/* Gana a `.af-review-list article > div{flex:1}`: el formulario va a su propia línea. */
.afina-account .af-review-list article > .af-review-form{ flex: 0 0 100%; min-width: 0; }
.afina-account .af-review-list article .afina-rev-acc-form{ margin-top: 12px; }
.afina-account .af-review-list article .afina-rev-acc-form .afina-rev-input{ font: 400 14px "Space Grotesk", Arial, sans-serif; }
.afina-account .af-review-reply{ display: block; margin-top: 4px; }

/* ------------------------------ Opiniones · Trusted Shops ------------------------------ */
.afina-account .af-ts-intro{ display: flex; align-items: flex-start; gap: 18px; }
.afina-account .af-ts-badge{ flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #eef2f9; color: var(--af-blue); }
.afina-account .af-ts-badge svg{ width: 26px; height: 26px; }
.afina-account .af-ts-intro h3{ font-size: 19px !important; margin: 2px 0 6px; }
.afina-account .af-ts-intro p{ font-size: 14px; color: var(--af-gray); max-width: 62ch; }
.afina-account .af-ts-widget{ min-height: 60px; }
.afina-account .af-ts-stars{ margin-top: 4px; }
/* Estrellas de ejemplo en la vista previa (en producción las pinta el widget de Trusted Shops) */
.afina-account .af-ts-demo-stars{ color: var(--af-yellow); font-size: 16px; letter-spacing: 2px; text-shadow: 0 0 1px rgba(28,36,52,.4); }
.afina-account .af-ts-demo-stars small{ color: var(--af-gray); font-size: 12px; letter-spacing: normal; margin-left: 6px; text-shadow: none; }

/* ------------------------------ Cupones ------------------------------ */
/* Cupón con forma de tique troquelado. Las muescas son dos círculos del color
   del fondo pisando el borde: por eso la tarjeta va SIN padding ni overflow
   hidden (con overflow:hidden se las come). */
.afina-account .af-coupon{
	--af-coupon-split: 190px;
	display: flex; align-items: stretch; gap: 0; padding: 0; overflow: visible; position: relative;
}
.afina-account .af-coupon::before,
.afina-account .af-coupon::after{
	content: ""; position: absolute; z-index: 2; left: calc(var(--af-coupon-split) - 11px);
	width: 22px; height: 22px; border-radius: 50%; background: var(--af-bg);
}
.afina-account .af-coupon::before{ top: -12px; }
.afina-account .af-coupon::after{ bottom: -12px; }
.afina-account .af-coupon-amount{
	flex: none; width: var(--af-coupon-split); background: var(--af-yellow); color: var(--af-blue);
	border-radius: var(--af-radius) 0 0 var(--af-radius); padding: 30px 16px;
	display: grid; place-content: center; text-align: center;
}
.afina-account .af-coupon-amount span{ display: block; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.afina-account .af-coupon-amount small{ display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; margin-top: 8px; }
.afina-account .af-coupon-body{
	flex: 1; min-width: 0; display: flex; align-items: center; gap: 20px;
	padding: 22px 24px; border-left: 2px dashed rgba(46, 80, 138, .22);
}
.afina-account .af-coupon section{ flex: 1; min-width: 0; }
.afina-account .af-coupon .af-copy{ flex: none; }
.afina-account .af-coupon h3{ font-size: 22px !important; letter-spacing: .04em !important; margin: 2px 0 6px; }
.afina-account .af-coupon p{ font-size: 14px; color: var(--af-gray); }
.afina-account .af-coupon small{ display: block; margin-top: 6px; font-size: 12px; color: var(--af-gray); }

/* ------------------------------ Comunicaciones ------------------------------ */
.afina-account .af-preferences{ display: flex; flex-direction: column; gap: 26px; }
.afina-account .af-preferences h3{ font-size: 17px !important; margin-bottom: 6px; }
.afina-account .af-section-hint{ font-size: 13px; color: var(--af-gray); margin-bottom: 14px; }
.afina-account .af-select-row{ display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin-bottom: 18px; }
.afina-account .af-select-row span{ font: 600 13px "Space Grotesk", Arial, sans-serif; }
.afina-account .af-select-row select{ border: 1px solid var(--af-line); border-radius: 10px; padding: 11px 14px; font: 400 14px "Space Grotesk", Arial, sans-serif; background: var(--af-white); color: var(--af-ink); }
.afina-account .af-select-row select:focus{ outline: none; border-color: var(--af-blue); box-shadow: 0 0 0 3px rgba(46, 80, 138, .15); }
.afina-account .af-interes-label{ display: block; font: 600 13px "Space Grotesk", Arial, sans-serif; margin-bottom: 10px; }
.afina-account .af-interes-label small{ color: var(--af-gray); font-weight: 400; }
.afina-account .af-interes-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.afina-account .af-interes-item{ cursor: pointer; }
.afina-account .af-interes-item input{ position: absolute; opacity: 0; }
.afina-account .af-interes-item span{ display: block; border: 2px solid var(--af-line); border-radius: 10px; padding: 12px 14px; font: 500 14px "Space Grotesk", Arial, sans-serif; color: var(--af-ink); transition: border-color .15s, background .15s; }
.afina-account .af-interes-item input:checked + span{ border-color: var(--af-blue); background: #eef2f9; }
.afina-account .af-interes-item input:focus-visible + span{ box-shadow: 0 0 0 3px rgba(46, 80, 138, .15); }
.afina-account .af-switch{ display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--af-line); cursor: pointer; }
.afina-account .af-switch:last-child{ border-bottom: 0; }
.afina-account .af-switch > span{ flex: 1; }
.afina-account .af-switch b{ display: block; font-size: 14px; }
.afina-account .af-switch small{ color: var(--af-gray); font-size: 12px; }
.afina-account .af-switch input{ position: absolute; opacity: 0; }
.afina-account .af-switch i{ width: 44px; height: 24px; border-radius: 20px; background: var(--af-line); position: relative; transition: background .2s; flex: none; }
.afina-account .af-switch i::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.afina-account .af-switch input:checked + i{ background: var(--af-blue); }
.afina-account .af-switch input:checked + i::after{ left: 23px; }
.afina-account .af-switch.af-locked{ opacity: .6; cursor: default; }
.afina-account .af-channel-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.afina-account .af-channel-grid label{ cursor: pointer; }
.afina-account .af-channel-grid input{ position: absolute; opacity: 0; }
.afina-account .af-channel-grid span{ display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--af-line); border-radius: 12px; padding: 16px; transition: border-color .15s, background .15s; height: 100%; }
.afina-account .af-channel-grid input:checked + span{ border-color: var(--af-blue); background: #eef2f9; }
.afina-account .af-channel-grid svg{ color: var(--af-blue); margin-bottom: 4px; }
.afina-account .af-channel-grid b{ font-size: 14px; }
.afina-account .af-channel-grid small{ color: var(--af-gray); font-size: 12px; word-break: break-all; }
.afina-account .af-unsubscribe{ display: flex; gap: 12px; background: var(--af-bg); border-radius: 12px; padding: 16px; align-items: flex-start; }
.afina-account .af-unsubscribe input{ margin-top: 3px; width: 17px; height: 17px; accent-color: var(--af-blue); }
.afina-account .af-unsubscribe b{ display: block; font-size: 14px; }
.afina-account .af-unsubscribe span{ color: var(--af-gray); font-size: 12px; }

/* ------------------------------ Legal / Ayuda ------------------------------ */
.afina-account .af-legal-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.afina-account .af-legal-link{ display: flex; align-items: center; gap: 16px; transition: transform .15s, border-color .15s; }
.afina-account .af-legal-link:hover{ transform: translateY(-2px); border-color: var(--af-blue); }
.afina-account .af-legal-link > svg{ width: 26px; height: 26px; color: var(--af-blue); }
.afina-account .af-legal-link div{ flex: 1; }
.afina-account .af-legal-link h3{ font-size: 15px !important; color: var(--af-ink); }
.afina-account .af-legal-link p{ font-size: 12px; color: var(--af-gray); margin-top: 2px; }
.afina-account .af-legal-link .af-arrow{ width: 18px; height: 18px; color: var(--af-gray); }
.afina-account .af-contact-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.afina-account .af-contact-card{ display: flex; flex-direction: column; gap: 6px; transition: transform .15s, border-color .15s; }
.afina-account .af-contact-card:hover{ transform: translateY(-2px); border-color: var(--af-blue); }
.afina-account .af-contact-card > span{ width: 46px; height: 46px; border-radius: 12px; background: #eef2f9; color: var(--af-blue); display: grid; place-items: center; margin-bottom: 8px; }
.afina-account .af-contact-card.whatsapp > span{ background: #e9f8ec; color: #1e9e44; }
.afina-account .af-contact-card small{ font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--af-gray); }
.afina-account .af-contact-card h3{ font-size: 19px !important; color: var(--af-ink); }
.afina-account .af-contact-card p{ font-size: 13px; color: var(--af-gray); }
.afina-account .af-contact-card b{ display: inline-flex; align-items: center; gap: 6px; color: var(--af-blue); font-size: 14px; margin-top: 8px; }
.afina-account .af-contact-card b svg{ width: 15px; height: 15px; }
.afina-account .af-help-footer{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.afina-account .af-help-footer > div{ display: flex; align-items: center; gap: 14px; }
.afina-account .af-help-footer svg{ width: 26px; height: 26px; color: var(--af-blue); }
.afina-account .af-help-footer b{ display: block; font-size: 15px; }
.afina-account .af-help-footer small{ color: var(--af-gray); font-size: 13px; }

/* ------------------------------ Desistimiento ------------------------------ */
.afina-account .af-withdrawal{ display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.afina-account .af-legal-intro{ display: flex; gap: 16px; align-items: flex-start; }
.afina-account .af-legal-intro svg{ width: 34px; height: 34px; color: var(--af-blue); flex: none; }
.afina-account .af-legal-intro h3{ font-size: 19px !important; }
.afina-account .af-legal-intro p{ color: var(--af-gray); font-size: 14px; margin-top: 4px; }
.afina-account .af-withdrawal ol{ margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.afina-account .af-withdrawal ol b{ display: block; font-size: 14px; }
.afina-account .af-withdrawal ol span{ color: var(--af-gray); font-size: 13px; }
.afina-account .af-withdraw-order{ display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--af-bg); border-radius: 12px; padding: 16px; flex-wrap: wrap; }
.afina-account .af-withdraw-order small{ display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--af-gray); }
.afina-account .af-withdraw-order span{ display: block; color: var(--af-gray); font-size: 13px; }
.afina-account .af-withdraw-form{ display: flex; flex-direction: column; gap: 14px; }
.afina-account .af-withdraw-form textarea{ width: 100%; border: 1px solid var(--af-line); border-radius: 10px; padding: 12px; font: 400 14px "Space Grotesk", Arial, sans-serif; resize: vertical; }

/* ------------------------------ Formularios ------------------------------ */
.afina-account .af-form{ display: flex; flex-direction: column; gap: 16px; }
.afina-account .af-narrow{ max-width: 480px; }
.afina-account .af-form label, .afina-account .af-content .woocommerce-EditAccountForm label, .afina-account .af-content .woocommerce-address-fields label{ display: block; font: 600 13px "Space Grotesk", Arial, sans-serif; color: var(--af-ink); }
.afina-account .af-form label span{ display: block; margin-bottom: 6px; }
.afina-account .af-form input, .afina-account .af-content .woocommerce-EditAccountForm input.input-text, .afina-account .af-content .woocommerce-address-fields input.input-text, .afina-account .af-content .woocommerce-address-fields select{
	width: 100%; border: 1px solid var(--af-line); border-radius: 10px; padding: 11px 14px;
	font: 400 14px "Space Grotesk", Arial, sans-serif; background: var(--af-white); color: var(--af-ink);
	transition: border-color .15s, box-shadow .15s;
}
.afina-account .af-form input:focus, .afina-account .af-content .woocommerce-EditAccountForm input.input-text:focus, .afina-account .af-content .woocommerce-address-fields input.input-text:focus{
	outline: none; border-color: var(--af-blue); box-shadow: 0 0 0 3px rgba(46, 80, 138, .15);
}
.afina-account .af-field-help{ font-size: 12px; color: var(--af-gray); }
.afina-account .af-edit-account{ max-width: 720px; }
.afina-account .af-edit-account hr{ border: 0; border-top: 1px solid var(--af-line); margin: 4px 0; }
.afina-account .af-type-picker{ display: flex; flex-direction: column; gap: 10px; }
.afina-account .af-type-current{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.afina-account .af-type-current[hidden]{ display: none; }
.afina-account .af-type-options[hidden]{ display: none; }
.afina-account .af-type-badge{ display: inline-flex; align-items: center; gap: 10px; background: var(--af-bg); border: 1px solid var(--af-line); border-radius: 10px; padding: 10px 16px; }
.afina-account .af-type-badge svg{ width: 18px; height: 18px; color: var(--af-blue); }
.afina-account .af-type-badge strong{ font-size: 15px; color: var(--af-ink); }
.afina-account .af-segmented{ display: inline-flex; background: var(--af-bg); border: 1px solid var(--af-line); border-radius: 12px; padding: 4px; gap: 4px; align-self: flex-start; max-width: 100%; flex-wrap: wrap; }
.afina-account .af-segmented label{ position: relative; cursor: pointer; }
.afina-account .af-segmented input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.afina-account .af-segmented span{ display: block; padding: 9px 22px; border-radius: 9px; font: 600 14px "Space Grotesk", Arial, sans-serif; color: var(--af-gray); transition: background .15s, color .15s; }
.afina-account .af-segmented label.active span{ background: var(--af-blue); color: #fff; box-shadow: var(--af-shadow); }
.afina-account .af-fields-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.afina-account .af-fields-grid .af-wide{ grid-column: 1 / -1; }
.afina-account .af-type-fields[hidden]{ display: none; }
.afina-account .af-wp-sync{ display: flex; gap: 12px; align-items: flex-start; background: var(--af-bg); border-radius: 10px; padding: 14px; }
.afina-account .af-wp-sync svg{ color: var(--af-blue); margin-top: 2px; }
.afina-account .af-wp-sync b{ display: block; font-size: 13px; }
.afina-account .af-wp-sync small{ color: var(--af-gray); font-size: 12px; }
.afina-account .af-form-actions{ display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

/* Skin de formularios nativos de WooCommerce dentro del área */
.afina-account .af-content .woocommerce-EditAccountForm, .afina-account .af-content .woocommerce-address-fields, .afina-account .af-content .edit-account{
	background: var(--af-white); border: 1px solid var(--af-line); border-radius: var(--af-radius);
	padding: 24px; box-shadow: var(--af-shadow);
}
.afina-account .af-content .woocommerce-EditAccountForm .form-row, .afina-account .af-content .woocommerce-address-fields .form-row{ margin-bottom: 14px; }
.afina-account .af-content .woocommerce-Button, .afina-account .af-content button[name="save_account_details"], .afina-account .af-content button[name="save_address"]{
	background: var(--af-yellow) !important; color: #fff !important; text-shadow: 0 1px 2px rgba(28, 36, 52, .25);  border: 0 !important;
	border-radius: 10px !important; padding: 12px 24px !important;
	font: 700 14px "Space Grotesk", Arial, sans-serif !important; cursor: pointer;
}
.afina-account .af-content .woocommerce-Addresses .woocommerce-Address{
	background: var(--af-white); border: 1px solid var(--af-line); border-radius: var(--af-radius);
	padding: 24px; box-shadow: var(--af-shadow);
}
.afina-account .af-content .woocommerce-Address-title h3{ font-size: 17px !important; }
.afina-account .af-content .woocommerce-Address-title .edit{ color: var(--af-blue); font-weight: 600; font-size: 13px; }
.afina-account .af-content address{ font-style: normal; color: var(--af-gray); line-height: 1.6; }
.afina-account .af-content .woocommerce-message, .afina-account .af-content .woocommerce-error, .afina-account .af-content .woocommerce-info{ border-radius: 10px; }

/* ------------------------------ Direcciones ------------------------------ */
.afina-account .af-address-section{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.afina-account .af-dir-count{ display: block; margin-top: 4px; font-size: 12px; color: var(--af-gray); }
.afina-account .af-address-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.afina-account .af-address-card{ display: flex; flex-direction: column; gap: 8px; position: relative; }
.afina-account .af-address-kind{ align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .1em; background: var(--af-blue); color: #fff; border-radius: 20px; padding: 4px 10px; }
.afina-account .af-address-card h3{ font-size: 16px !important; }
.afina-account .af-address-card p{ font-size: 14px; color: var(--af-gray); line-height: 1.6; }
.afina-account .af-address-card p b{ color: var(--af-ink); }
.afina-account .af-address-phone{ font-size: 13px; color: var(--af-gray); }
.afina-account .af-address-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.afina-account .af-address-actions .af-btn-outline{ padding: 7px 16px; }
.afina-account .af-danger-link{ color: #b3261e !important; }
.afina-account .af-check-line{ display: flex; align-items: center; gap: 10px; font: 500 14px "Space Grotesk", Arial, sans-serif; color: var(--af-ink); cursor: pointer; }
.afina-account .af-check-line input{ width: 17px; height: 17px; accent-color: var(--af-blue); }

/* ------------------------------ Toast ------------------------------ */
.afina-account .af-toast{
	position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
	background: var(--af-ink); color: #fff; border-radius: 10px; padding: 12px 22px;
	font: 600 14px "Space Grotesk", Arial, sans-serif; opacity: 0; pointer-events: none;
	transition: opacity .25s, transform .25s; z-index: 9999;
}
.afina-account .af-toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1024px) {
	.afina-account.afina-account{ grid-template-columns: 1fr; }
	.afina-account .af-sidebar{ position: static; }
	.afina-account .af-mobile-menu{ display: grid; place-items: center; margin-left: auto; border: 0; background: var(--af-bg); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; }
	.afina-account .af-mobile-menu svg{ transition: transform .2s; }
	.afina-account .af-sidebar.open .af-mobile-menu svg{ transform: rotate(180deg); }
	.afina-account .af-account-nav, .afina-account .af-help-card, .afina-account .af-advisor{ display: none; }
	.afina-account .af-sidebar.open .af-account-nav{ display: flex; }
	.afina-account .af-sidebar.open .af-help-card{ display: flex; }
	.afina-account .af-sidebar.open .af-advisor{ display: block; }
	.afina-account .af-level-card{ grid-template-columns: 1fr; }
	.afina-account .af-order-row{ grid-template-columns: 1fr 1fr; }
	.afina-account .af-row-actions{ justify-content: flex-start; grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.afina-account .af-page-heading h2{ font-size: 24px !important; }
	.afina-account .af-panel{ padding: 18px; }
	.afina-account .af-level-main, .afina-account .af-benefits{ padding: 20px; }
	.afina-account .af-order-top{ gap: 16px; }
	.afina-account .af-order-progress i span{ font-size: 10px; }
	.afina-account .af-order-actions{ margin-left: 0; }
	.afina-account .af-order-row{ grid-template-columns: 1fr; gap: 10px; }
	/* Cupón en columna: el troquelado pasa a horizontal y se quitan las muescas
	   (irían en un punto que depende del alto del bloque de importe). Ojo: la
	   regla .af-panel de arriba le devuelve el padding, hay que anularlo. */
	.afina-account .af-coupon{ flex-direction: column; align-items: stretch; padding: 0; }
	.afina-account .af-coupon::before, .afina-account .af-coupon::after{ display: none; }
	.afina-account .af-coupon-amount{ width: auto; padding: 22px 16px; border-radius: var(--af-radius) var(--af-radius) 0 0; }
	.afina-account .af-coupon-body{ flex-direction: column; align-items: flex-start; padding: 18px;
		border-left: 0; border-top: 2px dashed rgba(46, 80, 138, .22); }
}

/* ============================================================
   Endurecimiento final: el tema (Astra/Elementor) fuerza el color
   de los enlaces <a> con !important. Reafirmamos los colores de los
   enlaces del área que no eran botones, por encima de ese !important.
   ============================================================ */
.afina-account .af-nav-item { color: var(--af-ink) !important; }
.afina-account .af-nav-item:hover { color: var(--af-blue) !important; }
.afina-account .af-nav-item.active { color: #fff !important; }
.afina-account .af-nav-item.af-logout { color: #b3261e !important; }
.afina-account .af-nav-group-title { color: var(--af-ink) !important; }
.afina-account .af-nav-children .af-nav-item { color: var(--af-gray) !important; }
.afina-account .af-nav-children .af-nav-item:hover { color: var(--af-blue) !important; }
.afina-account .af-nav-children .af-nav-item.active { color: #fff !important; }
.afina-account .af-help-card a { color: var(--af-yellow) !important; }
.afina-account .af-product-card h3 a { color: var(--af-ink) !important; }
.afina-account .af-legal-link h3, .afina-account .af-contact-card h3 { color: var(--af-ink) !important; }
.afina-account .af-text-btn { color: var(--af-blue) !important; }

/* ============================================================
   El reset all:revert deja visibles los textos solo-lector (WooCommerce
   añade .screen-reader-text con "Rango de precios…" en los precios). Se
   vuelven a ocultar visualmente dentro del área.
   ============================================================ */
.afina-account .screen-reader-text,
.afina-account .sr-only,
.afina-account .elementor-screen-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ============================================================
   Escritorio · ajustes solicitados
   ============================================================ */
/* Cabecera: "Hola" + botón en una línea, subtítulo debajo, y sube la tarjeta */
.afina-account .af-dashboard-heading { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: -6px; }
.afina-account .af-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.afina-account .af-heading-sub { color: var(--af-gray); font-size: 14px; }
/* Campanita de notificaciones sobre «Ir a la tienda» */
.afina-account .af-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.afina-account .af-bell { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--af-line); background: var(--af-white); color: var(--af-blue); display: grid; place-items: center; transition: border-color .15s, background .15s; }
.afina-account .af-bell svg { width: 20px; height: 20px; }
.afina-account .af-bell:hover { border-color: var(--af-blue); }
.afina-account .af-bell.has-notif { border-color: var(--af-blue); }
.afina-account .af-bell-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--af-yellow); color: var(--af-blue); font: 700 11px/20px "Space Grotesk", Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--af-white); }

/* Título del nivel en blanco (el tema fuerza h3 en azul = invisible sobre azul) */
.afina-account .af-level-title h3 { color: #fff !important; }
.afina-account .af-level-title small { color: rgba(255, 255, 255, .8) !important; }
/* Enlace "Ver programa completo" dentro de la tarjeta oscura */
.afina-account .af-benefits-link { color: var(--af-yellow) !important; margin-top: 12px; align-self: flex-start; }

/* Secciones: título y enlace SIEMPRE en la misma línea */
.afina-account .af-section-title { flex-wrap: nowrap; align-items: center; }
.afina-account .af-section-title > div { min-width: 0; }
.afina-account .af-section-title .af-text-btn { flex: none; white-space: nowrap; }

/* Tarjeta de último pedido más compacta y en una sola fila */
.afina-account .af-order-card { gap: 14px; padding: 18px 24px; }
.afina-account .af-order-body { gap: 16px; flex-wrap: nowrap; align-items: center; }
.afina-account .af-product-copy { flex: 0 1 250px; min-width: 0; }
.afina-account .af-product-copy strong { display: block; line-height: 1.25; }
.afina-account .af-more-products { flex: none; }
.afina-account .af-order-actions { flex: none; }
.afina-account .af-order-progress { padding-top: 14px; }
@media (max-width: 900px) {
	.afina-account .af-order-body { flex-wrap: wrap; }
	.afina-account .af-product-copy { flex: 1 1 200px; }
}

/* ============================================================
   Ajustes 2ª ronda escritorio
   ============================================================ */
/* El tema fuerza márgenes en los títulos con !important (empujaba el subtítulo
   y separaba las tarjetas). Los anulamos y restauramos los pocos que sí llevan. */
.afina-account.afina-account :where(h1, h2, h3, h4, h5, h6) { margin: 0 !important; }
.afina-account .af-coupon h3 { margin: 2px 0 6px !important; }
.afina-account .af-ts-intro h3 { margin: 2px 0 6px !important; }

/* Cabecera: subtítulo pegado a "Hola", con un espacio limpio hasta la tarjeta */
.afina-account .af-dashboard-heading { justify-content: flex-start; gap: 4px; margin-bottom: 0; }
.afina-account .af-heading-sub { margin: 0; }

/* Los títulos de grupo del menú nunca deben heredar el fondo azul de botón del tema */
.afina-account .af-nav-group-title { background: transparent !important; }
.afina-account .af-nav-group-title:hover { background: var(--af-bg) !important; }

/* Imagen de producto sobre blanco (evita las barras grises del contenedor) */
.afina-account .af-product-visual { background: #fff; padding: 10px; }

/* Menú: el elemento activo/fijo en amarillo con texto blanco */
.afina-account .af-nav-item.active,
.afina-account .af-nav-item.active:hover,
.afina-account .af-nav-children .af-nav-item.active {
	background: var(--af-yellow) !important;
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(28, 36, 52, .35);
}

/* Menos espacio entre cada título de sección y su tarjeta (la mitad) */
.afina-account .af-section-title { margin-bottom: -11px; }

/* Tarjetas del carrusel de productos (estilo ficha de tienda) */
.afina-account .af-product-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--af-gray); }
.afina-account .af-product-card .af-variant { font-size: 12px; color: var(--af-gray); margin: 0; }
.afina-account .af-product-card .af-price { display: flex; flex-direction: column; gap: 2px; }
.afina-account .af-price-old { display: flex; align-items: center; gap: 8px; }
.afina-account .af-price-old del { color: var(--af-gray); font-size: 13px; font-weight: 400; text-decoration: line-through; }
.afina-account .af-price-now { display: flex; align-items: baseline; gap: 8px; }
.afina-account .af-price-now ins { text-decoration: none; color: var(--af-blue); font-size: 18px; font-weight: 700; }
.afina-account .af-price-now small { color: var(--af-gray); font-size: 11px; font-weight: 400; }

/* ============================================================
   Precio de ficha con descuento de afina-pricing + espaciados
   ============================================================ */
/* Precio: usa el get_price_html() de la tienda (del/ins + .afp-pct-badge) */
/* Grid 2 columnas: fila 1 = anterior + descuento, fila 2 = precio + IVA.
   Sin descuento, solo hay precio + IVA en una única línea. */
.afina-account .af-product-card .af-price-ficha { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 8px; row-gap: 2px; color: var(--af-blue); font-weight: 700; font-size: 18px; }
.afina-account .af-price-ficha .woocommerce-Price-amount { color: inherit !important; }
.afina-account .af-price-ficha del { color: var(--af-gray) !important; font-size: 13px; font-weight: 400; text-decoration: line-through; }
.afina-account .af-price-ficha .afp-pct-badge { justify-self: start; background: var(--af-yellow); color: #fff; text-shadow: 0 1px 2px rgba(28, 36, 52, .3); font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.afina-account .af-price-ficha ins { text-decoration: none; color: var(--af-blue); }
.afina-account .af-price-ficha .af-iva { color: var(--af-gray); font-size: 11px; font-weight: 400; }
.afina-account .af-price-ficha .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }

/* El tema fuerza márgenes en p/listas con !important (rompía los espaciados).
   Los anulamos y restauramos los pocos intencionados. */
.afina-account.afina-account :where(p, ul, ol, li, figure, dl, dd) { margin: 0 !important; }
.afina-account .af-page-heading p { margin: 0 0 4px !important; }
.afina-account .af-legal-intro p { margin-top: 4px !important; }
.afina-account .af-withdrawal ol { padding-left: 20px; }

/* Título de la tarjeta de soporte en blanco (el tema fuerza el color y quedaba invisible) */
.afina-account .af-help-card strong { color: #fff !important; }
.afina-account .af-help-card span { color: rgba(255,255,255,.85) !important; }

/* ============================================================
   FIX espaciado en producción: WooCommerce envuelve el contenido de la
   cuenta en .woocommerce-MyAccount-content-wrapper (bloque, sin gap), así
   que el flex/gap de .af-content no llegaba a las secciones. Se lo damos
   a ese wrapper para que los espacios sean como en la vista previa.
   ============================================================ */
/* Además, el tema le pinta fondo gris, borde y padding (era el recuadro gris
   que envolvía el contenido y no existe en la vista previa): se anula. */
.afina-account .woocommerce-MyAccount-content-wrapper {
	display: flex; flex-direction: column; gap: 22px; min-width: 0;
	background: none !important; border: 0 !important; border-radius: 0 !important;
	padding: 0 !important; box-shadow: none !important;
}
/* El sufijo "IVA incluido" que añade la tienda, en gris pequeño */
.afina-account .af-price-ficha .woocommerce-Price-taxLabel,
.afina-account .af-price-ficha small { color: var(--af-gray) !important; font-size: 11px; font-weight: 400; }

/* Variable sin resolver: no hay badge de descuento, así que el precio anterior
   ocupa su fila entera y deja precio + «IVA incluido» juntos en la siguiente,
   igual que en el resto de tarjetas. */
.afina-account .af-price-ficha.af-price-desde > del { grid-column: 1 / -1; }

/* ============================================================
   Armonía del carrusel: tarjetas de producto uniformes (nombre a 2 líneas
   fijas, variante reservada, precio a altura fija y botón siempre abajo).
   ============================================================ */
.afina-account .af-carousel .af-product-card { gap: 6px; }
.afina-account .af-product-card .af-product-cat { min-height: 1.1em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.afina-account .af-product-card h3 { min-height: 2.5em; margin: 0; }
.afina-account .af-product-card h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.afina-account .af-product-card .af-variant { min-height: 1.1em; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.afina-account .af-product-card .af-price-ficha { margin-top: 2px; margin-bottom: 4px; }
.afina-account .af-product-card .af-btn-primary,
.afina-account .af-product-card .af-disabled { margin-top: auto; }
/* Imagen: caja cuadrada uniforme con la imagen centrada */
.afina-account .af-product-card .af-product-visual { aspect-ratio: 1 / 1; display: grid; place-items: center; background: #fff; padding: 12px; }
.afina-account .af-product-card .af-product-visual img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   Título de producto en negrita + selector de cantidad en la tarjeta
   ============================================================ */
.afina-account .af-product-card h3, .afina-account .af-product-card h3 a { font-weight: 700 !important; color: var(--af-ink) !important; }

/* Selector de cantidad A LA IZQUIERDA del botón (misma fila) */
.afina-account .af-add-form { margin-top: auto; display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.afina-account .af-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--af-line); border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.afina-account .af-qty-btn { width: 26px; background: var(--af-bg); color: var(--af-blue); font-size: 15px; font-weight: 700; display: grid; place-items: center; cursor: pointer; border: 0; line-height: 1; }
.afina-account .af-qty-btn:hover { background: var(--af-line); }
.afina-account .af-qty-input { width: 34px; text-align: center; border: 0; border-inline: 1px solid var(--af-line); font: 600 14px "Space Grotesk", Arial, sans-serif; color: var(--af-ink); background: #fff; -moz-appearance: textfield; appearance: textfield; }
.afina-account .af-qty-input::-webkit-outer-spin-button, .afina-account .af-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.afina-account .af-add-form .af-add-btn { flex: 1; min-width: 0; padding: 10px 8px; font-size: 13px; white-space: nowrap; }

/* Estado "añadiendo…" del botón de carrito */
.afina-account .af-add-btn.af-loading { opacity: .7; pointer-events: none; position: relative; color: transparent !important; }
.afina-account .af-add-btn.af-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: af-spin .6s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }

/* Spinner también en botones outline (p. ej. "Volver a pedir") */
.afina-account .af-btn-outline.af-loading { color: transparent !important; pointer-events: none; position: relative; }
.afina-account .af-btn-outline.af-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid rgba(46,80,138,.3); border-top-color: var(--af-blue); border-radius: 50%; animation: af-spin .6s linear infinite; }

/* ============================================================
   Flechas del carrusel superpuestas en el centro (todos los tamaños)
   ============================================================ */
.afina-account .af-carousel-wrap { position: relative; }
.afina-account .af-car-prev,
.afina-account .af-car-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--af-white); color: var(--af-blue); box-shadow: 0 2px 12px rgba(28,36,52,.2); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.afina-account .af-car-prev { left: -4px; }
.afina-account .af-car-next { right: -4px; }
.afina-account .af-car-prev svg,
.afina-account .af-car-next svg { width: 18px; height: 18px; }
.afina-account .af-car-prev svg { transform: rotate(180deg); }
.afina-account .af-car-prev:hover,
.afina-account .af-car-next:hover { background: var(--af-blue); color: #fff; }

/* ============================================================
   Móvil · ajustes de Inicio
   ============================================================ */
@media (max-width: 700px) {
	/* Botón de menú con etiqueta visible «Menú» */
	.afina-account .af-mobile-menu { width: auto; gap: 6px; padding: 0 12px; font: 600 13px "Space Grotesk", Arial, sans-serif; color: var(--af-blue); }
	.afina-account .af-mobile-menu-label { display: inline; }
	.afina-account .af-sidebar.open .af-mobile-menu-label::after { content: ""; }

	/* Cabecera: saludo a la izquierda, campana arriba-derecha y «Ir a la tienda» debajo */
	.afina-account .af-heading-row { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
	.afina-account .af-heading-row > div:first-child { flex: 1; min-width: 0; }
	.afina-account .af-heading-actions { align-items: flex-end; flex: none; }

	/* Títulos de sección SIEMPRE en una línea (título + enlace) */
	.afina-account .af-section-title { flex-wrap: nowrap; align-items: baseline; gap: 10px; }
	.afina-account .af-section-title > div { min-width: 0; }
	.afina-account .af-section-title h3 { font-size: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.afina-account .af-section-title .af-text-btn { flex: none; font-size: 12.5px; }

	/* Tarjeta de último pedido: cabecera ordenada y botones centrados dentro */
	.afina-account .af-order-top { flex-wrap: wrap; gap: 14px 22px; }
	.afina-account .af-order-top .af-status { margin-left: 0; }
	.afina-account .af-order-actions { width: 100%; flex-wrap: wrap; justify-content: center; gap: 10px; margin-left: 0; }
	.afina-account .af-order-actions .af-btn-primary,
	.afina-account .af-order-actions .af-btn-outline { flex: 1 1 auto; text-align: center; justify-content: center; }
	/* Pasos del pedido en una sola línea cada uno */
	.afina-account .af-order-progress i span { white-space: nowrap; font-size: 10px; }
}

/* ============================================================
   Móvil · «Productos comprados» compacto (miniatura + datos al lado)
   para que la lista no se haga eterna con muchos productos.
   ============================================================ */
@media (max-width: 600px) {
	.afina-account .af-purchased-grid { grid-template-columns: 1fr; gap: 12px; }
	/* Miniatura flotando a la izquierda; datos al lado y botón debajo a lo ancho. */
	.afina-account .af-purchased-grid .af-product-card { display: block; padding: 14px; }
	.afina-account .af-purchased-grid .af-product-visual { float: left; width: 84px; height: 84px; aspect-ratio: auto; margin: 0 14px 6px 0; padding: 6px; }
	.afina-account .af-purchased-grid .af-product-card > * { min-height: 0 !important; }
	.afina-account .af-purchased-grid .af-product-card .af-product-cat { white-space: normal; }
	.afina-account .af-purchased-grid .af-product-card h3 { font-size: 14px !important; margin: 0 0 2px !important; }
	.afina-account .af-purchased-grid .af-product-card h3 a { -webkit-line-clamp: 2; }
	.afina-account .af-purchased-grid .af-add-form { clear: left; margin-top: 10px; }
}

/* ============================================================
   PANTALLA DE ACCESO (login) — .afina-auth  [v1.9.5]
   ============================================================ */
.afina-auth{
	--af-azul:#2E508A; --af-azul-osc:#243f6d; --af-azul-claro:#3a63a8;
	--af-amarillo:#FFD931; --af-gris:#686868; --af-linea:#e6e9f0; --af-tinta:#1f2a44;
	font-family:'Space Grotesk',Arial,sans-serif;color:var(--af-tinta);
	width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box;
}
.afina-auth *{box-sizing:border-box}
.afina-auth .af-auth-card{
	display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border-radius:22px;overflow:hidden;
	box-shadow:0 24px 60px -28px rgba(31,42,68,.35);border:1px solid var(--af-linea);
}

/* La pantalla de login vive dentro del widget "Mi cuenta" de Elementor, que
   estaba en una media columna (la otra mitad era el registro). Forzamos a que
   esa columna/contenedor y el widget ocupen todo el ancho, y ocultamos la
   columna sobrante del registro, para que la tarjeta quede centrada y ancha. */
body.woocommerce-account .elementor-widget-woocommerce-my-account{width:100% !important}
body.woocommerce-account .elementor-column:has(.elementor-widget-woocommerce-my-account),
body.woocommerce-account .elementor-col-50:has(.elementor-widget-woocommerce-my-account),
body.woocommerce-account [data-element_type="column"]:has(.elementor-widget-woocommerce-my-account),
body.woocommerce-account .e-con-inner:has(.elementor-widget-woocommerce-my-account) > .e-con,
body.woocommerce-account .e-con:has(> .e-con-inner .elementor-widget-woocommerce-my-account){
	width:100% !important;max-width:100% !important;flex:0 0 100% !important;
}
body.woocommerce-account .elementor-column:has(.elementor-button[href*="registrar"]):not(:has(.elementor-widget-woocommerce-my-account)),
body.woocommerce-account [data-element_type="column"]:has(.elementor-button[href*="registrar"]):not(:has(.elementor-widget-woocommerce-my-account)){
	display:none !important;
}
/* En la pantalla de LOGIN (no logueado) oculta el encabezado «Iniciar sesión» +
   la línea (divisor) de Elementor que hay sobre el widget: la tarjeta ya los trae. */
body.woocommerce-account:not(.logged-in) .e-con:has(> .elementor-widget-woocommerce-my-account) > .elementor-widget-heading,
body.woocommerce-account:not(.logged-in) .e-con:has(> .elementor-widget-woocommerce-my-account) > .elementor-widget-divider,
body.woocommerce-account:not(.logged-in) .elementor-column:has(.elementor-widget-woocommerce-my-account) > .elementor-widget-wrap > .elementor-widget-heading,
body.woocommerce-account:not(.logged-in) .elementor-column:has(.elementor-widget-woocommerce-my-account) > .elementor-widget-wrap > .elementor-widget-divider{
	display:none !important;
}

/* ---- Panel de marca ---- */
.afina-auth .af-auth-hero{
	position:relative;padding:48px 44px;color:#fff;overflow:hidden;
	display:flex;flex-direction:column;justify-content:center;
	background:linear-gradient(150deg,var(--af-azul) 0%,var(--af-azul-osc) 100%);
}
.afina-auth .af-auth-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;
	background:radial-gradient(circle at 30% 30%,rgba(255,217,49,.35),transparent 65%)}
.afina-auth .af-auth-hero::before{content:"";position:absolute;left:-70px;bottom:-70px;width:220px;height:220px;border-radius:50%;
	background:rgba(255,255,255,.05)}
.afina-auth .af-auth-brand{position:relative;display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:.02em;margin:0 !important}
.afina-auth .af-auth-dot{width:11px;height:11px;border-radius:50%;background:var(--af-amarillo);display:inline-block}
.afina-auth .af-auth-claim{position:relative;font-size:28px;line-height:1.22;margin:20px 0 14px !important;font-weight:700;color:#fff !important;text-transform:none !important}
.afina-auth .af-auth-claim span{color:var(--af-amarillo) !important}
.afina-auth .af-auth-lead{position:relative;color:rgba(255,255,255,.82) !important;font-size:15.5px;line-height:1.55;margin:0 0 26px !important;max-width:400px}
.afina-auth .af-auth-benefits{position:relative;list-style:none;padding:0;margin:0 0 30px !important;display:grid;gap:16px}
.afina-auth .af-auth-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:rgba(255,255,255,.92)}
.afina-auth .af-auth-benefits li b{color:#fff;font-weight:600}
.afina-auth .af-auth-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--af-amarillo);
	display:flex;align-items:center;justify-content:center;color:var(--af-azul-osc);font-weight:700;font-size:14px;line-height:1;
	box-shadow:0 4px 12px -4px rgba(255,217,49,.7)}
.afina-auth .af-auth-cta{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--af-amarillo);
	color:var(--af-azul-osc) !important;text-decoration:none !important;font-weight:700;font-size:15px;padding:14px 26px;border-radius:12px;margin:0 !important;
	box-shadow:0 12px 24px -10px rgba(255,217,49,.8);transition:transform .15s;text-transform:none !important}
.afina-auth .af-auth-cta:hover{transform:translateY(-2px);color:var(--af-azul-osc) !important;background:var(--af-amarillo)}
.afina-auth .af-auth-trust{position:relative;display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:20px;
	border-top:1px solid rgba(255,255,255,.15);font-size:12.5px;color:rgba(255,255,255,.8);flex-wrap:wrap}
.afina-auth .af-auth-ts{display:flex;align-items:center;gap:7px}
.afina-auth .af-auth-stars{color:var(--af-amarillo);letter-spacing:2px;font-size:14px}

/* ---- Formulario ---- */
.afina-auth .af-auth-panel{padding:46px 44px}
.afina-auth .af-auth-eyebrow{font-size:12px;letter-spacing:.18em;color:var(--af-gris);text-transform:uppercase;font-weight:600;margin:0 0 4px}
.afina-auth .af-auth-title{font-size:24px;font-weight:700;margin:0 0 4px;color:var(--af-tinta)}
.afina-auth .af-auth-sub{font-size:14px;color:var(--af-gris);margin:0 0 26px}
.afina-auth .af-auth-form{margin:0}
.afina-auth .af-auth-field{margin-bottom:16px}
.afina-auth .af-auth-field label{display:block;font-size:13px;font-weight:600;color:var(--af-tinta);margin-bottom:7px}
.afina-auth .af-auth-req{color:#d64545}
.afina-auth .af-auth-input{position:relative;display:block}
.afina-auth .af-auth-input>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
	stroke:var(--af-gris);fill:none;stroke-width:1.8;pointer-events:none}
.afina-auth .af-auth-input input{width:100% !important;margin:0 !important;padding:13px 44px 13px 42px !important;
	border:1.5px solid var(--af-linea) !important;border-radius:11px !important;font-size:15px;font-family:inherit;
	background:#fafbfd !important;color:var(--af-tinta);transition:border-color .15s,box-shadow .15s;min-height:0;line-height:1.3}
.afina-auth .af-auth-input input:focus{outline:none;border-color:var(--af-azul) !important;background:#fff !important;
	box-shadow:0 0 0 4px rgba(46,80,138,.12) !important}
.afina-auth .af-auth-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;
	display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
.afina-auth .af-auth-eye svg{width:18px;height:18px;stroke:var(--af-gris);fill:none;stroke-width:1.8}
.afina-auth .af-auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:4px 0 22px}
.afina-auth .af-auth-remember{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--af-gris);cursor:pointer;margin:0}
.afina-auth .af-auth-remember input{width:17px;height:17px;accent-color:var(--af-azul);margin:0}
.afina-auth .af-auth-forgot{font-size:13.5px;color:var(--af-azul) !important;text-decoration:none;font-weight:600}
.afina-auth .af-auth-forgot:hover{text-decoration:underline}
.afina-auth .af-auth-submit{width:100% !important;border:none !important;background:var(--af-azul) !important;color:#fff !important;
	font-family:inherit;font-weight:700;font-size:16px;padding:15px !important;border-radius:12px !important;cursor:pointer;
	transition:background .15s,transform .15s;box-shadow:0 14px 26px -12px rgba(46,80,138,.7);letter-spacing:0;text-transform:none;margin:0}
.afina-auth .af-auth-submit:hover{background:var(--af-azul-claro) !important;transform:translateY(-1px)}
.afina-auth .af-auth-foot{text-align:center;font-size:14px;color:var(--af-gris);margin:26px 0 0}
.afina-auth .af-auth-foot a{color:var(--af-azul) !important;font-weight:700;text-decoration:none}
.afina-auth .af-auth-foot a:hover{text-decoration:underline}

/* Oculta el toggle de contraseña NATIVO de WooCommerce (cajita azul .show-password-input);
   usamos nuestro propio ojo .af-auth-eye. WC envuelve el input en span.password-input. */
.afina-auth .show-password-input{display:none !important}
.afina-auth .password-input{position:relative;display:block;width:100%;margin:0}
/* Oculta elementos vacíos que otros plugins inyectan en el hook del form */
.afina-auth .af-auth-form > a:empty,
.afina-auth .af-auth-form > button:empty,
.afina-auth .af-auth-form > div:empty,
.afina-auth .af-auth-form > p:empty{display:none !important}

/* ---- Botón Google inyectado por el coupon-popup (login_form_end) ---- */
.afina-auth .afina-google-myaccount-login{display:none !important} /* variante del bridge (duplicado) */
.afina-auth .acp-ma-sep{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--af-gris);font-size:13px}
.afina-auth .acp-ma-sep::before,.afina-auth .acp-ma-sep::after{content:"";height:1px;background:var(--af-linea);flex:1}
.afina-auth .acp-ma-google-btn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;background:#fff;
	border:1.5px solid var(--af-linea);border-radius:12px;padding:13px;font-size:15px;font-weight:600;color:var(--af-tinta) !important;
	text-decoration:none !important;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;margin:0}
.afina-auth .acp-ma-google-btn:hover{border-color:#c9d0de;background:#fff;color:var(--af-tinta) !important;box-shadow:0 6px 16px -8px rgba(31,42,68,.25)}

/* ---- Responsive ---- */
@media (max-width:820px){
	.afina-auth .af-auth-card{grid-template-columns:1fr}
	.afina-auth .af-auth-panel{order:1;padding:32px 24px}
	.afina-auth .af-auth-hero{order:2;padding:34px 28px}
	.afina-auth .af-auth-benefits{gap:10px}
}