/* ===========================================================================
   styles.css — KIORIGIN EVEN REALITIES
   ES: solo lo propio de este panel. Colores, tipografia, tarjetas y botones
       vienen del kit AURORA (design/aurora-{dark,light}.css), copiado de
       0_ISID_WEBRTC_0/docs/design sin modificarlo. Aqui NO se redefine
       ninguna variable --au-*: si un color no encaja, se corrige en el kit,
       no aqui, para que todos los frontends del ecosistema sigan iguales.
   EN: only what is specific to this panel. Colours, type, cards and buttons
       come from the AURORA kit (design/aurora-{dark,light}.css), copied from
       0_ISID_WEBRTC_0/docs/design without modification. No --au-* variable is
       redefined here: if a colour is wrong it gets fixed in the kit, not here,
       so every ecosystem frontend stays consistent.
   =========================================================================== */

.head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem 0.5rem;
}

.head-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  padding: 1rem 1.5rem 2rem;
}

.wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   ES: el HUD. 576x288 son 2:1 exactos; `aspect-ratio` mantiene la proporcion
       a cualquier ancho para que la previsualizacion no mienta.
       La fuente es monoespaciada a proposito: el HUD real no permite elegir
       tipografia, y con una proporcional las lineas parecerian caber cuando
       en las gafas no caben.
   EN: the HUD. 576x288 is exactly 2:1; `aspect-ratio` keeps the proportion at
       any width so the preview does not lie.
       The font is monospace on purpose: the real HUD allows no font choice,
       and with a proportional face lines would look like they fit when on the
       glasses they do not.
   --------------------------------------------------------------------------- */
.hud {
  aspect-ratio: 576 / 288;
  width: 100%;
  background: #04120a;
  border: 1px solid var(--au-border);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  padding: 4%;
  overflow: hidden;
}

.hud pre {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  /* ES: verde monocromo, como el micro-LED real / EN: monochrome green, like the real micro-LED */
  color: #6cf3a6;
  font-size: clamp(0.7rem, 2.1vw, 1.05rem);
  line-height: 1.35;
  white-space: pre;
  /* ES: el HUD real recorta, no envuelve: aqui igual, para no engañarnos.
     EN: the real HUD clips, it does not wrap: same here, so we do not fool ourselves. */
  overflow: hidden;
}

.hud-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  opacity: 0.75;
}

.switch { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.switch .au-btn[aria-pressed="true"] { outline: 2px solid var(--au-blue-500); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; font-size: 0.9rem; }
.kv dt { opacity: 0.7; }
.kv dd { margin: 0; word-break: break-all; }

.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; }

.widget {
  border: 1px solid var(--au-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--au-surface-2);
  cursor: pointer;
  text-align: start;
}

.widget[aria-selected="true"] { outline: 2px solid var(--au-blue-500); }
.widget h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.widget p { margin: 0; font-size: 0.8rem; opacity: 0.7; }

/* ---------------------------------------------------------------------------
   ES: semaforo. `unknown` es gris a proposito y NO verde: no saber si algo
       funciona no es lo mismo que saber que funciona.
   EN: traffic light. `unknown` is grey on purpose and NOT green: not knowing
       whether something works is not the same as knowing it does.
   --------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--au-border);
  font-size: 0.8rem;
}

.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--au-text-dim, #888); }
[data-state="ok"] .dot { background: var(--au-green-500); }
[data-state="warn"] .dot { background: var(--au-gold-500); }
[data-state="error"] .dot { background: #e5484d; }
[data-state="unknown"] .dot { background: #7a7a7a; }

/* ---------------------------------------------------------------------------
   ES: arabe. Se espeja el layout, pero NO el HUD: las gafas escriben siempre
       de izquierda a derecha, asi que espejar la previsualizacion mostraria
       algo que el dispositivo no hace.
   EN: Arabic. The layout mirrors, the HUD does NOT: the glasses always write
       left to right, so mirroring the preview would show something the device
       never does.
   --------------------------------------------------------------------------- */
[dir="rtl"] .hud,
[dir="rtl"] .hud pre { direction: ltr; text-align: left; }