/* Componentes de las fichas de perfume: notas (pirámide), acordes y "cuándo llevarlo". Solo se carga en las entradas. */

.perfumetti-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   Pirámide de notas: franjas que se estrechan hacia arriba
   -------------------------------------------------------------------------- */

.perfumetti-pyramid { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 1.5rem 0 3rem; }

.perfumetti-tier {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 1.25rem 1.125rem;
  border-radius: 4px;
  background: var(--tier-bg);
  color: var(--tier-fg);
}
.perfumetti-tier--top { width: 66%; --tier-bg: #5CE1B5; --tier-fg: #15131E; }
.perfumetti-tier--heart { width: 83%; --tier-bg: light-dark(#E4DEFF, #2E2650); --tier-fg: light-dark(#3B22B8, #D6CEFF); }
.perfumetti-tier--base { width: 100%; --tier-bg: light-dark(#4B2FD0, #A592FF); --tier-fg: light-dark(#FFFFFF, #15131E); }
@media (max-width: 600px) {
  .perfumetti-tier--top { width: 80%; }
  .perfumetti-tier--heart { width: 90%; }
}

.perfumetti-tier__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; margin-bottom: 0.625rem; }
.perfumetti-tier .perfumetti-tier__name { margin: 0; font-family: var(--wp--preset--font-family--titulares); font-size: 1.375rem; font-weight: 500; line-height: 1.2; color: inherit; }
.perfumetti-tier__time { font-size: 0.8125rem; opacity: 0.85; }

.perfumetti-tier .perfumetti-chips { margin: 0; }
.perfumetti-tier .perfumetti-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}

/* Texto explicativo: siempre visible; en equipos con ratón pasa a ser un globo */
.perfumetti-tier__text { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.55; }

@media (hover: hover) and (pointer: fine) {
  .perfumetti-tier { cursor: help; }
  .perfumetti-tier__text {
    position: absolute;
    z-index: 5;
    left: 0;
    top: calc(100% + 0.5rem);
    width: min(100%, 28rem);
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    background: var(--wp--preset--color--texto);
    color: var(--wp--preset--color--fondo);
    box-shadow: 0 0 0 1px var(--wp--preset--color--fondo);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }
  /* Zona intermedia para poder mover el ratón hasta el globo sin que se cierre */
  .perfumetti-tier__text::before { content: ""; position: absolute; left: 0; right: 0; top: -0.75rem; height: 0.75rem; }
  .perfumetti-tier:is(:hover, :focus-visible, :focus-within):not([data-dismissed]) .perfumetti-tier__text {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .perfumetti-tier:focus-visible { outline: 3px solid var(--wp--preset--color--acento); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .perfumetti-tier__text { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Perfil aromático: barras de color con icono
   -------------------------------------------------------------------------- */

.perfumetti-chart { margin: 1.5rem 0 0; }
.perfumetti-chart ul { margin: 0; padding: 0; list-style: none; }
.perfumetti-chart li { display: grid; grid-template-columns: 11rem 1fr 2.25rem; align-items: center; gap: 0.75rem; padding: 0.3rem 0; --c: var(--wp--preset--color--acento); }
.perfumetti-chart .label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--wp--preset--font-size--small); }
.perfumetti-chart .label .pi { color: var(--c); }
.perfumetti-chart .track { display: block; height: 0.875rem; background: var(--wp--preset--color--etiqueta-fondo); border-radius: 4px; overflow: hidden; }
.perfumetti-chart .fill { display: block; height: 100%; background: var(--c); border-radius: 4px; }
.perfumetti-chart .value { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-secundario); text-align: right; }
.perfumetti-chart figcaption { color: var(--wp--preset--color--texto-secundario); font-size: var(--wp--preset--font-size--small); margin-top: 0.75rem; }
@media (max-width: 520px) {
  .perfumetti-chart li { grid-template-columns: 8.5rem 1fr 2rem; gap: 0.5rem; }
}

.perfumetti-chart [data-accord="warm-spicy"] { --c: #D9531E; }
.perfumetti-chart [data-accord="nutty"] { --c: #A0653A; }
.perfumetti-chart [data-accord="white-floral"] { --c: #A66BD1; }
.perfumetti-chart [data-accord="floral"] { --c: #D96FA3; }
.perfumetti-chart [data-accord="rose"] { --c: #D6457A; }
.perfumetti-chart [data-accord="citrus"] { --c: #E0A800; }
.perfumetti-chart [data-accord="fruity"] { --c: #E0405A; }
.perfumetti-chart [data-accord="balsamic"] { --c: #8C5A3C; }
.perfumetti-chart [data-accord="amber"] { --c: #D9922B; }
.perfumetti-chart [data-accord="sweet"] { --c: #E77FB0; }
.perfumetti-chart [data-accord="vanilla"] { --c: #D8B25A; }
.perfumetti-chart [data-accord="musky"] { --c: #9C94B8; }
.perfumetti-chart [data-accord="woody"] { --c: #7A5A3A; }
.perfumetti-chart [data-accord="green"] { --c: #4E9F5D; }
.perfumetti-chart [data-accord="aromatic"] { --c: #5B9A6A; }
.perfumetti-chart [data-accord="fresh-spicy"] { --c: #7FB03A; }
.perfumetti-chart [data-accord="soft-spicy"] { --c: #C98B5E; }
.perfumetti-chart [data-accord="aquatic"] { --c: #3BA7C9; }
.perfumetti-chart [data-accord="powdery"] { --c: #B7A5CC; }

/* --------------------------------------------------------------------------
   Cuándo llevarlo: momento del día y estaciones (mismos colores que las etiquetas)
   -------------------------------------------------------------------------- */

.perfumetti-wear { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 2rem; padding: 0; list-style: none; }
.perfumetti-wear li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 4px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  border: 1.5px solid transparent;
}
.perfumetti-wear .is-on { background: var(--tag-bg); color: var(--tag-fg); }
.perfumetti-wear .is-off { border: 1.5px dashed var(--wp--preset--color--texto-secundario); color: var(--wp--preset--color--texto-secundario); font-weight: 400; }