/* =========================================================================
   PERFUMERÍA, ETAPA "ELEGIR" (assets/php/perfumeria_elegir.php, assets/js/perfumeria.js)
   El test "Encontrá tu perfume" (test_perfume.php), el comparador (botón de las tarjetas y de la ficha, barra flotante
   y comparar_perfumes.php) y el perfil olfativo (Mi cuenta y la pantalla de Favoritos). Lo carga head.php sólo en los
   sitios con Perfumería.
   Todo se apoya en lo que ya existe: las barras y los acordes de la ficha (.fp-perfumeria-* en ficha-premium.css), los
   vacíos y la barra para compartir de Favoritos, el corazón redondo de las tarjetas y el popover de favoritos para los
   colores. Los colores salen de las variables del sitio y, en los sitios oscuros, de su paleta --oscuro-*.
   ========================================================================= */

/* ---------- El test ---------- */
.test-perfumeria{ max-width:780px; margin:0 auto; }
.test-perfumeria-cabecera{ text-align:center; margin-bottom:2rem; }
.test-perfumeria-cabecera p{ opacity:.85; }
.test-perfumeria-caja{
	padding:26px 28px 24px; border:1px solid rgba(127,127,127,.2); border-radius:18px; background:rgba(127,127,127,.04);
}
.test-perfumeria-avance{ display:flex; flex-direction:column; gap:8px; }
.test-perfumeria-avance-texto{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.test-perfumeria-avance-barra{ background:var(--color-primario); }
.test-perfumeria-pregunta{ margin:1.6rem 0 .3rem; font-size:1.55rem; line-height:1.25; outline:none; }
.test-perfumeria-ayuda{ margin-bottom:1.3rem; font-size:14px; opacity:.8; transition:color .2s ease; }
.test-perfumeria-ayuda-aviso{ color:var(--color-primario); opacity:1; animation:sacudirPerfumeria .4s ease; }

.test-perfumeria-opciones{ display:grid; gap:12px; }
.test-perfumeria-opciones-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.test-perfumeria-opciones-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.test-perfumeria-acordes{ display:flex; flex-wrap:wrap; gap:9px; }

/* La opción: una tarjeta grande con el ícono (del color de su barra en la ficha), el nombre y una ayuda corta. Elegida
   se marca con el color del sitio, como las pestañas de Favoritos. */
.test-perfumeria-chip{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:96px; margin:0;
	padding:16px 12px; border:1.5px solid rgba(127,127,127,.25); border-radius:14px; background:rgba(255,255,255,.6);
	color:inherit; font:inherit; text-align:center; line-height:1.25; cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.test-perfumeria-chip:hover{ border-color:var(--color-primario); }
.test-perfumeria-chip:active{ transform:scale(.98); }
.test-perfumeria-chip:focus{ outline:none; }
.test-perfumeria-chip:focus-visible{ outline:2px solid var(--color-primario); outline-offset:2px; }
.test-perfumeria-chip[aria-pressed="true"]{
	border-color:var(--color-primario); background:var(--color-primario-10); color:var(--color-primario);
	box-shadow:inset 0 0 0 1px var(--color-primario);
}
.test-perfumeria-chip:disabled{ opacity:.35; cursor:not-allowed; }
.test-perfumeria-chip > i{ font-size:26px; line-height:1; color:var(--tono, var(--color-primario)); }
.test-perfumeria-chip-titulo{ font-size:15px; font-weight:700; }
.test-perfumeria-chip-ayuda{ font-size:12.5px; font-weight:500; opacity:.7; }

/* Los aromas: chips de una línea con el punto de color del acorde, como el filtro del catálogo */
.test-perfumeria-chip.test-perfumeria-chip-acorde{
	flex-direction:row; gap:8px; min-height:42px; padding:8px 15px 8px 12px; border-radius:999px;
}
.test-perfumeria-chip-acorde .test-perfumeria-chip-titulo{ font-size:14px; font-weight:600; }
.test-perfumeria-color{ flex:0 0 15px; width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.test-perfumeria-extra{ display:none !important; }
.test-perfumeria-chip.test-perfumeria-mas{ border-style:dashed; font-size:14px; font-weight:600; opacity:.85; }

/* La intensidad: tres barritas que crecen, llenas según el nivel */
.test-perfumeria-nivel{ display:inline-flex; align-items:flex-end; gap:4px; height:26px; }
.test-perfumeria-nivel span{ width:7px; border-radius:3px; background:rgba(127,127,127,.3); }
.test-perfumeria-nivel span:nth-child(1){ height:10px; }
.test-perfumeria-nivel span:nth-child(2){ height:17px; }
.test-perfumeria-nivel span:nth-child(3){ height:24px; }
.test-perfumeria-nivel span.lleno{ background:var(--color-primario); }

.test-perfumeria-navegacion{ display:flex; align-items:center; gap:12px; margin-top:1.8rem; }
.test-perfumeria-navegacion .btn[hidden]{ display:none; }

/* ---------- El resultado ---------- */
.resultado-test-perfumeria-contenedor.cargando{ opacity:.5; pointer-events:none; transition:opacity .2s ease; }
.resultado-test-perfumeria-cabecera{
	display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 20px; margin-bottom:1.6rem;
}
.resultado-test-perfumeria-titulo{ min-width:0; flex:1 1 320px; }
.resultado-test-perfumeria-titulo p{ opacity:.8; }

/* Lo que eligió: un badge por respuesta, como una opción del test en chico (el ícono con el color de su barra en la ficha,
   las barritas de la intensidad), y los aromas con su color, como en la ficha y el comparador (.fp-perfumeria-acorde).
   Los que no le gustan van tachados y con el ícono de "no". Cada lista es una fila que se acomoda en el celular. */
.resultado-test-perfumeria-elegido{ display:flex; flex-wrap:wrap; gap:7px; margin:.8rem 0 0; padding:0; list-style:none; }
.resultado-test-perfumeria-elegido + .resultado-test-perfumeria-elegido{ margin-top:8px; }
.resultado-test-perfumeria-badge{
	display:inline-flex; align-items:center; gap:6px; min-height:32px; margin:0; padding:4px 13px 4px 10px;
	border:1px solid rgba(127,127,127,.25); border-radius:999px; background:rgba(255,255,255,.6);
	font-size:13.5px; font-weight:600; line-height:1.2;
}
.resultado-test-perfumeria-badge > i{ font-size:17px; line-height:1; color:var(--tono, var(--color-primario)); }
.resultado-test-perfumeria-badge .test-perfumeria-nivel{ gap:2px; height:15px; }
.resultado-test-perfumeria-badge .test-perfumeria-nivel span{ width:4px; border-radius:2px; }
.resultado-test-perfumeria-badge .test-perfumeria-nivel span:nth-child(1){ height:6px; }
.resultado-test-perfumeria-badge .test-perfumeria-nivel span:nth-child(2){ height:10px; }
.resultado-test-perfumeria-badge .test-perfumeria-nivel span:nth-child(3){ height:15px; }
.fp-perfumeria-acorde.resultado-test-perfumeria-acorde{ gap:5px; min-width:0; min-height:32px; margin:0; padding:4px 14px; }
.fp-perfumeria-acorde.resultado-test-perfumeria-acorde:hover{ transform:none; box-shadow:0 1px 3px rgba(0, 0, 0, .18); }
.resultado-test-perfumeria-acorde .fp-perfumeria-acorde-nombre{ font-size:13px; }
.resultado-test-perfumeria-acorde-evita{ opacity:.72; }
.resultado-test-perfumeria-acorde-evita .fp-perfumeria-acorde-nombre{ text-decoration:line-through; text-decoration-thickness:1.5px; }
.resultado-test-perfumeria-acorde-evita > i{ font-size:15px; line-height:1; color:#fff; filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.fp-perfumeria-acorde-claro.resultado-test-perfumeria-acorde-evita > i{ color:#2a2a2a; filter:none; }
.resultado-test-perfumeria-aviso{ display:flex; align-items:center; gap:8px; margin:-.6rem 0 1.6rem; font-size:14px; opacity:.85; }
.resultado-test-perfumeria-aviso i{ font-size:18px; color:var(--color-primario); }

/* Por qué se recomienda, debajo del nombre de la tarjeta */
.motivo-tarjeta-perfumeria{ margin:.25rem 0 .55rem; font-size:12.5px; line-height:1.45; }
.motivo-tarjeta-perfumeria-puntaje{
	display:inline-block; margin:0 6px 3px 0; padding:1px 8px; border-radius:999px; background:var(--color-primario-10);
	color:var(--color-primario); font-size:11.5px; font-weight:700; white-space:nowrap;
}
.motivo-tarjeta-perfumeria-texto{ opacity:.8; }

/* ---------- El botón "Comparar" ---------- */
/* En las tarjetas: abajo a la izquierda de la foto (arriba están las etiquetas y el corazón, abajo a la derecha el
   círculo de "Inspirado en"), con el estilo del corazón de las tarjetas */
.btn-comparador-perfumeria.comparador-perfumeria-tarjeta{
	position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; height:30px;
	margin:0; padding:0 11px 0 9px; border:1.5px solid rgba(127,127,127,.28); border-radius:999px;
	background:rgba(255,255,255,.92); color:var(--color-primario); font-size:12px; font-weight:600; line-height:1;
	white-space:nowrap; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-comparador-perfumeria.comparador-perfumeria-tarjeta i{ font-size:15px; line-height:1; }
.btn-comparador-perfumeria.comparador-perfumeria-tarjeta:hover{ border-color:var(--color-primario); }
.btn-comparador-perfumeria.comparador-perfumeria-tarjeta:active{ transform:scale(.94); }
.btn-comparador-perfumeria.comparador-perfumeria-tarjeta.activo{ border-color:var(--color-primario); background:var(--color-primario); color:#fff; }
/* En la ficha: el botón redondo de compartir; elegido, lleno como el corazón */
.btn-comparador-perfumeria.comparador-perfumeria-ficha i{ font-size:19px; line-height:1; }
.btn-comparador-perfumeria.comparador-perfumeria-ficha.activo{ border-color:var(--color-primario); background:var(--color-primario-10); }

/* ---------- La barra flotante del comparador ---------- */
.barra-comparador-perfumeria{
	position:fixed; left:50%; bottom:16px; z-index:1039; display:flex; align-items:center; gap:12px;
	max-width:calc(100vw - 32px); padding:8px 8px 8px 10px; border:1px solid rgba(24,28,38,.12); border-radius:999px;
	background:#fff; color:#1d2026; box-shadow:0 18px 40px -14px rgba(16,20,32,.38), 0 3px 10px -4px rgba(16,20,32,.14);
	transform:translateX(-50%); animation:entrarBarraComparadorPerfumeria .28s cubic-bezier(.2,.9,.25,1.15);
}
body.fp-barra-visible .barra-comparador-perfumeria{ bottom:96px; }
.barra-comparador-perfumeria.sacudir{ animation:sacudirBarraComparadorPerfumeria .42s ease; }
.barra-comparador-perfumeria-fotos{ display:flex; flex:0 0 auto; padding-left:4px; }
.barra-comparador-perfumeria-foto{
	display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:-8px; overflow:hidden;
	border:2px solid #fff; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(24,28,38,.12); color:#9aa0a8; font-size:16px;
}
.barra-comparador-perfumeria-foto:first-child{ margin-left:0; }
.barra-comparador-perfumeria-foto img{ width:100%; height:100% !important; padding:3px; object-fit:contain; }
.barra-comparador-perfumeria-foto.vacia{ border-style:dashed; border-color:rgba(24,28,38,.22); background:transparent; box-shadow:none; }
.barra-comparador-perfumeria-foto.recien{ animation:favoritosLatido .5s cubic-bezier(.3,1.6,.5,1); }
.barra-comparador-perfumeria-texto{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.barra-comparador-perfumeria-texto strong{ font-size:13.5px; white-space:nowrap; }
.barra-comparador-perfumeria-texto span{ font-size:12px; color:#6b7079; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra-comparador-perfumeria-texto span.aviso{ color:var(--color-primario); font-weight:600; }
.barra-comparador-perfumeria .barra-comparador-perfumeria-ir{ flex:0 0 auto; margin:0; padding:.45rem 1.1rem; }
.barra-comparador-perfumeria-cerrar{
	display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:32px; height:32px; margin:0; padding:0;
	border:0; border-radius:50%; background:transparent; color:#6b7079; font-size:18px; cursor:pointer;
}
.barra-comparador-perfumeria-cerrar:hover{ background:rgba(24,28,38,.06); color:#1d2026; }

/* El popover del botón "Comparar" (abrirPopoverComparadorPerfumeria en assets/js/perfumeria.js): el del corazón de
   favoritos (.pop-favoritos-tq), con su caja, su flecha, sus colores y su control segmentado, acá con un solo chip
   para sumar el perfume, que no aparece si ya está (en la lista va resaltado). Arriba la lista con la foto y el nombre,
   y la X de la barra flotante para sacar cada uno; abajo, el botón para ir a compararlos. */
.pop-favoritos-tq.pop-comparador-perfumeria{ width:276px; padding:8px 12px 12px; }
.pop-comparador-perfumeria-lista{ margin:0 0 10px; padding:0; list-style:none; }
.pop-comparador-perfumeria-item{ display:flex; align-items:center; gap:9px; padding:6px 0; border-top:1px solid var(--ftq-borde); }
.pop-comparador-perfumeria-item:first-child{ padding-top:0; border-top:0; }
.pop-comparador-perfumeria-foto{
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; overflow:hidden;
	border:1px solid var(--ftq-borde); border-radius:10px; background:#fff; color:#6b7079; font-size:18px;
}
.pop-comparador-perfumeria-foto img{ width:100%; height:100% !important; padding:3px; object-fit:contain; }
.pop-comparador-perfumeria-texto{ display:flex; flex:1 1 auto; flex-direction:column; min-width:0; line-height:1.25; }
.pop-comparador-perfumeria-nombre{ display:-webkit-box; overflow:hidden; font-size:13px; font-weight:600; color:var(--ftq-texto); -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.pop-comparador-perfumeria-item.actual .pop-comparador-perfumeria-nombre{ color:var(--ftq-acento); }
.pop-comparador-perfumeria-quitar.barra-comparador-perfumeria-cerrar{ width:28px; height:28px; color:var(--ftq-suave); font-size:16px; }
.pop-comparador-perfumeria-vacio{ margin:0 0 10px; font-size:13px; line-height:1.4; color:var(--ftq-suave); }
.pop-favoritos-tq-segmento.pop-comparador-perfumeria-segmento{ grid-template-columns:1fr; }
.pop-comparador-perfumeria-segmento .pop-favoritos-tq-indicador{ width:calc(100% - 6px); }
.pop-comparador-perfumeria-segmento .pop-favoritos-tq-chip i{ font-size:16px; line-height:1; }
.pop-favoritos-tq .pop-comparador-perfumeria-ir{ display:flex; justify-content:center; width:100%; margin:10px 0 0; }
@keyframes entrarBarraComparadorPerfumeria{ from{ opacity:0; transform:translate(-50%, 16px); } to{ opacity:1; transform:translate(-50%, 0); } }
@keyframes sacudirBarraComparadorPerfumeria{
	0%, 100%{ transform:translateX(-50%); } 20%{ transform:translateX(calc(-50% - 7px)); } 40%{ transform:translateX(calc(-50% + 6px)); }
	60%{ transform:translateX(calc(-50% - 4px)); } 80%{ transform:translateX(calc(-50% + 2px)); }
}
@keyframes sacudirPerfumeria{ 0%, 100%{ transform:none; } 25%{ transform:translateX(-5px); } 50%{ transform:translateX(4px); } 75%{ transform:translateX(-2px); } }

/* ---------- La comparación ---------- */
.comparador-perfumeria-cabecera{
	display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 20px; margin-bottom:2rem;
}
.comparador-perfumeria-cabecera p{ opacity:.8; }
.comparador-perfumeria-cabecera .btn[hidden]{ display:none; }
.comparador-perfumeria{ --rotulo-comparador:150px; }
.comparador-perfumeria-fila{
	display:grid; grid-template-columns:var(--rotulo-comparador) repeat(var(--columnas-comparador), minmax(0, 1fr));
	column-gap:22px; align-items:start; padding:16px 0; border-bottom:1px solid rgba(127,127,127,.18);
}
.comparador-perfumeria-fila-productos{ align-items:stretch; padding-top:0; }
.comparador-perfumeria-rotulo{
	display:flex; align-items:center; gap:7px; padding-top:3px; font-size:.78rem; font-weight:600; letter-spacing:.08em;
	text-transform:uppercase; color:var(--fp-muted);
}
.comparador-perfumeria-rotulo i{ font-size:16px; color:var(--color-primario); opacity:.85; }
.comparador-perfumeria-celda{ min-width:0; }

/* Cada perfume de arriba va en una tarjeta, como las miniaturas del catálogo: neutra (borde y fondo apenas marcados,
   como la caja del test y la de "Sumá otro perfume"), con la paleta en los sitios oscuros, y el sitio que tiene su
   propia tarjeta en el catálogo la repite en su custom.css (emantoni). */
.comparador-perfumeria-producto{
	position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:100%; text-align:center;
	padding:15px; border:1px solid rgba(127,127,127,.2); border-radius:16px; background:rgba(127,127,127,.04);
}
.comparador-perfumeria-foto-caja{ position:relative; width:100%; max-width:230px; margin-bottom:6px; }
.comparador-perfumeria-foto{ display:block; width:100%; }
.comparador-perfumeria-foto img{ display:block; width:100%; height:auto !important; aspect-ratio:1 / 1; object-fit:contain; border-radius:10px; background:#fff; }
.comparador-perfumeria-quitar{
	position:absolute; top:8px; right:8px; z-index:1; display:inline-flex; align-items:center; justify-content:center;
	width:34px; height:34px; margin:0; padding:0; border:1.5px solid rgba(127,127,127,.28); border-radius:50%;
	background:rgba(255,255,255,.92); color:var(--color-primario); font-size:18px; line-height:1; cursor:pointer;
	transition:border-color .15s ease, transform .15s ease;
}
.comparador-perfumeria-quitar:hover{ border-color:var(--color-primario); }
.comparador-perfumeria-quitar:active{ transform:scale(.92); }
.comparador-perfumeria-casa{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fp-muted); text-decoration:none; }
.comparador-perfumeria-casa:hover{ color:var(--color-primario); }
.comparador-perfumeria-nombre{ font-size:16px; font-weight:700; line-height:1.3; text-decoration:none; }
.comparador-perfumeria-imita{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; line-height:1.3; color:var(--fp-muted); text-align:left; }
.comparador-perfumeria-imita-foto{
	flex:0 0 28px; width:28px; height:28px; overflow:hidden; border:1.5px solid #fff; border-radius:50%; background:#fff;
	box-shadow:0 0 0 1.5px var(--color-primario);
}
.comparador-perfumeria-imita-foto img{ width:100%; height:100% !important; padding:2px; object-fit:contain; }
.comparador-perfumeria-imita-label{ font-weight:600; }
.comparador-perfumeria-precio{ font-size:19px; font-weight:700; line-height:1.2; }
.comparador-perfumeria-precio small{ font-size:12.5px; font-weight:500; opacity:.75; }
.comparador-perfumeria-sin-stock{ font-size:13px; font-weight:600; color:var(--fp-muted); }
.comparador-perfumeria-acciones{ margin-top:auto; padding-top:6px; }
.comparador-perfumeria-acciones .btn{ margin:0; }

.comparador-perfumeria-acordes.fp-perfumeria-acordes{ padding:.7rem .75rem; }
.comparador-perfumeria-notas{ margin:0 0 10px; font-size:13.5px; line-height:1.45; }
.comparador-perfumeria-notas:last-child{ margin-bottom:0; }
.comparador-perfumeria-notas-nivel{ display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fp-muted); }
/* Cada nota, una miniatura redonda con la foto de la pirámide de la ficha (.fp-perfumeria-nota-img) o su inicial. El
   nombre lo muestra el popover (abrirPopoverNotaComparadorPerfumeria en assets/js/perfumeria.js). */
.comparador-perfumeria-notas-fotos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.comparador-perfumeria-nota{
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; margin:0;
	padding:0; overflow:hidden; border:1px solid var(--fp-border); border-radius:50%; background:#fff; cursor:pointer;
	transition:border-color .18s ease, transform .18s ease;
}
.comparador-perfumeria-nota img{ display:block; width:100%; height:100% !important; object-fit:cover; }
.comparador-perfumeria-nota:hover,
.comparador-perfumeria-nota.activa{ border-color:var(--color-primario); transform:translateY(-2px); }
.comparador-perfumeria-nota:focus{ outline:none; }
.comparador-perfumeria-nota:focus-visible{ outline:2px solid var(--color-primario); outline-offset:2px; }
.comparador-perfumeria-nota-inicial{ font-size:15px; font-weight:700; line-height:1; color:var(--fp-muted); }
/* El popover de la nota: el de "Inspirado en" (.pop-favoritos-tq), con el nivel arriba y el nombre */
.pop-favoritos-tq.pop-nota-comparador-perfumeria{ display:flex; flex-direction:column; gap:2px; width:auto; max-width:min(240px, calc(100vw - 24px)); padding:7px 14px 8px; }
.pop-favoritos-tq.pop-nota-comparador-perfumeria[hidden]{ display:none; }
.pop-nota-comparador-perfumeria .pop-favoritos-tq-titulo{ flex:0 0 auto; font-size:12px; }
.pop-nota-comparador-perfumeria-nombre{ color:var(--ftq-texto); font-size:14px; font-weight:600; line-height:1.25; }

/* Los trofeos (la que más dura, la que más se siente, la más económica): el badge de la ficha (.fp-badge-accent) a la
   derecha del dato, en una fila que lo baja al renglón siguiente si no entra */
.comparador-perfumeria-trofeo-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; }
.comparador-perfumeria-valor{ font-size:12.5px; color:var(--fp-muted); }
.fp-badge-accent.comparador-perfumeria-mejor{ gap:4px; max-width:100%; }
.comparador-perfumeria-mejor i{ font-size:13px; line-height:1; }
.fp-perfumeria-barra-fila.comparador-perfumeria-barra{ grid-template-columns:1.1rem 4.8rem minmax(0, 1fr); margin-bottom:5px; }
.comparador-perfumeria-tamano{ display:flex; justify-content:space-between; gap:10px; margin:0 0 5px; font-size:13.5px; }
.comparador-perfumeria-tamano.con-trofeo{ flex-wrap:wrap; align-items:center; gap:5px 8px; }
.comparador-perfumeria-tamano.con-trofeo .comparador-perfumeria-tamano-precio{ margin-left:auto; }
.comparador-perfumeria-tamano-precio{ font-weight:700; white-space:nowrap; }
.comparador-perfumeria-tamano.sin-stock{ opacity:.55; }
.comparador-perfumeria-tamano.sin-stock .comparador-perfumeria-tamano-precio{ font-weight:500; }
.comparador-perfumeria-sin-dato{ font-size:13px; color:var(--fp-muted); }

/* El lugar para sumar otro, cuando hay uno solo */
.comparador-perfumeria-sumar-caja{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:100%; min-height:220px;
	padding:20px; border:1.5px dashed rgba(127,127,127,.35); border-radius:16px; color:inherit; text-align:center; text-decoration:none;
	transition:border-color .15s ease;
}
.comparador-perfumeria-sumar-caja:hover{ border-color:var(--color-primario); color:inherit; }
.comparador-perfumeria-sumar-caja .favoritos-tengo-quiero-vacio-icono{ margin-bottom:8px; }
.comparador-perfumeria-sumar-texto{ font-size:15px; font-weight:700; }
.comparador-perfumeria-sumar-ayuda{ font-size:13px; opacity:.75; }

/* ---------- El perfil olfativo ---------- */
.perfil-olfativo-perfumeria-cabecera{ display:flex; align-items:center; gap:14px; margin-bottom:1.4rem; }
.perfil-olfativo-perfumeria-icono{
	display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
	background:var(--color-primario-10); color:var(--color-primario); font-size:22px; line-height:1;
}
.perfil-olfativo-perfumeria-resumen{ margin:0; font-size:17px; font-weight:700; line-height:1.4; }
.perfil-olfativo-perfumeria-origen{ margin:2px 0 0; font-size:13px; opacity:.75; }
.perfil-olfativo-perfumeria-cuerpo{ margin-bottom:2rem; }
.perfil-olfativo-perfumeria-grupos{ display:grid; gap:1rem; }
.perfil-olfativo-perfumeria-falta{
	display:flex; align-items:center; gap:14px; margin:0 0 1.6rem; padding:16px 18px; border-radius:16px;
	border:1px solid color-mix(in srgb, var(--tono, var(--color-primario)) 45%, transparent);
	background:color-mix(in srgb, var(--tono, var(--color-primario)) 14%, transparent);
}
.perfil-olfativo-perfumeria-falta-icono{
	display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
	background:var(--tono, var(--color-primario)); color:#fff; font-size:22px;
}
.perfil-olfativo-perfumeria-falta-titulo{ margin:0 0 2px; font-size:1.15rem; }
.perfil-olfativo-perfumeria-falta p{ font-size:14px; opacity:.85; }
.perfil-olfativo-perfumeria-titulo{ margin:.5rem 0 .2rem; font-size:1.25rem; }
.perfil-olfativo-perfumeria-bajada{ margin-bottom:1.4rem; font-size:14px; opacity:.8; }

/* En Mi cuenta: el portal tiene su aspecto claro propio (portal-cuenta.css) también en los sitios oscuros, así que el
   perfil toma sus tintas y sus fondos en vez de los del sitio */
.portal-cuenta .perfil-olfativo-perfumeria-portal{
	--fp-ink:var(--pc-tinta); --fp-muted:var(--pc-tinta-2); --fp-soft:var(--pc-fondo); --fp-border-strong:var(--pc-linea-fuerte);
}
.portal-cuenta .perfil-olfativo-perfumeria-portal .fp-perfumeria-acordes,
.portal-cuenta .perfil-olfativo-perfumeria-portal .fp-perfumeria-grupo{ background:var(--pc-fondo); border-color:var(--pc-linea); }
.portal-cuenta .perfil-olfativo-perfumeria-portal .fp-perfumeria-barra-pista{ background:rgba(125, 125, 135, .16); }
.portal-cuenta .perfil-olfativo-perfumeria-portal .perfil-olfativo-perfumeria-resumen{ color:var(--pc-tinta); }
.portal-cuenta .perfil-olfativo-perfumeria-portal .perfil-olfativo-perfumeria-origen{ color:var(--pc-tinta-3); opacity:1; }
.portal-cuenta .perfil-olfativo-perfumeria-portal .perfil-olfativo-perfumeria-icono{ background:var(--pc-marca-suave); color:var(--pc-marca); }
.portal-cuenta .perfil-olfativo-perfumeria-portal .perfil-olfativo-perfumeria-cuerpo{ margin-bottom:0; }
.portal-cuenta .perfil-olfativo-perfumeria-falta-portal{ display:flex; align-items:center; gap:14px; }
.portal-cuenta .perfil-olfativo-perfumeria-falta-portal .perfil-olfativo-perfumeria-falta-icono{ width:40px; height:40px; font-size:20px; }
.perfil-olfativo-perfumeria-fila{ grid-template-columns:56px minmax(0, 1fr) 110px 90px; }
.perfil-olfativo-perfumeria-fila-foto{ display:block; width:56px; height:56px; overflow:hidden; border:1px solid var(--pc-linea); border-radius:var(--pc-radio-chico); background:#fff; }
.perfil-olfativo-perfumeria-fila-foto img{ width:100%; height:100% !important; object-fit:contain; }
/* El portal apila las filas en el celular (portal-cuenta.css): estas mantienen la foto al lado, como una lista de compras */
@media (max-width:767.98px){
	.portal-cuenta .pc-fila.perfil-olfativo-perfumeria-fila{ grid-template-columns:48px minmax(0, 1fr) auto !important; gap:12px; }
	.portal-cuenta .pc-fila.perfil-olfativo-perfumeria-fila .der{ display:none; }
	.portal-cuenta .pc-fila.perfil-olfativo-perfumeria-fila .pc-fila-cifra{ text-align:right; font-size:14px; }
	.perfil-olfativo-perfumeria-fila-foto{ width:48px; height:48px; }
}

/* La pestaña "Tu perfil" de Favoritos: esconde el mosaico, los filtros y el orden, y el perfil ocupa todo el ancho */
#divPerfilOlfativoFavoritos{ display:none; }
#divPaginaFavoritos.perfil-olfativo-activo #divPerfilOlfativoFavoritos{ display:block; }
#divPaginaFavoritos.perfil-olfativo-activo #divProductosTengoQuieroFavoritos,
#divPaginaFavoritos.perfil-olfativo-activo .aside-favoritos-tengo-quiero,
#divPaginaFavoritos.perfil-olfativo-activo .div-filtros-shop .form-select-wrapper,
#divPaginaFavoritos.perfil-olfativo-activo .div-filtros-shop .fa-sliders-h{ display:none !important; }
@media (min-width:992px){
	#divPaginaFavoritos.perfil-olfativo-activo .col-lg-9.order-lg-2{ flex:0 0 100%; max-width:100%; }
}
/* En el celular entran las tres pestañas: la del perfil toma sólo su ancho y todas achican el relleno */
@media (max-width:575.98px){
	.favoritos-tengo-quiero-tabs-pagina .nav-item:has(.nav-link[data-tipo="perfil"]){ flex:0 0 auto; }
	.favoritos-tengo-quiero-tabs-pagina:has(.nav-link[data-tipo="perfil"]){ gap:.4rem; }
	.favoritos-tengo-quiero-tabs-pagina:has(.nav-link[data-tipo="perfil"]) .nav-link{ padding-left:.4rem; padding-right:.4rem; font-size:13.5px; }
	.favoritos-tengo-quiero-tabs-pagina:has(.nav-link[data-tipo="perfil"]) .nav-link .pe-1{ padding-right:.2rem !important; }
}

/* ---------- El bloque "Encontrá tu perfume" (assets/ajax/bloques/test_perfume.php) ---------- */
.bloque-test-perfumeria{
	display:flex; align-items:center; gap:24px 32px; padding:30px 34px; border:1px solid rgba(127,127,127,.2); border-radius:20px;
	background:rgba(127,127,127,.05);
}
.bloque-test-perfumeria-texto{ flex:1 1 auto; min-width:0; }
.bloque-test-perfumeria-texto h2{ margin-bottom:.35rem; }
.bloque-test-perfumeria-texto p{ margin-bottom:0; opacity:.85; }
.bloque-test-perfumeria-paleta{ display:flex; flex:0 0 auto; }
.bloque-test-perfumeria-paleta span{
	width:34px; height:34px; margin-left:-9px; border:2px solid #fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.bloque-test-perfumeria-paleta span:first-child{ margin-left:0; }
.bloque-test-perfumeria .btn{ flex:0 0 auto; margin:0; }

/* ---------- Celular ---------- */
@media (max-width:767.98px){
	.comparador-perfumeria{ --rotulo-comparador:0px; }
	.comparador-perfumeria-fila{ grid-template-columns:repeat(var(--columnas-comparador), minmax(0, 1fr)); column-gap:10px; row-gap:10px; }
	.comparador-perfumeria-rotulo{ grid-column:1 / -1; padding-top:0; }
	.comparador-perfumeria-rotulo-vacio{ display:none; }
	/* Tres tarjetas por fila en el ancho del celular: menos relleno para que no se coma la foto */
	.comparador-perfumeria-producto{ padding:8px; }
	.comparador-perfumeria-nombre{ font-size:13.5px; }
	.comparador-perfumeria-casa{ font-size:10.5px; }
	.comparador-perfumeria-imita{ flex-direction:column; gap:3px; font-size:11.5px; text-align:center; }
	.comparador-perfumeria-precio{ font-size:15px; }
	.comparador-perfumeria-quitar{ top:4px; right:4px; width:30px; height:30px; font-size:16px; }
	.comparador-perfumeria-acciones{ width:100%; }
	.comparador-perfumeria-acciones .btn{ width:100%; justify-content:center; padding:.45rem .3rem; font-size:11px; letter-spacing:.02em; white-space:normal; line-height:1.2; }
	.comparador-perfumeria-acciones .btn i{ display:none; }
	.comparador-perfumeria-acordes.fp-perfumeria-acordes{ padding:.5rem; }
	.comparador-perfumeria-acordes .fp-perfumeria-acorde{ min-width:100%; padding:.22rem .5rem; }
	.comparador-perfumeria-acordes .fp-perfumeria-acorde-nombre{ font-size:.66rem; }
	.comparador-perfumeria-notas{ font-size:12px; }
	.fp-perfumeria-barra-fila.comparador-perfumeria-barra{ grid-template-columns:1rem minmax(0, 1fr); gap:.35rem; }
	.comparador-perfumeria-barra .fp-perfumeria-barra-label{ display:none; }
	.comparador-perfumeria-valor{ font-size:11.5px; }
	/* En la columna angosta el trofeo puede partir su texto en dos renglones */
	.fp-badge-accent.comparador-perfumeria-mejor{ font-size:9.5px; white-space:normal; line-height:1.15; }
	.comparador-perfumeria-nota{ width:32px; height:32px; }
	.comparador-perfumeria-nota-inicial{ font-size:13px; }
	.comparador-perfumeria-notas-fotos{ gap:5px; }
	.comparador-perfumeria-tamano{ flex-direction:column; gap:0; font-size:12px; }
	.comparador-perfumeria-tamano.con-trofeo{ align-items:flex-start; gap:3px; }
	.comparador-perfumeria-tamano.con-trofeo .comparador-perfumeria-tamano-precio{ margin-left:0; }
	.comparador-perfumeria-sumar-caja{ min-height:160px; padding:12px; }
	.fp-perfumeria-estrellas{ font-size:.72rem; }
	.bloque-test-perfumeria{ flex-direction:column; align-items:flex-start; padding:24px 22px; }
}
@media (max-width:575.98px){
	.resultado-test-perfumeria-elegido{ gap:6px; }
	.resultado-test-perfumeria-badge{ min-height:30px; padding:3px 11px 3px 8px; font-size:12.5px; }
	.resultado-test-perfumeria-badge > i{ font-size:16px; }
	.fp-perfumeria-acorde.resultado-test-perfumeria-acorde{ min-height:30px; padding:3px 12px; }
	.resultado-test-perfumeria-acorde .fp-perfumeria-acorde-nombre{ font-size:12.5px; }
	.test-perfumeria-caja{ padding:20px 16px 18px; border-radius:16px; }
	.test-perfumeria-pregunta{ font-size:1.3rem; }
	.test-perfumeria-opciones{ gap:9px; }
	.test-perfumeria-chip{ min-height:84px; padding:12px 8px; }
	.test-perfumeria-chip > i{ font-size:23px; }
	.test-perfumeria-chip-titulo{ font-size:14px; }
	.test-perfumeria-chip-ayuda{ font-size:11.5px; }
	.test-perfumeria-chip.test-perfumeria-chip-acorde{ min-height:38px; padding:6px 12px 6px 10px; }
	.test-perfumeria-chip-acorde .test-perfumeria-chip-titulo{ font-size:13px; }
	.btn-comparador-perfumeria.comparador-perfumeria-tarjeta{ left:7px; bottom:7px; height:28px; padding:0 9px 0 7px; font-size:11px; gap:4px; }
	.btn-comparador-perfumeria.comparador-perfumeria-tarjeta i{ font-size:14px; }
	.barra-comparador-perfumeria{ left:12px; right:12px; bottom:12px; max-width:none; gap:9px; border-radius:18px; transform:none; animation-name:entrarBarraComparadorPerfumeriaCelular; }
	.barra-comparador-perfumeria.sacudir{ animation:sacudirPerfumeria .42s ease; }
	.barra-comparador-perfumeria-texto{ flex:1 1 auto; }
	.barra-comparador-perfumeria-texto strong{ white-space:normal; font-size:13px; }
	.barra-comparador-perfumeria-texto span{ white-space:normal; font-size:11.5px; }
	.barra-comparador-perfumeria-foto.vacia{ display:none; }
	/* El botón de WhatsApp (abajo, en el borde) sube para no quedar debajo de la barra */
	body.con-barra-comparador-perfumeria .btn-whatsapp{ margin-bottom:72px; transition:margin .2s ease; }
	.barra-comparador-perfumeria-foto{ width:34px; height:34px; }
	.barra-comparador-perfumeria .barra-comparador-perfumeria-ir{ padding:.45rem .75rem; font-size:12px; letter-spacing:.04em; }
	.barra-comparador-perfumeria-cerrar{ width:28px; height:28px; }
	.perfil-olfativo-perfumeria-cabecera{ align-items:flex-start; }
	.perfil-olfativo-perfumeria-resumen{ font-size:15.5px; }
	.perfil-olfativo-perfumeria-falta{ align-items:flex-start; padding:14px; }
	@keyframes entrarBarraComparadorPerfumeriaCelular{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce){
	.barra-comparador-perfumeria,
	.barra-comparador-perfumeria.sacudir,
	.barra-comparador-perfumeria-foto.recien,
	.test-perfumeria-ayuda-aviso{ animation:none; }
}

/* ---------- Sitios oscuros (modo-oscuro.css: html.sitio-oscuro y la paleta --oscuro-*) ---------- */
html.sitio-oscuro .test-perfumeria-caja,
html.sitio-oscuro .bloque-test-perfumeria{ border-color:var(--oscuro-borde); background:var(--oscuro-panel); }
html.sitio-oscuro .test-perfumeria-cabecera h1,
html.sitio-oscuro .test-perfumeria-pregunta,
html.sitio-oscuro .bloque-test-perfumeria-texto h2,
html.sitio-oscuro .resultado-test-perfumeria-titulo h2,
html.sitio-oscuro .comparador-perfumeria-cabecera h1,
html.sitio-oscuro .perfil-olfativo-perfumeria-falta-titulo,
html.sitio-oscuro .perfil-olfativo-perfumeria-titulo{ color:var(--oscuro-texto); }
html.sitio-oscuro .test-perfumeria-avance-barra,
html.sitio-oscuro .test-perfumeria-nivel span.lleno{ background:var(--oscuro-acento); }
html.sitio-oscuro .test-perfumeria-chip{ border-color:var(--oscuro-borde); background:var(--oscuro-panel-2); color:var(--oscuro-texto); }
html.sitio-oscuro .test-perfumeria-chip:hover{ border-color:var(--oscuro-borde-acento); }
html.sitio-oscuro .test-perfumeria-chip[aria-pressed="true"]{
	border-color:var(--oscuro-acento); background:color-mix(in srgb, var(--oscuro-acento) 12%, var(--oscuro-panel-2)); color:var(--oscuro-acento);
	box-shadow:inset 0 0 0 1px var(--oscuro-acento);
}
html.sitio-oscuro .test-perfumeria-chip > i{ color:var(--tono, var(--oscuro-acento)); }
html.sitio-oscuro .test-perfumeria-color{ border-color:rgba(255,255,255,.18); }
html.sitio-oscuro .resultado-test-perfumeria-badge{ border-color:var(--oscuro-borde); background:var(--oscuro-panel-2); color:var(--oscuro-texto); }
html.sitio-oscuro .resultado-test-perfumeria-badge > i{ color:var(--tono, var(--oscuro-acento)); }
html.sitio-oscuro .test-perfumeria-ayuda-aviso,
html.sitio-oscuro .resultado-test-perfumeria-aviso i,
html.sitio-oscuro .comparador-perfumeria-rotulo i,
html.sitio-oscuro .comparador-perfumeria-casa:hover{ color:var(--oscuro-acento); }
html.sitio-oscuro .fp-badge-accent.comparador-perfumeria-mejor{ background:var(--oscuro-acento); color:var(--oscuro-texto-inverso); }
html.sitio-oscuro .comparador-perfumeria-nota{ border-color:var(--oscuro-borde-acento); }
html.sitio-oscuro .comparador-perfumeria-nota:hover,
html.sitio-oscuro .comparador-perfumeria-nota.activa{ border-color:var(--oscuro-acento); }
html.sitio-oscuro .comparador-perfumeria-nota:has(.comparador-perfumeria-nota-inicial){ background:var(--oscuro-panel-2); }
html.sitio-oscuro .comparador-perfumeria-nota-inicial{ color:var(--oscuro-acento); }
html.sitio-oscuro .motivo-tarjeta-perfumeria-puntaje,
html.sitio-oscuro .perfil-olfativo-perfumeria-icono{ background:color-mix(in srgb, var(--oscuro-acento) 14%, transparent); color:var(--oscuro-acento); }
html.sitio-oscuro .motivo-tarjeta-perfumeria-texto{ color:var(--oscuro-texto-suave); opacity:1; }

html.sitio-oscuro .btn-comparador-perfumeria.comparador-perfumeria-tarjeta{
	border-color:var(--oscuro-borde-acento); background:color-mix(in srgb, var(--oscuro-fondo) 82%, transparent); color:var(--oscuro-acento);
}
html.sitio-oscuro .btn-comparador-perfumeria.comparador-perfumeria-tarjeta:hover{ border-color:var(--oscuro-acento); }
html.sitio-oscuro .btn-comparador-perfumeria.comparador-perfumeria-tarjeta.activo{ border-color:var(--oscuro-acento); background:var(--oscuro-acento); color:var(--oscuro-texto-inverso); }
html.sitio-oscuro .btn-comparador-perfumeria.comparador-perfumeria-ficha.activo{ border-color:var(--oscuro-acento); background:color-mix(in srgb, var(--oscuro-acento) 12%, transparent); }

html.sitio-oscuro .barra-comparador-perfumeria{
	border-color:var(--oscuro-borde-acento); background:var(--oscuro-panel-2); color:var(--oscuro-texto);
	box-shadow:0 22px 48px -16px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.4);
}
html.sitio-oscuro .barra-comparador-perfumeria-foto{ border-color:var(--oscuro-panel-2); box-shadow:0 0 0 1px var(--oscuro-borde); color:var(--oscuro-texto-suave); }
html.sitio-oscuro .barra-comparador-perfumeria-foto.vacia{ border-color:var(--oscuro-borde-acento); background:transparent; box-shadow:none; }
html.sitio-oscuro .barra-comparador-perfumeria-texto span,
html.sitio-oscuro .barra-comparador-perfumeria-cerrar{ color:var(--oscuro-texto-suave); }
html.sitio-oscuro .barra-comparador-perfumeria-texto span.aviso{ color:var(--oscuro-acento); }
html.sitio-oscuro .barra-comparador-perfumeria-cerrar:hover{ background:rgba(255,255,255,.06); color:var(--oscuro-texto); }

html.sitio-oscuro .comparador-perfumeria-fila{ border-bottom-color:var(--oscuro-borde); }
html.sitio-oscuro .comparador-perfumeria-producto{ border-color:var(--oscuro-borde); background:var(--oscuro-panel); }
html.sitio-oscuro .comparador-perfumeria-nombre{ color:var(--oscuro-texto) !important; }
html.sitio-oscuro .comparador-perfumeria-quitar{ border-color:var(--oscuro-borde-acento); background:color-mix(in srgb, var(--oscuro-fondo) 82%, transparent); color:var(--oscuro-acento); }
html.sitio-oscuro .comparador-perfumeria-imita-foto{ border-color:#fff; box-shadow:0 0 0 1.5px var(--oscuro-acento); }
html.sitio-oscuro .comparador-perfumeria-sumar-caja{ border-color:var(--oscuro-borde-acento); }
html.sitio-oscuro .comparador-perfumeria-sumar-caja:hover{ border-color:var(--oscuro-acento); }

html.sitio-oscuro .perfil-olfativo-perfumeria-resumen{ color:var(--oscuro-texto); }
html.sitio-oscuro .perfil-olfativo-perfumeria-falta p{ color:var(--oscuro-texto-suave); opacity:1; }
html.sitio-oscuro .bloque-test-perfumeria-paleta span{ border-color:var(--oscuro-panel); }