/**
 * Fanor Mi Perfil. Handle 'fanor-perfil' (depende de 'fanor-premium-tokens').
 *
 * Prefijo propio `.fanor-pf-perfil-`. Todas las reglas se cuelgan de `.fanor-pf-perfil` y nombran
 * también la clase del elemento, de modo que la especificidad (0,2,0) gana a las reglas
 * genéricas de `input`, `button` o `a` que traiga el tema sin necesidad de `!important`.
 *
 * La tipografía es la del sitio y llega por `fanor-fuentes` (tokens `--fanor-font-*`), del que
 * cuelga la capa de tokens; aquí no se declara ningún @font-face ni se pide nada a Google.
 *
 * Los colores y medidas llegan como variables desde los controles de Elementor
 * (`selectors`); los valores escritos aquí son los de partida del diseño.
 *
 * La ventana de dirección es `position: fixed` y vive dentro del widget: si se le aplica una
 * animación o un `transform` de Elementor al widget o a su contenedor, el navegador la
 * anclará a ese contenedor en vez de a la pantalla. Es la misma advertencia que el archivo
 * de categoría.
 */

.fanor-pf-perfil {
	width: 100%;
	background-color: var(--fanor-pf-fondo, #FFFFFF);

	/* Contenedor */
	--fanor-pf-max: 80rem;
	--fanor-pf-pad-x: 24px;
	--fanor-pf-pad-b: 80px;
	--fanor-pf-side-w: 280px;
	--fanor-pf-gap: 32px;

	/* Paleta */
	--fanor-pf-tinta: #1A1A1A;
	--fanor-pf-linea: #E5E5E5;
	--fanor-pf-oro: #CC0000;
	--fanor-pf-oro-pale: #FDECEC;
	--fanor-pf-gris: #888888;
	--fanor-pf-gris-2: #555555;
	--fanor-pf-gris-3: #C9C9C9;  /* Borde de campo editable (ver .is-editable) */
	/* Línea interior: separa la cabecera de un panel de su cuerpo. Más clara que el borde
	   exterior (--fanor-pf-linea) para que se lea como una división y no como otro marco. */
	--fanor-pf-sep: #EEEEEE;
	--fanor-pf-rojo: #CC0000;
	--fanor-pf-caja-bg: #FFFFFF;
	--fanor-pf-panel-bg: #FFFFFF;
	--fanor-pf-panel-r: 8px;
	/* Pedidos. El gris es el de las bandas que enmarcan contenido dentro de un panel: la
	   cabecera y el pie de cada tarjeta, y el carril del detalle. Un punto por debajo del
	   blanco, lo justo para que se lean como marco y no como otra caja. */
	--fanor-pf-ped-banda-bg: #F6F7F9;
	--fanor-pf-ped-carril: 320px;

	/* Avatar */
	--fanor-pf-av-1: #A80000;
	--fanor-pf-av-2: #E01B1B;

	/* Pantalla de acceso */
	--fanor-pf-acc-w: 460px;
	--fanor-pf-acc-aire: 56px;
	--fanor-pf-acc-cta-bg: #1A1A1A;
	--fanor-pf-acc-cta-txt: #FFFFFF;
	--fanor-pf-acc-cta-hover: #CC0000;
	--fanor-pf-acc-cta-r: 4px;
}

.fanor-pf-perfil,
.fanor-pf-perfil *,
.fanor-pf-perfil *::before,
.fanor-pf-perfil *::after {
	box-sizing: border-box;
}

/* No todos los temas la traen; sin ella los textos de lector de pantalla se verían. */
.fanor-pf-perfil .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Rejilla general ─────────────────────────────────────────────────────── */

/* El tope es la columna MÁS sus dos márgenes, igual que en el checkout: así el contenido
   mide exactamente `--fanor-pf-max` (80rem, el ancho del header y del pie) y arranca en la
   misma vertical que el logo, en vez de quedar metido hacia dentro por el padding. */
.fanor-pf-perfil .fanor-pf-perfil__grid {
	max-width: calc(var(--fanor-pf-max, 80rem) + var(--fanor-pf-pad-x, 24px) * 2);
	margin: 0 auto;
	padding: var(--fanor-pf-pad-x, 24px);
	padding-bottom: var(--fanor-pf-pad-b, 80px);
	display: grid;
	grid-template-columns: var(--fanor-pf-side-w, 280px) 1fr;
	gap: var(--fanor-pf-gap, 32px);
	align-items: start;
}

/* ── Columna lateral ─────────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-perfil__side {
	position: sticky;
	top: 90px;
}

/* Tarjeta de usuario */

/*
 * La ficha del usuario y el menú son UNA sola tarjeta, separadas por una línea, no dos
 * cajas flotando. Es como lo tenía la tienda, y el resultado es una columna con una
 * silueta clara en vez de un montón de rectángulos redondeados.
 */
.fanor-pf-perfil .fanor-pf-perfil__user {
	background: var(--fanor-pf-caja-bg, #fff);
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	padding: 28px 24px;
	margin-bottom: 0;
	text-align: center;
}

/*
 * Avatar en rojo PLANO, no en degradado.
 *
 * El degradado venía del sistema de origen, donde el acento era un dorado que pedía
 * volumen. Fanor no usa degradados en ninguna parte: sus rojos son planos —el botón de
 * las tarjetas, la barra superior, el buscador—, y uno degradado aquí cantaba.
 */
.fanor-pf-perfil .fanor-pf-perfil__avatar {
	position: relative;
	display: block;
	width: 76px;
	height: 76px;
	margin: 0 auto 14px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fanor-pf-oro, #CC0000);
}

.fanor-pf-perfil .fanor-pf-perfil__iniciales {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	letter-spacing: .03em;
}

/* Va encima de las iniciales: si la foto no existe, el JS la retira y quedan a la vista. */
.fanor-pf-perfil .fanor-pf-perfil__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.fanor-pf-perfil .fanor-pf-perfil__nombre {
	margin: 0 0 4px;
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

.fanor-pf-perfil .fanor-pf-perfil__email {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 12px;
	line-height: 1.4;
	color: var(--fanor-pf-gris, #888);
	word-break: break-word;
}

.fanor-pf-perfil .fanor-pf-perfil__badge {
	display: inline-block;
	margin-top: 12px;
	background: var(--fanor-pf-badge-bg, #FDECEC);
	border: 1px solid var(--fanor-pf-badge-bd, rgba(204, 0, 0, .22));
	border-radius: 20px;
	padding: 4px 12px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fanor-pf-badge-txt, #CC0000);
}

/* Menú de cuenta */

.fanor-pf-perfil .fanor-pf-perfil__menu {
	background: var(--fanor-pf-caja-bg, #fff);
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-top-color: var(--fanor-pf-sep, #EEEEEE);
	border-radius: 0 0 8px 8px;
	overflow: hidden;
	padding: 10px 0;
}

/*
 * El menú va en Roboto normal, NO en condensada mayúscula.
 *
 * Es la única lista de navegación de la pantalla y compite con los títulos: con seis
 * entradas en versalitas apretadas se leía como otro encabezado más y la jerarquía se
 * aplanaba. En condensada mayúscula se quedan los TÍTULOS; la navegación es texto normal,
 * como en el área de cliente que la tienda ya tenía.
 */
.fanor-pf-perfil .fanor-pf-perfil__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 24px;
	border-left: 3px solid transparent;
	border-bottom: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--fanor-pf-item, #444);
	text-decoration: none;
	transition: color .18s var(--fnp-e-soft, ease), border-color .18s var(--fnp-e-soft, ease), background-color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__item:last-child {
	border-bottom: 0;
}

.fanor-pf-perfil .fanor-pf-perfil__item:hover,
.fanor-pf-perfil .fanor-pf-perfil__item:focus-visible {
	color: var(--fanor-pf-item-hover, #CC0000);
	border-left-color: var(--fanor-pf-item-hover, #CC0000);
}

.fanor-pf-perfil .fanor-pf-perfil__item.is-activo {
	border-left-color: var(--fanor-pf-oro, #CC0000);
	background: var(--fanor-pf-item-act-bg, #FCEAEA);
	color: var(--fanor-pf-item-act, #CC0000);
	font-weight: 600;
}

.fanor-pf-perfil .fanor-pf-perfil__item-ico {
	display: inline-flex;
	flex: 0 0 auto;
}

.fanor-pf-perfil .fanor-pf-perfil__item-ico svg {
	width: 16px;
	height: 16px;
	display: block;
}

.fanor-pf-perfil .fanor-pf-perfil__item-txt {
	font: inherit;
	letter-spacing: inherit;
}

/* ── Encabezado ──────────────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-perfil__head {
	margin-bottom: 22px;
}

.fanor-pf-perfil .fanor-pf-perfil__titulo {
	margin: 0 0 6px;
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--fanor-pf-titulo, #1A1A1A);
}

.fanor-pf-perfil .fanor-pf-perfil__sub {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fanor-pf-sub, #888);
}

/* ── Paneles ─────────────────────────────────────────────────────────────── */

/*
 * Panel con CABECERA SEPARADA, no una caja con todo dentro.
 *
 * Es la estructura que la tienda ya usaba en su área de cliente hecha a mano: el título
 * vive en una banda propia cerrada por una línea, y el contenido empieza debajo. El diseño
 * de origen apilaba título y contenido en el mismo bloque acolchado, y eso —más que el
 * color— era lo que hacía que estas pantallas se vieran de otro sitio. El padding se
 * reparte ahora entre la cabecera y el cuerpo, así que el panel no lleva ninguno.
 */
.fanor-pf-perfil .fanor-pf-perfil__panel {
	background: var(--fanor-pf-panel-bg, #fff);
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: var(--fanor-pf-panel-r, 8px);
	padding: 0;
	overflow: hidden;
	margin-bottom: 20px;
}

/*
 * Cuerpo del panel: TODO lo que va debajo de la cabecera.
 *
 * `__cuerpo` es la clase genérica; las otras dos son los cuerpos que ya existían con nombre
 * propio. Sin este acolchado el contenido se pega a las paredes de la caja, y donde eso más
 * cantaba era en pedidos: las tarjetas llegaban de borde a borde y su marco caía justo
 * encima del marco del panel, dejando dos líneas pegadas a cada lado.
 */
.fanor-pf-perfil .fanor-pf-perfil__cuerpo,
.fanor-pf-perfil .fanor-pf-perfil__campos,
.fanor-pf-perfil [data-fanor-pf-dirs] {
	padding: 26px 24px;
}

.fanor-pf-perfil .fanor-pf-perfil__panel:last-child {
	margin-bottom: 0;
}

.fanor-pf-perfil .fanor-pf-perfil__panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 0;
	padding: 22px 24px;
	border-bottom: 1px solid var(--fanor-pf-sep, #EEEEEE);
}

/*
 * El subrayado rojo bajo el título es LA marca de la casa.
 *
 * Aparece en todas las cabeceras de sección del sitio, y es lo que ata esta pantalla al
 * resto; sin él, el título era una etiqueta pequeña en versalitas que podría venir de
 * cualquier plantilla. Va sobre el propio `h2` con `inline-block` para que la línea mida
 * lo que mide el texto y no el ancho del panel.
 */
.fanor-pf-perfil .fanor-pf-perfil__panel-tit {
	display: inline-block;
	margin: 0;
	padding-bottom: 6px;
	border-bottom: 3px solid var(--fanor-pf-oro, #CC0000);
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--fanor-pf-panel-tit, #1A1A1A);
}

/* Botón Editar / Guardar */

.fanor-pf-perfil .fanor-pf-perfil__btn-edit {
	flex: 0 0 auto;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 16px;
	border: 1px solid var(--fanor-pf-oro, #CC0000);
	border-radius: 6px;
	background: transparent;
	color: var(--fanor-pf-oro, #CC0000);
	cursor: pointer;
	transition: background-color .18s var(--fnp-e-soft, ease), color .18s var(--fnp-e-soft, ease), opacity .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__panel.is-editando .fanor-pf-perfil__btn-edit {
	background: var(--fanor-pf-oro, #CC0000);
	color: #fff;
}

.fanor-pf-perfil .fanor-pf-perfil__btn-edit[disabled] {
	opacity: .55;
	cursor: default;
}

/* Una sola caja con las dos etiquetas dentro: se enseña la que corresponde al modo. */
.fanor-pf-perfil .fanor-pf-perfil__lbl--edit,
.fanor-pf-perfil .fanor-pf-perfil__panel.is-editando .fanor-pf-perfil__lbl--ver {
	display: none;
}

.fanor-pf-perfil .fanor-pf-perfil__panel.is-editando .fanor-pf-perfil__lbl--edit {
	display: inline;
}

/* ── Campos ──────────────────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-perfil__campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
	margin: 0;
}

.fanor-pf-perfil .fanor-pf-perfil__campo {
	min-width: 0;
}

/* 12px y un tracking normal: a 10px con .14em la etiqueta se leía a trompicones, y el
   resto del sitio marca sus campos a 12px. */
.fanor-pf-perfil .fanor-pf-perfil__campo-lbl {
	display: block;
	margin-bottom: 8px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-perfil__campo-opt {
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: none;
	opacity: .75;
}

/* 46px de alto y radio 5: la misma caja que los campos del carrito y del buscador. El
   1.5px de borde se queda en 1px, que es lo que usa el resto del sitio. */
.fanor-pf-perfil .fanor-pf-perfil__input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--fanor-pf-linea, #E0E0E0);
	border-radius: 5px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	line-height: 1.35;
	outline: none;
	background: var(--fanor-pf-input-bg, #F7F7F7);
	color: var(--fanor-pf-input-txt, #1A1A1A);
	transition: border-color .18s var(--fnp-e-soft, ease), background-color .18s var(--fnp-e-soft, ease);
}

/* Los navegadores atenúan los deshabilitados; aquí el campo en reposo debe LEERSE bien:
   lo que comunica «no editable» es el fondo crema y la ausencia de borde dorado. */
.fanor-pf-perfil .fanor-pf-perfil__input:disabled {
	opacity: 1;
	-webkit-text-fill-color: var(--fanor-pf-input-txt, #1A1A1A);
	cursor: default;
}

.fanor-pf-perfil .fanor-pf-perfil__panel.is-editando .fanor-pf-perfil__input,
/*
 * Campo editable: fondo blanco y borde algo más marcado que el de reposo.
 *
 * En el diseño de origen esto iba en el acento, que era un DORADO: un aviso discreto de
 * «esto se puede escribir». Traducido a la paleta de Fanor no funciona, porque aquí el
 * acento es rojo y un campo de formulario con el borde rojo no dice «editable», dice
 * «corrige esto» —y lo decía en los siete campos de la ventana de dirección a la vez—.
 * El cambio de fondo ya distingue el campo suficientemente; el rojo se reserva para el
 * foco, que es un estado pasajero y de uno en uno.
 */
.fanor-pf-perfil .fanor-pf-perfil__input.is-editable {
	border-color: var(--fanor-pf-gris-3, #C9C9C9);
	background: #fff;
}

.fanor-pf-perfil .fanor-pf-perfil__input:focus {
	border-color: var(--fanor-pf-oro, #CC0000);
	box-shadow: 0 0 0 3px rgba(204, 0, 0, .14);
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-perfil__aviso {
	margin: 16px 0 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	line-height: 1.5;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-perfil__aviso.is-error {
	color: var(--fanor-pf-rojo, #CC0000);
}

.fanor-pf-perfil .fanor-pf-perfil__aviso.is-ok {
	color: var(--fanor-pf-oro, #CC0000);
}

/* ── Direcciones ─────────────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-perfil__btn-add {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	background: var(--fanor-pf-add-bg, #1A1A1A);
	color: var(--fanor-pf-add-txt, #fff);
	cursor: pointer;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__btn-add:hover,
.fanor-pf-perfil .fanor-pf-perfil__btn-add:focus-visible {
	background: var(--fanor-pf-add-hover, #CC0000);
}

.fanor-pf-perfil .fanor-pf-perfil__dirs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.fanor-pf-perfil .fanor-pf-perfil__vacio {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	line-height: 1.6;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-perfil__dir {
	position: relative;
	border: 1.5px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: 6px;
	padding: 18px 20px;
}

.fanor-pf-perfil .fanor-pf-perfil__dir.is-principal {
	border-color: var(--fanor-pf-dir-pri-bd, #CC0000);
	background: var(--fanor-pf-dir-pri-bg, #FDECEC);
}

.fanor-pf-perfil .fanor-pf-perfil__dir-badge {
	position: absolute;
	top: 16px;
	right: 18px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 8.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fanor-pf-oro, #CC0000);
	background: #fff;
	border: 1px solid rgba(204, 0, 0, .26);
	border-radius: 20px;
	padding: 3px 10px;
}

.fanor-pf-perfil .fanor-pf-perfil__dir-lbl {
	margin: 0 0 8px;
	/* Deja sitio al distintivo para que una etiqueta larga no se le meta debajo. */
	padding-right: 84px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

.fanor-pf-perfil .fanor-pf-perfil__dir-txt {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	line-height: 1.6;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-perfil__dir-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 14px;
}

.fanor-pf-perfil .fanor-pf-perfil__dir-accion {
	padding: 0 0 1px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	cursor: pointer;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 11px;
	transition: opacity .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__dir-accion:hover {
	opacity: .72;
}

.fanor-pf-perfil .fanor-pf-perfil__dir-principal {
	color: var(--fanor-pf-gris, #888);
	border-bottom-color: var(--fanor-pf-linea, #E5E5E5);
}

.fanor-pf-perfil .fanor-pf-perfil__dir-edit {
	color: var(--fanor-pf-oro, #CC0000);
	border-bottom-color: rgba(204, 0, 0, .26);
}

.fanor-pf-perfil .fanor-pf-perfil__dir-del {
	color: var(--fanor-pf-rojo, #CC0000);
	border-bottom-color: rgba(204, 0, 0, .3);
}

/* Confirmación de borrado, dentro de la propia tarjeta. */

.fanor-pf-perfil .fanor-pf-perfil__confirm {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--fanor-pf-linea, #E5E5E5);
}

.fanor-pf-perfil .fanor-pf-perfil__confirm[hidden] {
	display: none;
}

.fanor-pf-perfil .fanor-pf-perfil__confirm-txt {
	margin: 0 0 10px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-perfil__confirm-btns {
	display: flex;
	gap: 10px;
}

.fanor-pf-perfil .fanor-pf-perfil__confirm-si,
.fanor-pf-perfil .fanor-pf-perfil__confirm-no {
	padding: 7px 14px;
	border-radius: 6px;
	cursor: pointer;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: opacity .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__confirm-si {
	border: 1px solid var(--fanor-pf-rojo, #CC0000);
	background: var(--fanor-pf-rojo, #CC0000);
	color: #fff;
}

.fanor-pf-perfil .fanor-pf-perfil__confirm-no {
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	background: transparent;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-perfil__confirm-si:hover,
.fanor-pf-perfil .fanor-pf-perfil__confirm-no:hover {
	opacity: .8;
}

/* Mientras una operación está en vuelo. */
.fanor-pf-perfil .fanor-pf-perfil__dir.is-ocupada,
.fanor-pf-perfil.is-guardando .fanor-pf-perfil__campos {
	opacity: .6;
	pointer-events: none;
}

/* ── Ventana de dirección ────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-perfil__velo {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(26, 26, 26, .5);
	opacity: 0;
	transition: opacity .28s var(--fnp-e-out, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__velo[hidden] {
	display: none;
}

.fanor-pf-perfil.is-modal .fanor-pf-perfil__velo {
	opacity: 1;
}

.fanor-pf-perfil .fanor-pf-perfil__modal {
	position: fixed;
	inset: 0;
	z-index: 310;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
}

.fanor-pf-perfil .fanor-pf-perfil__modal[hidden] {
	display: none;
}

.fanor-pf-perfil .fanor-pf-perfil__modal-caja {
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--fnp-sh-panel, 0 20px 48px rgba(26, 26, 26, .18));
	transform: translateY(12px);
	opacity: 0;
	transition: transform .28s var(--fnp-e-out, ease), opacity .28s var(--fnp-e-out, ease);
}

.fanor-pf-perfil.is-modal .fanor-pf-perfil__modal-caja {
	transform: none;
	opacity: 1;
}

.fanor-pf-perfil .fanor-pf-perfil__modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--fanor-pf-linea, #E5E5E5);
}

.fanor-pf-perfil .fanor-pf-perfil__modal-tit {
	margin: 0;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* Título doble: «Nueva dirección» o «Editar dirección» según cómo se abrió. */
.fanor-pf-perfil .fanor-pf-perfil__lbl--editar,
.fanor-pf-perfil.is-editando-dir .fanor-pf-perfil__lbl--nueva {
	display: none;
}

.fanor-pf-perfil.is-editando-dir .fanor-pf-perfil__lbl--editar {
	display: inline;
}

.fanor-pf-perfil .fanor-pf-perfil__modal-x {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--fanor-pf-oro, #CC0000);
	cursor: pointer;
	transition: background-color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__modal-x:hover {
	background: var(--fanor-pf-oro-pale, #FDECEC);
}

.fanor-pf-perfil .fanor-pf-perfil__modal-x svg {
	width: 16px;
	height: 16px;
	display: block;
}

.fanor-pf-perfil .fanor-pf-perfil__modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 22px 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
}

.fanor-pf-perfil .fanor-pf-perfil__campo--ancho {
	grid-column: 1 / -1;
}

.fanor-pf-perfil .fanor-pf-perfil__modal-body .fanor-pf-perfil__aviso {
	grid-column: 1 / -1;
	margin-top: 0;
}

.fanor-pf-perfil .fanor-pf-perfil__modal-pie {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 18px 24px;
	border-top: 1px solid var(--fanor-pf-linea, #E5E5E5);
}

.fanor-pf-perfil .fanor-pf-perfil__btn-cancelar,
.fanor-pf-perfil .fanor-pf-perfil__btn-guardar {
	padding: 11px 22px;
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background-color .18s var(--fnp-e-soft, ease), color .18s var(--fnp-e-soft, ease), opacity .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-perfil__btn-cancelar {
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	background: transparent;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-perfil__btn-cancelar:hover {
	border-color: var(--fanor-pf-oro, #CC0000);
	color: var(--fanor-pf-oro, #CC0000);
}

.fanor-pf-perfil .fanor-pf-perfil__btn-guardar {
	border: 1px solid var(--fanor-pf-add-bg, #1A1A1A);
	background: var(--fanor-pf-add-bg, #1A1A1A);
	color: var(--fanor-pf-add-txt, #fff);
}

.fanor-pf-perfil .fanor-pf-perfil__btn-guardar:hover {
	border-color: var(--fanor-pf-add-hover, #CC0000);
	background: var(--fanor-pf-add-hover, #CC0000);
}

.fanor-pf-perfil .fanor-pf-perfil__btn-guardar[disabled],
.fanor-pf-perfil .fanor-pf-perfil__btn-cancelar[disabled] {
	opacity: .55;
	cursor: default;
}

/* ── Pantalla de acceso ──────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-acc {
	display: flex;
	justify-content: center;
	padding: var(--fanor-pf-acc-aire, 64px) var(--fanor-pf-pad-x, 32px);
}

.fanor-pf-perfil .fanor-pf-acc__caja {
	width: 100%;
	max-width: var(--fanor-pf-acc-w, 460px);
	padding: 32px 32px 34px;
	background: var(--fanor-pf-panel-bg, #fff);
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: var(--fanor-pf-panel-r, 16px);
}

/* Las tres caras están siempre en el HTML y solo una se ve. Se explicita porque hay temas
   que redefinen `display` en elementos con [hidden] y dejarían las tres a la vista. */
.fanor-pf-perfil .fanor-pf-acc__cara[hidden] {
	display: none;
}

/*
 * El título en condensada MAYÚSCULA con su barra roja, igual que los títulos de sección
 * del resto del sitio. Antes iba en redonda minúscula a 30px, y era el único titular de
 * toda la tienda escrito así: bastaba eso para que la pantalla se leyera como traída de
 * otro sitio, por muy rojos que fueran los botones.
 */
.fanor-pf-perfil .fanor-pf-acc__titulo {
	display: inline-block;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--fanor-pf-oro, #CC0000);
	font-family: var(--fnp-font-display, 'Roboto Condensed', sans-serif);
	font-weight: 900;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--fanor-pf-titulo, #1A1A1A);
}

.fanor-pf-perfil .fanor-pf-acc__lema {
	margin: 0 0 24px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fanor-pf-sub, #888);
}

/* El puente entre las tres caras: «¿Eres nuevo? Crear cuenta». */
.fanor-pf-perfil .fanor-pf-acc__cambio {
	margin: 0 0 26px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-acc__cambio-a {
	color: var(--fanor-pf-tinta, #1A1A1A);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__cambio-a:hover,
.fanor-pf-perfil .fanor-pf-acc__cambio-a:focus-visible {
	color: var(--fanor-pf-oro, #CC0000);
}

.fanor-pf-perfil .fanor-pf-acc__form {
	display: grid;
	gap: 18px;
}

.fanor-pf-perfil .fanor-pf-acc__campo {
	display: grid;
	gap: 8px;
}

.fanor-pf-perfil .fanor-pf-acc__etq {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-acc__input {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: 6px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 15px;
	line-height: 1.35;
	outline: none;
	background: var(--fanor-pf-input-bg, #F7F7F7);
	color: var(--fanor-pf-input-txt, #1A1A1A);
	transition: border-color .18s var(--fnp-e-soft, ease), background-color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__input:focus {
	border-color: var(--fanor-pf-oro, #CC0000);
	background: var(--fanor-pf-panel-bg, #fff);
}

/* Ancla del ojo, que va superpuesto dentro del campo. */
.fanor-pf-perfil .fanor-pf-acc__secreto {
	position: relative;
	display: block;
}

/* Hueco a la derecha para que el texto tecleado no pase por debajo del ojo. */
.fanor-pf-perfil .fanor-pf-acc__secreto .fanor-pf-acc__input {
	padding-right: 50px;
}

.fanor-pf-perfil .fanor-pf-acc__ojo {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fanor-pf-gris, #888);
	cursor: pointer;
	transition: color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__ojo:hover,
.fanor-pf-perfil .fanor-pf-acc__ojo:focus-visible {
	color: var(--fanor-pf-tinta, #1A1A1A);
}

.fanor-pf-perfil .fanor-pf-acc__ojo-ico {
	width: 20px;
	height: 20px;
}

/* La tacha solo aparece con la contraseña a la vista: el icono dice qué está pasando
   ahora, no qué pasará al pulsarlo. */
.fanor-pf-perfil .fanor-pf-acc__ojo-tacha {
	opacity: 0;
	transition: opacity .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__ojo[aria-pressed="true"] .fanor-pf-acc__ojo-tacha {
	opacity: 1;
}

.fanor-pf-perfil .fanor-pf-acc__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: -4px;
}

.fanor-pf-perfil .fanor-pf-acc__check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	color: var(--fanor-pf-gris-2, #555);
	cursor: pointer;
}

.fanor-pf-perfil .fanor-pf-acc__check input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--fanor-pf-oro, #CC0000);
	cursor: pointer;
}

.fanor-pf-perfil .fanor-pf-acc__enlace {
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	color: var(--fanor-pf-gris-2, #555);
	text-decoration: none;
	transition: color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__enlace:hover,
.fanor-pf-perfil .fanor-pf-acc__enlace:focus-visible {
	color: var(--fanor-pf-oro, #CC0000);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Botón de acción en ROJO, con la caja de los botones del sitio (46px, radio 5, condensada
 * en mayúsculas). Estaba en negro con el rojo reservado al `:hover`, que es justo al revés
 * de como funciona Fanor: aquí el rojo es la acción, no el estado.
 */
.fanor-pf-perfil .fanor-pf-acc__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--fanor-pf-acc-cta-r, 5px);
	background: var(--fanor-pf-acc-cta-bg, #CC0000);
	color: var(--fanor-pf-acc-cta-txt, #fff);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s var(--fnp-e-soft, ease), opacity .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__cta:hover,
.fanor-pf-perfil .fanor-pf-acc__cta:focus-visible {
	background: var(--fanor-pf-acc-cta-hover, #A80000);
	color: var(--fanor-pf-acc-cta-txt, #fff);
}

/*
 * Botón secundario: «Crear cuenta».
 *
 * Es un botón de verdad y no el enlace suelto dentro de una frase que había antes. Abrir
 * una cuenta es una de las dos cosas que se vienen a hacer a esta pantalla, y estaba
 * escondida en letra pequeña —cuando la tienda la tenía activada, porque si no ni salía—.
 * Va en fantasma para que no compita con «Iniciar sesión»: mismo tamaño y misma caja, pero
 * el peso visual se lo queda la acción principal.
 */
.fanor-pf-perfil .fanor-pf-acc__cta2 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	padding: 0 24px;
	border: 1.5px solid var(--fanor-pf-cta2-bd, #D1D5DB);
	border-radius: var(--fanor-pf-acc-cta-r, 5px);
	background: #fff;
	color: var(--fanor-pf-tinta, #1A1A1A);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .18s var(--fnp-e-soft, ease), color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__cta2:hover,
.fanor-pf-perfil .fanor-pf-acc__cta2:focus-visible {
	background: #fff;
	border-color: var(--fanor-pf-tinta, #1A1A1A);
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* Separador «o» entre las dos acciones: una línea con la palabra encima. */
.fanor-pf-perfil .fanor-pf-acc__o {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 12px;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-acc__o::before,
.fanor-pf-perfil .fanor-pf-acc__o::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--fanor-pf-sep, #EEEEEE);
}

.fanor-pf-perfil .fanor-pf-acc__cta[disabled] {
	opacity: .55;
	cursor: default;
}

/* ── Requisitos de la contraseña ─────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-acc__reglas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 7px 14px;
	margin: -4px 0 0;
	padding: 0;
	list-style: none;
}

.fanor-pf-perfil .fanor-pf-acc__regla {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	line-height: 1.4;
	color: var(--fanor-pf-gris, #888);
	transition: color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__regla.is-ok {
	color: var(--fanor-pf-oro, #CC0000);
}

.fanor-pf-perfil .fanor-pf-acc__regla-ico {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* La palomita solo aparece cuando el requisito está cumplido; hasta entonces se ve el
   círculo vacío, que ya dice «esto te falta» sin necesidad de texto en rojo. */
.fanor-pf-perfil .fanor-pf-acc__regla-check {
	opacity: 0;
	transition: opacity .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-acc__regla.is-ok .fanor-pf-acc__regla-check {
	opacity: 1;
}

/* Nombre y apellido, uno al lado del otro. */
.fanor-pf-perfil .fanor-pf-acc__par {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.fanor-pf-perfil .fanor-pf-acc__legal {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	line-height: 1.55;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-acc__legal p {
	margin: 0;
}

.fanor-pf-perfil .fanor-pf-acc__legal a {
	color: var(--fanor-pf-oro, #CC0000);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fanor-pf-perfil .fanor-pf-acc__aviso {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-acc__aviso.is-error {
	color: var(--fanor-pf-rojo, #CC0000);
}

.fanor-pf-perfil .fanor-pf-acc__aviso.is-ok {
	color: var(--fanor-pf-oro, #CC0000);
}

/* ── Pedidos · el listado ────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-ped__cuenta {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 600;
	font-size: 12px;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-ped__lista {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La tarjeta, con forma de recibo: banda de identidad, lo que lleva, y pie de cierre.
 *
 * El acolchado NO va aquí sino en cada una de las tres partes, porque las bandas de arriba
 * y de abajo llevan fondo propio y tienen que llegar hasta el marco. De ahí el `overflow`:
 * sin él, ese fondo desbordaría las esquinas redondeadas.
 */
.fanor-pf-perfil .fanor-pf-ped__item {
	overflow: hidden;
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: 8px;
	background: var(--fanor-pf-panel-bg, #fff);
	transition: border-color .18s var(--fnp-e-soft, ease), box-shadow .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-ped__item:hover,
.fanor-pf-perfil .fanor-pf-ped__item:focus-within {
	border-color: var(--fanor-pf-oro, #CC0000);
	box-shadow: 0 2px 12px rgba(26, 26, 26, .08);
}

/* Banda de identidad. El estado se va al extremo con `margin-left`, no con
   `space-between`: entre el número y la fecha tiene que seguir habiendo solo el `gap`. */
.fanor-pf-perfil .fanor-pf-ped__banda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--fanor-pf-sep, #EEEEEE);
	background: var(--fanor-pf-ped-banda-bg, #F6F7F9);
}

.fanor-pf-perfil .fanor-pf-ped__num {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

.fanor-pf-perfil .fanor-pf-ped__fecha {
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-ped__punto {
	color: var(--fanor-pf-gris-3, #C9C9C9);
}

.fanor-pf-perfil .fanor-pf-ped__banda .fanor-pf-ped__estado {
	margin-left: auto;
}

/*
 * Lo que lleva el pedido.
 *
 * Aquí iba antes una tira de miniaturas de 48 px. Hoy la mayoría del catálogo no tiene foto,
 * así que eran cuatro cuadros grises idénticos en todas las tarjetas: ocupaban una banda
 * entera y no distinguían un pedido de otro. Los nombres sí, y además llenan el ancho que a
 * las fotos les sobraba. La foto se queda, en pequeño, como ancla visual de cada línea.
 */
/*
 * La lista NO es una rejilla, y esto no es cosmético.
 *
 * Con `display: grid`, cada línea es un elemento de rejilla y le toca `min-width: auto`, o
 * sea que no puede encogerse por debajo de su contenido. Como el nombre y el precio van en
 * `nowrap`, a 390 px la línea medía 438 px dentro de una tarjeta de 300: el nombre se
 * cortaba a hachazos contra el marco y el precio se quedaba fuera, recortado por el
 * `overflow` de la tarjeta. En bloque cada línea respeta el ancho de la caja y el nombre se
 * encoge con sus puntos suspensivos, que es justo para lo que están.
 */
.fanor-pf-perfil .fanor-pf-ped__resumen {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fanor-pf-perfil .fanor-pf-ped__res {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 11px 18px;
}

.fanor-pf-perfil .fanor-pf-ped__res + .fanor-pf-ped__res {
	border-top: 1px solid var(--fanor-pf-item-sep, #F7F7F7);
}

.fanor-pf-perfil .fanor-pf-ped__res-foto {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: 6px;
	background: var(--fanor-pf-input-bg, #F7F7F7);
}

.fanor-pf-perfil .fanor-pf-ped__res-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Una sola línea con puntos suspensivos: las refacciones tienen nombres largos y en dos
   líneas cada tarjeta crecería a un alto distinto, que es justo lo que hace ilegible una
   lista. `min-width: 0` es lo que permite al hijo de un flex encogerse por debajo de su
   contenido; sin él el texto empujaría al precio fuera de la tarjeta. */
.fanor-pf-perfil .fanor-pf-ped__res-nom {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* Solo se escribe cuando hay más de una unidad: «1×» delante de todo es ruido. */
.fanor-pf-perfil .fanor-pf-ped__res-cant {
	margin-right: 5px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-ped__res-precio {
	flex: 0 0 auto;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* Alineado con los nombres, no con las fotos: es una línea más de la lista. */
.fanor-pf-perfil .fanor-pf-ped__res--mas {
	padding-left: 70px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	color: var(--fanor-pf-gris, #888);
}

/* Pie de cierre. */
.fanor-pf-perfil .fanor-pf-ped__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 13px 18px;
	border-top: 1px solid var(--fanor-pf-sep, #EEEEEE);
	background: var(--fanor-pf-ped-banda-bg, #F6F7F9);
}

.fanor-pf-perfil .fanor-pf-ped__pie-arts {
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-ped__pie-total {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-left: auto;
}

.fanor-pf-perfil .fanor-pf-ped__pie-lbl {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-ped__total {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 19px;
	white-space: nowrap;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* ── Distintivo de estado ────────────────────────────────────────────────── */

/* Cada estado lleva su color, y el que no esté contemplado hereda el gris de aquí: una
   extensión puede añadir estados que este plugin no conoce. */
/* Rectangular con esquina de 4px, no pastilla: Fanor no usa formas redondas para
   etiquetas de dato. Y en Roboto, que es donde vive la información. */
.fanor-pf-perfil .fanor-pf-ped__estado {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: 4px;
	background: #F3F4F6;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: var(--fanor-pf-gris-2, #555);
}

/*
 * Los estados usan la MISMA escala que el área de cliente que la tienda ya tenía, y no
 * derivados del acento. Con la paleta anterior «en espera» salía sobre un fondo ocre con
 * el texto en rojo —dos tonos que no venían de ningún sitio— y «procesando» era rojo, o
 * sea idéntico a «cancelado». Aquí cada estado tiene su color de siempre: verde terminado,
 * ámbar procesando, azul en espera, gris pendiente y rojo cancelado.
 */
.fanor-pf-perfil .fanor-pf-ped__estado--completed {
	border-color: #4CAF50;
	background: #E8F5E9;
	color: #2E7D32;
}

.fanor-pf-perfil .fanor-pf-ped__estado--processing {
	border-color: #FFB300;
	background: #FFF8E1;
	color: #B57E00;
}

.fanor-pf-perfil .fanor-pf-ped__estado--on-hold {
	border-color: #64B5F6;
	background: #E3F2FD;
	color: #1565C0;
}

.fanor-pf-perfil .fanor-pf-ped__estado--pending,
.fanor-pf-perfil .fanor-pf-ped__estado--refunded {
	border-color: #B0B0B0;
	background: #F3F4F6;
	color: #555555;
}

.fanor-pf-perfil .fanor-pf-ped__estado--cancelled,
.fanor-pf-perfil .fanor-pf-ped__estado--failed {
	border-color: #E74C3C;
	background: #FDECEA;
	color: #C0392B;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-ped__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fanor-pf-perfil .fanor-pf-ped__ver,
.fanor-pf-perfil .fanor-pf-ped__pagar {
	display: inline-block;
	padding: 9px 18px;
	border: 1.5px solid var(--fanor-pf-tinta, #1A1A1A);
	border-radius: 6px;
	text-decoration: none;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: border-color .18s var(--fnp-e-soft, ease), background-color .18s var(--fnp-e-soft, ease), color .18s var(--fnp-e-soft, ease);
}

/* «Ver detalle» es la acción de todos los días y va en segundo plano; «Pagar» solo aparece
   cuando hay algo pendiente y ahí sí conviene que grite. */
.fanor-pf-perfil .fanor-pf-ped__ver {
	background: transparent;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

.fanor-pf-perfil .fanor-pf-ped__ver:hover,
.fanor-pf-perfil .fanor-pf-ped__ver:focus-visible {
	border-color: var(--fanor-pf-oro, #CC0000);
	color: var(--fanor-pf-oro, #CC0000);
}

.fanor-pf-perfil .fanor-pf-ped__pagar {
	background: var(--fanor-pf-tinta, #1A1A1A);
	color: #fff;
}

.fanor-pf-perfil .fanor-pf-ped__pagar:hover,
.fanor-pf-perfil .fanor-pf-ped__pagar:focus-visible {
	border-color: var(--fanor-pf-oro, #CC0000);
	background: var(--fanor-pf-oro, #CC0000);
	color: #fff;
}

/* En el carril del detalle ocupa el ancho: es la única acción de la pantalla. */
.fanor-pf-perfil .fanor-pf-ped__pagar--bloque {
	display: block;
	padding-block: 12px;
	text-align: center;
}

/* ── Paginación ──────────────────────────────────────────────────────────── */

.fanor-pf-perfil .fanor-pf-ped__paginas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--fanor-pf-item-sep, #F7F7F7);
}

.fanor-pf-perfil .fanor-pf-ped__pagina {
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fanor-pf-tinta, #1A1A1A);
	transition: color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-ped__pagina:hover,
.fanor-pf-perfil .fanor-pf-ped__pagina:focus-visible {
	color: var(--fanor-pf-oro, #CC0000);
}

.fanor-pf-perfil .fanor-pf-ped__pagina-de {
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	color: var(--fanor-pf-gris, #888);
}

/* ── Sin pedidos ─────────────────────────────────────────────────────────── */

/* Centrado y con aire: el aviso y su salida a la tienda son todo lo que hay en el panel,
   y arrinconados a la izquierda parecían el arranque de una lista que no llegó. */
.fanor-pf-perfil .fanor-pf-ped__nada {
	display: grid;
	justify-items: center;
	gap: 20px;
	padding-block: 48px;
	text-align: center;
}

/* ── Pedidos · el detalle ────────────────────────────────────────────────── */

/* Va encima del panel, no dentro: es la salida de la pantalla. */
.fanor-pf-perfil .fanor-pf-ped__volver {
	display: inline-block;
	margin-bottom: 12px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fanor-pf-gris-2, #555);
	transition: color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil .fanor-pf-ped__volver:hover,
.fanor-pf-perfil .fanor-pf-ped__volver:focus-visible {
	color: var(--fanor-pf-oro, #CC0000);
}

/*
 * DOS COLUMNAS: los artículos y, al lado, la ficha del pedido.
 *
 * Antes era una sola columna de mil píxeles con todo apilado, y el ancho se lo tragaban los
 * huecos: el nombre de cada artículo se estiraba sobre ochocientos píxeles con su precio
 * contra el borde opuesto, y los totales flotaban a la derecha con seiscientos píxeles de
 * blanco al lado. Repartido en dos, el precio cae a un palmo del nombre y ese blanco pasa a
 * ser el carril, que es donde se agrupa todo lo que no es la lista.
 */
.fanor-pf-perfil .fanor-pf-ped__detalle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--fanor-pf-ped-carril, 320px);
}

.fanor-pf-perfil .fanor-pf-ped__principal {
	min-width: 0;
}

/* La cabecera del detalle lleva la fecha bajo el título, así que el distintivo de estado se
   alinea con la primera línea y no con el centro del bloque. */
.fanor-pf-perfil .fanor-pf-ped__cab-detalle {
	align-items: flex-start;
}

.fanor-pf-perfil .fanor-pf-ped__cab-txt {
	min-width: 0;
}

.fanor-pf-perfil .fanor-pf-ped__cab-txt .fanor-pf-ped__meta {
	margin-top: 10px;
}

.fanor-pf-perfil .fanor-pf-ped__meta {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fanor-pf-gris-2, #555);
}

/* El fondo llega hasta el marco y el `overflow` del panel lo recorta contra las esquinas
   redondeadas. `align-content: start` para que los bloques se apilen arriba en vez de
   repartirse por todo el alto de la columna. */
.fanor-pf-perfil .fanor-pf-ped__carril {
	display: grid;
	align-content: start;
	gap: 26px;
	padding: 24px 22px;
	border-left: 1px solid var(--fanor-pf-linea, #E5E5E5);
	background: var(--fanor-pf-ped-banda-bg, #F6F7F9);
}

.fanor-pf-perfil .fanor-pf-ped__bloque-tit {
	margin: 0 0 9px;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-ped__bloque-txt,
.fanor-pf-perfil .fanor-pf-ped__dir-txt {
	margin: 0;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* ── Artículos del detalle ───────────────────────────────────────────────── */

/* El aire de arriba lo pone el acolchado del cuerpo, y la última línea no lleva raya
   porque la cierra el propio marco del panel. */
/* En bloque y no en rejilla, por lo mismo que la lista de la tarjeta: un elemento de
   rejilla no baja de su ancho mínimo y el precio se saldría de la columna. */
.fanor-pf-perfil .fanor-pf-ped__lineas {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fanor-pf-perfil .fanor-pf-ped__linea {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--fanor-pf-item-sep, #F7F7F7);
}

.fanor-pf-perfil .fanor-pf-ped__linea:first-child {
	padding-top: 0;
}

.fanor-pf-perfil .fanor-pf-ped__linea:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.fanor-pf-perfil .fanor-pf-ped__linea-foto {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 1px solid var(--fanor-pf-linea, #E5E5E5);
	border-radius: 8px;
	background: var(--fanor-pf-input-bg, #F7F7F7);
}

.fanor-pf-perfil .fanor-pf-ped__linea-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fanor-pf-perfil .fanor-pf-ped__linea-txt {
	flex: 1 1 auto;
	display: grid;
	gap: 3px;
	min-width: 0;
}

.fanor-pf-perfil .fanor-pf-ped__linea-nom {
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	color: var(--fanor-pf-tinta, #1A1A1A);
	transition: color .18s var(--fnp-e-soft, ease);
}

.fanor-pf-perfil a.fanor-pf-ped__linea-nom:hover,
.fanor-pf-perfil a.fanor-pf-ped__linea-nom:focus-visible {
	color: var(--fanor-pf-oro, #CC0000);
}

.fanor-pf-perfil .fanor-pf-ped__linea-cant {
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 13px;
	color: var(--fanor-pf-gris, #888);
}

.fanor-pf-perfil .fanor-pf-ped__linea-precio {
	flex: 0 0 auto;
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* ── Totales, dentro del carril ──────────────────────────────────────────── */

/* Sin caja propia: el carril ya es la caja. */
.fanor-pf-perfil .fanor-pf-ped__totales {
	display: grid;
	gap: 8px;
}

.fanor-pf-perfil .fanor-pf-ped__total-fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--fnp-font-body, 'Roboto', sans-serif);
	font-size: 14px;
	color: var(--fanor-pf-gris-2, #555);
}

.fanor-pf-perfil .fanor-pf-ped__total-fila--final {
	margin-top: 4px;
	padding-top: 11px;
	border-top: 1px solid var(--fanor-pf-linea, #E5E5E5);
	font-family: var(--fnp-font-ui, 'Roboto Condensed', sans-serif);
	font-weight: 700;
	font-size: 18px;
	color: var(--fanor-pf-tinta, #1A1A1A);
}

/* ── Adaptación a pantallas ──────────────────────────────────────────────── */

@media (max-width: 900px) {

	.fanor-pf-perfil .fanor-pf-perfil__grid {
		grid-template-columns: 1fr;
	}

	/* Arriba y a todo lo ancho: pegada dejaría la tarjeta flotando sobre el contenido. */
	.fanor-pf-perfil .fanor-pf-perfil__side {
		position: static;
		top: auto;
	}
}

/*
 * El carril del detalle se rompe antes que el resto.
 *
 * Mide 320 px fijos, así que lo que se estrecha es SIEMPRE la columna de artículos: por
 * debajo de aquí le quedarían menos de 300 px para foto, nombre y precio, y el nombre
 * empezaría a partirse en cuatro líneas. Al bajar, los bloques se reparten a lo ancho en
 * vez de apilarse, que si no el pedido acaba midiendo dos pantallas de alto.
 */
@media (max-width: 760px) {

	.fanor-pf-perfil .fanor-pf-ped__detalle {
		grid-template-columns: 1fr;
	}

	.fanor-pf-perfil .fanor-pf-ped__carril {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 22px 24px;
		border-left: 0;
		border-top: 1px solid var(--fanor-pf-sep, #EEEEEE);
	}

	/* La acción cruza el carril entero: repartida en una columna quedaría como un bloque
	   más de información, y es lo único pulsable de la pantalla. */
	.fanor-pf-perfil .fanor-pf-ped__pagar--bloque {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {

	.fanor-pf-perfil .fanor-pf-perfil__grid {
		padding-inline: 18px;
	}

	/*
	 * El panel NO lleva acolchado propio: lo reparten su cabecera y su cuerpo, y ponérselo
	 * aquí lo sumaba al de ellos y además metía hacia dentro la raya de la cabecera, que
	 * debe cruzar la caja de lado a lado. Lo que se aprieta en móvil son las dos piezas.
	 */
	.fanor-pf-perfil .fanor-pf-perfil__panel-head {
		padding: 18px;
	}

	.fanor-pf-perfil .fanor-pf-perfil__cuerpo,
	.fanor-pf-perfil .fanor-pf-perfil__campos,
	.fanor-pf-perfil [data-fanor-pf-dirs] {
		padding: 18px;
	}

	/* Las tres bandas de la tarjeta se aprietan por igual, para que sus fondos sigan
	   alineados con el contenido de las de al lado. */
	.fanor-pf-perfil .fanor-pf-ped__banda,
	.fanor-pf-perfil .fanor-pf-ped__res,
	.fanor-pf-perfil .fanor-pf-ped__pie {
		padding-inline: 14px;
	}

	.fanor-pf-perfil .fanor-pf-ped__res--mas {
		padding-left: 66px;
	}

	/* El precio de cada línea se retira y el nombre se queda con todo el ancho.
	   Compartiendo los 300 px de la tarjeta, al nombre le quedaban 150 y salía cortado a la
	   tercera palabra —que es justo el dato por el que el cliente reconoce el pedido—,
	   mientras el precio repetía en pequeño una cifra que el pie ya suma debajo. */
	.fanor-pf-perfil .fanor-pf-ped__res-precio {
		display: none;
	}

	/* El total baja a su propia fila y el botón ocupa el ancho: a 360 px los tres bloques
	   del pie no caben en línea, y sueltos se descolocan cada uno por su lado. */
	.fanor-pf-perfil .fanor-pf-ped__pie-total {
		margin-left: 0;
	}

	.fanor-pf-perfil .fanor-pf-ped__pie .fanor-pf-ped__acciones {
		width: 100%;
	}

	.fanor-pf-perfil .fanor-pf-ped__pie .fanor-pf-ped__ver,
	.fanor-pf-perfil .fanor-pf-ped__pie .fanor-pf-ped__pagar {
		flex: 1 1 auto;
		text-align: center;
	}

	.fanor-pf-perfil .fanor-pf-perfil__titulo {
		font-size: 26px;
	}

	/* La tarjeta de acceso pierde el aire lateral: a 360 px cada píxel de ancho cuenta. */
	.fanor-pf-perfil .fanor-pf-acc {
		padding-inline: 18px;
	}

	.fanor-pf-perfil .fanor-pf-acc__caja {
		padding: 30px 22px;
	}

	/* Dos campos en fila a 360 px dejan cajas donde no cabe ni un apellido corto. */
	.fanor-pf-perfil .fanor-pf-acc__par {
		grid-template-columns: 1fr;
	}

	.fanor-pf-perfil .fanor-pf-acc__reglas {
		grid-template-columns: 1fr;
	}

	.fanor-pf-perfil .fanor-pf-acc__titulo {
		font-size: 25px;
	}

	/*
	 * La línea NO se rompe: el nombre se parte en varias y el importe se queda arriba a la
	 * derecha, a la altura de la primera. Antes bajaba a una fila propia, y como el nombre
	 * no cabía al lado de la foto también saltaba de línea: quedaba la foto sola en una
	 * banda, el nombre debajo y el importe en una tercera. Ahora el nombre puede encogerse
	 * —lo permite el `min-width: 0` de la línea— así que ya no hace falta romper nada.
	 */
	.fanor-pf-perfil .fanor-pf-ped__linea {
		align-items: flex-start;
	}

	.fanor-pf-perfil .fanor-pf-ped__linea-foto {
		width: 48px;
		height: 48px;
	}

	.fanor-pf-perfil .fanor-pf-perfil__campos,
	.fanor-pf-perfil .fanor-pf-perfil__dirs,
	.fanor-pf-perfil .fanor-pf-perfil__modal-body {
		grid-template-columns: 1fr;
	}

	.fanor-pf-perfil .fanor-pf-perfil__modal {
		padding: 0;
		align-items: flex-end;
	}

	.fanor-pf-perfil .fanor-pf-perfil__modal-caja {
		max-width: none;
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fanor-pf-perfil .fanor-pf-perfil__velo,
	.fanor-pf-perfil .fanor-pf-perfil__modal-caja,
	.fanor-pf-perfil .fanor-pf-perfil__item,
	.fanor-pf-perfil .fanor-pf-ped__item,
	.fanor-pf-perfil .fanor-pf-perfil__input,
	.fanor-pf-perfil .fanor-pf-perfil__btn-edit,
	.fanor-pf-perfil .fanor-pf-perfil__btn-add,
	.fanor-pf-perfil .fanor-pf-perfil__btn-guardar,
	.fanor-pf-perfil .fanor-pf-perfil__btn-cancelar {
		transition: none;
	}

	.fanor-pf-perfil .fanor-pf-perfil__modal-caja {
		transform: none;
	}
}

@media (pointer: coarse) {
	.fanor-pf-perfil .fanor-pf-perfil__input,
	.fanor-pf-perfil .fanor-pf-acc__input {
		font-size: 16px;
	}
}