:root {
  --fondo: #000;
  --texto: #e8f6ff;
  --tenue: #7d8b96;
  --acento: #3df2ff;
  --panel: #0c1116;
  --borde: #1f2a33;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Sin esto, cualquier regla con display gana sobre el atributo hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* La cara ocupa todo y no se mueve: ni scroll, ni zoom, ni el menú del toque largo. */
#vista-cara {
  position: fixed;
  inset: var(--alto-oferta, 0px) 0 0 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#cara {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.aviso {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 6vh);
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--texto);
  font-size: clamp(14px, 2.6vmin, 22px);
  text-align: center;
  pointer-events: none;
}

.subtitulos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 3vh);
  padding: 0 6vw;
  text-align: center;
  pointer-events: none;
  font-size: clamp(14px, 3vmin, 26px);
}
.subtitulos p { margin: 0.2em 0; min-height: 1.3em; transition: opacity 0.6s; }
.subtitulos .vos { color: var(--tenue); font-style: italic; }
.subtitulos .robotin { color: var(--texto); }
.subtitulos.apagados { display: none; }

/* El engranaje casi no se ve, para no ensuciar la cara: aparece con el primer toque y
   se vuelve a esconder solo. */
.engranaje {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10px);
  right: calc(env(safe-area-inset-right) + 10px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--tenue);
  opacity: 0.12;
  transition: opacity 0.8s;
  border-radius: 50%;
}
.engranaje.visible { opacity: 0.8; }

.oferta {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  gap: 0.6em;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: calc(env(safe-area-inset-top) + 0.5em) 1em 0.5em;
  background: #0b2a30;
  font-size: 15px;
}

.panel {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--alto-oferta, 0px) + env(safe-area-inset-top) + 1em) 1.2em calc(env(safe-area-inset-bottom) + 2em);
}
.panel h1 { font-size: 1.4em; margin: 0.4em 0 0.8em; }
.panel a { color: var(--acento); }
.volver { text-decoration: none; }

fieldset {
  /* Un fieldset mide por defecto lo que su contenido más ancho: un select con una opción
     larga lo saca de la pantalla. */
  min-width: 0;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
  margin: 0 0 1em;
  padding: 0.8em 1em 1em;
}
legend { color: var(--acento); padding: 0 0.4em; }
fieldset label { display: flex; gap: 0.6em; align-items: center; margin: 0.55em 0; }
fieldset select, fieldset input[type="range"] { flex: 1; min-width: 0; max-width: 100%; }
select {
  background: #121a21;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.4em;
  font: inherit;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); width: 20px; height: 20px; }
input[type="range"] { accent-color: var(--acento); }

button {
  font: inherit;
  color: #001014;
  background: var(--acento);
  border: 0;
  border-radius: 8px;
  padding: 0.55em 1em;
  margin: 0.3em 0.3em 0 0;
  min-height: 44px;
}
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.humores { display: flex; flex-wrap: wrap; gap: 0.2em; margin-top: 0.4em; }
.humores button { background: #13232a; color: var(--texto); padding: 0.4em 0.8em; }

#foto-prueba { display: block; max-width: 100%; margin-top: 0.8em; border-radius: 8px; }
#estado-cerebro { color: var(--tenue); margin: 0.2em 0 0.4em; }
.sello { color: var(--tenue); font-size: 13px; text-align: center; margin-top: 2em; }

/* Barras de scroll del color del panel: la gris del sistema no va nunca. */
* { scrollbar-width: thin; scrollbar-color: #2a3a45 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2a3a45; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }