/* Perfumes Club · Pedidos en vivo. Sala de control, siempre oscura y luminosa.
   main.js actualiza --glow-rgb con el tinte del globo (la intensidad de la última hora). */

/* Cada fuente en dos trozos, como los da fontsource 5.3.0: latin y latin-ext (ą, č, ė, ł, ș, ž...,
   para lituano, letón, polaco, rumano, eslovaco y esloveno). El navegador solo baja latin-ext si
   la página tiene alguna de sus letras. El japonés sale con la fuente del sistema */
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fuentes/oxanium-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fuentes/oxanium-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fuentes/barlow-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fuentes/barlow-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fuentes/barlow-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fuentes/oxanium-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fuentes/oxanium-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fuentes/barlow-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fuentes/barlow-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fuentes/barlow-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  box-sizing: border-box;
  color-scheme: dark;
  --glow-rgb: 70, 140, 255;
  --espacio: #01030a;
  --tinta: #e4ecff;
  --tinta-tenue: #93a6cc;
  --tinta-debil: #5d6e91;
  --panel: rgba(7, 13, 30, .52);
  --ambar: #ffb547;
  --fuente-titulo: 'Oxanium', 'Barlow', system-ui, sans-serif;
  --fuente-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* En japonés, las letras latinas siguen con Barlow y Oxanium; las japonesas, con una del sistema */
html:lang(ja) {
  --fuente-titulo: 'Oxanium', 'Barlow', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
  --fuente-texto: 'Barlow', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; }
body {
  height: 100%; margin: 0; overflow: hidden;
  background: var(--espacio); color: var(--tinta);
  font: 400 14px/1.4 var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
}
.cielo {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 52%, rgba(var(--glow-rgb), .18), transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 115%, rgba(var(--glow-rgb), .12), transparent 60%),
    var(--espacio);
}
#escena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; transition: opacity .6s; }
#escena.arrastrando { cursor: grabbing; }
#escena.sobre { cursor: pointer; }
#escena:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--glow-rgb), .55); }
/* Sin conexión con el servicio: el mapa conserva lo último, atenuado */
body.desconectado #escena, body.desconectado #etiquetas { opacity: .6; }

#etiquetas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.etq {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 11.5px/1 var(--fuente-texto); letter-spacing: .01em; color: var(--tinta);
  text-shadow: 0 0 6px rgba(var(--glow-rgb), .9), 0 0 14px rgba(var(--glow-rgb), .45);
  opacity: 0; transition: opacity .35s; will-change: transform;
}
.etq.on { opacity: .92; }
.etq.central { font: 600 12.5px/1 var(--fuente-titulo); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cristal {
  background: linear-gradient(155deg, rgba(var(--glow-rgb), .13), rgba(255, 255, 255, .015) 38%, transparent 60%), var(--panel);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(var(--glow-rgb), .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 24px rgba(var(--glow-rgb), .06), 0 18px 50px rgba(0, 0, 0, .45), 0 0 34px rgba(var(--glow-rgb), .10);
}
.hud { position: fixed; pointer-events: none; z-index: 2; }
.hud > * { pointer-events: auto; }
.arriba { top: 0; left: 0; right: 0; padding: calc(18px + env(safe-area-inset-top, 0px)) 22px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.marca { display: flex; flex-direction: column; gap: 12px; max-width: min(1000px, 74vw); }
.titulo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.palabra { margin: 0; font: 600 30px/1 var(--fuente-titulo); letter-spacing: .015em; color: #fff; text-shadow: 0 0 18px rgba(var(--glow-rgb), .85), 0 0 42px rgba(var(--glow-rgb), .45); }
/* El logo de la marca, servido desde img/ (versión con «PERFUME'S» en blanco para el fondo oscuro).
   El halo hace de text-shadow */
.palabra img { display: block; height: 30px; width: auto; filter: drop-shadow(0 0 10px rgba(var(--glow-rgb), .55)); }
.vivo { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--fuente-texto); color: var(--tinta-tenue); }
.vivo i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--glow-rgb)); box-shadow: 0 0 10px rgb(var(--glow-rgb)); animation: latido 2s ease-in-out infinite; }
body.desconectado .vivo i { animation: none; background: var(--tinta-debil); box-shadow: none; }
@keyframes latido { 50% { opacity: .35; } }
.kpis { margin: 0; display: flex; flex-wrap: wrap; row-gap: 10px; border-radius: 16px; padding: 10px 6px; align-self: flex-start; }
.kpis div { padding: 2px 14px; }
.kpis dt { font: 500 12px/1.2 var(--fuente-texto); color: var(--tinta-tenue); }
.kpis dd { margin: 4px 0 0; font: 600 22px/1 var(--fuente-titulo); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 12px rgba(var(--glow-rgb), .55); }
/* Ancho justo para «Intensidad 100 %», lo más largo que lleva; con mínimo fijo para que no
   cambie de tamaño al alternar el idioma o la cifra */
.indicadores { text-align: right; border-radius: 16px; padding: 12px 16px; min-width: 160px; }
.indicadores p { margin: 6px 0 0; font-size: 12px; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.indicadores p:empty { display: none; }
.indicadores p.tenue { color: var(--tinta-debil); }
.intensidad { display: inline-flex; white-space: nowrap; align-items: baseline; gap: 8px; font-size: 13px; color: var(--tinta-tenue); }
.intensidad b { font: 600 20px/1 var(--fuente-titulo); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px currentColor; }

.lateral { position: fixed; right: 22px; top: calc(150px + env(safe-area-inset-top, 0px)); width: 300px; border-radius: 16px; padding: 12px 14px; z-index: 2; max-height: calc(100vh - 320px); overflow: hidden; }
.lateral h2 { margin: 0 0 8px; font: 600 14px/1 var(--fuente-titulo); color: #fff; letter-spacing: .02em; }
.lateral h2.sub { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(var(--glow-rgb), .16); }
.lateral ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lateral li { display: grid; grid-template-columns: 10px 1fr; gap: 1px 9px; font-size: 12.5px; line-height: 1.35; color: var(--tinta); }
.lateral li.nuevo { animation: entra .5s ease-out; }
.lateral li span { grid-column: 2; color: var(--tinta-debil); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lateral li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; grid-row: span 2; }
.lateral li.vacio { display: block; color: var(--tinta-debil); font-size: 12.5px; animation: none; }
.zonas { gap: 8px !important; }
.zonas li { grid-template-columns: 1fr; gap: 4px; }
.zonas li .zn { grid-column: 1; color: var(--tinta); font-size: 12.5px; }
.zonas li .barra { grid-column: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.zonas li .barra i { display: block; height: 100%; width: 0; border-radius: 3px; margin: 0; transition: width .6s ease; }
@keyframes entra { from { opacity: 0; transform: translateX(8px); } }

.abajo { bottom: 0; left: 0; right: 0; padding: 0 22px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.leyenda { border-radius: 16px; padding: 12px 16px; max-width: 420px; }
.leyenda summary { list-style: none; cursor: pointer; font: 600 14px/1 var(--fuente-titulo); color: #fff; display: flex; align-items: center; gap: 8px; }
.leyenda summary::-webkit-details-marker { display: none; }
.leyenda summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--tinta-tenue); border-bottom: 1.5px solid var(--tinta-tenue); transform: rotate(45deg) translateY(-2px); margin-left: auto; transition: transform .2s; }
.leyenda[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.leyenda summary:focus-visible { outline: 2px solid rgba(var(--glow-rgb), .7); outline-offset: 4px; border-radius: 4px; }
/* Castellano e inglés alternando en toda la página (idioma.js): un fundido corto en cada cambio,
   solo de los textos */
[data-t], .traducible { transition: opacity .35s ease; }
html.cambiando [data-t], html.cambiando .traducible { opacity: 0; }
.escala { margin: 12px 0 4px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #3380ff, #5c61ff 40%, #e542e0 66%, #ff2e38); box-shadow: 0 0 14px rgba(120, 90, 255, .45); }
.escala-texto { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tinta-debil); }
.formas { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 12.5px; color: var(--tinta); }
.formas li { display: flex; align-items: center; gap: 8px; }
.formas svg { width: 16px; height: 16px; flex: none; color: #7fb0ff; filter: drop-shadow(0 0 4px rgba(var(--glow-rgb), .9)); }
.formas li.eco svg { color: rgba(var(--glow-rgb), .55); filter: none; }
.atribucion { margin: 10px 0 0; font-size: 10.5px; color: var(--tinta-debil); }

.controles { border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fila { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-tenue); cursor: pointer; }
.sw input { appearance: none; -webkit-appearance: none; width: 30px; height: 17px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(var(--glow-rgb), .3); position: relative; margin: 0; cursor: pointer; transition: background .2s; }
.sw input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--tinta-tenue); transition: transform .2s, background .2s; }
.sw input:checked { background: rgba(var(--glow-rgb), .35); }
.sw input:checked::after { transform: translateX(13px); background: #fff; box-shadow: 0 0 8px rgb(var(--glow-rgb)); }
.sw input:focus-visible { outline: 2px solid rgba(var(--glow-rgb), .8); outline-offset: 2px; }
.boton { font: 500 13px/1 var(--fuente-texto); color: #fff; background: rgba(var(--glow-rgb), .14); border: 1px solid rgba(var(--glow-rgb), .4); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.boton:hover { background: rgba(var(--glow-rgb), .24); }
.boton:focus-visible { outline: 2px solid rgba(var(--glow-rgb), .8); outline-offset: 2px; }

.tip { position: fixed; left: 0; top: 0; width: 310px; border-radius: 12px; padding: 12px 14px 10px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .15s; }
.tip.on { opacity: 1; }
.tip header { display: flex; align-items: center; gap: 8px; }
.tip h3 { margin: 0; font: 600 15px/1.2 var(--fuente-titulo); color: #fff; flex: 1; min-width: 0; }
.tip .tipo { font-size: 12px; color: var(--tinta-tenue); margin: 3px 0 8px; }
.tip .estado { flex: none; font: 500 11.5px/1 var(--fuente-texto); padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor; }
.tip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12.5px; }
.tip dt { color: var(--tinta-tenue); }
/* Las marcas pueden ser largas: que bajen de línea antes que salirse */
.tip dd { margin: 0; text-align: right; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tip .grafica { margin-top: 9px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tinta-debil); }
.tip .grafica svg { flex: 1; height: 30px; }
.tip .nota { margin-top: 7px; font-size: 11px; color: var(--tinta-debil); }

.rotulo { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 440px; padding: 14px 20px; border-radius: 14px; z-index: 9; text-align: center; font: 500 15px/1.4 var(--fuente-texto); pointer-events: none; }
.rotulo[hidden] { display: none; }
.sin-conexion { top: auto; bottom: 120px; transform: translateX(-50%); color: var(--ambar); }

@media (max-width: 1100px) { .lateral { display: none; } }
@media (max-width: 760px) {
  .arriba { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 0; }
  .palabra { font-size: 22px; }
  /* 22 px de alto si cabe; en un móvil estrecho, el logo se encoge para dejar sitio a la
     intensidad, que no puede partirse */
  .marca { min-width: 0; }
  .palabra img { height: auto; width: 213px; max-width: 100%; }
  .vivo { font-size: 12.5px; }
  .kpis { padding: 8px 2px; }
  .kpis div { padding: 2px 10px; }
  .kpis dd { font-size: 17px; }
  .kpis dt { font-size: 11px; }
  .indicadores { flex: none; min-width: 0; padding: 8px 10px; border-radius: 12px; }
  .indicadores p { display: none; }
  .intensidad { font-size: 11px; }
  .intensidad b { font-size: 16px; }
  .abajo { flex-direction: column; align-items: stretch; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .leyenda { max-width: none; padding: 10px 14px; }
  .controles { align-items: stretch; padding: 10px; }
  .fila { justify-content: space-between; }
  .tip { width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .vivo i { animation: none; }
  .lateral li.nuevo { animation: none; }
  [data-t], .traducible { transition: none; }
}