/* ===========================================================================
   Módulo 4 — Cámara de niebla
   ---------------------------------------------------------------------------
   DOS COLORES PROPIOS, Y SOLO DENTRO DE LA CÁMARA. El fondo negro y el blanco
   de las gotas no son colores de datos: son cómo se ve una cámara de niebla de
   verdad, iluminada de lado sobre un fondo oscuro, y por eso no cambian con el
   tema. Fuera de la cámara todo va con los tokens de siempre. El modo
   «colorear por tipo» usa los colores de las familias de tokens.css (alfa en
   verde, beta en azul), que significan lo mismo en todo el sitio.
   ========================================================================= */

/* LOS COLORES DEL MODO «SEPARAR POR COLOR»: alfa roja, beta azul, gamma
   verde, elegidos para esta cámara. Van sobre el negro de la cámara y por eso
   no cambian con el tema. OJO, y se dice en la leyenda: el rojo y el verde son
   la pareja que peor distingue quien tiene daltonismo rojo-verde. Por eso el
   color nunca va solo: la forma de la traza sigue diciendo qué es, y la leyenda
   lleva el nombre escrito. */
:root {
  --camara-alfa: #ff4b4b;
  --camara-beta: #4a9dff;
  --camara-gamma: #3ddc7a;
  --camara-muon: #c9ccd1;
}

.camara-tarjeta,
.camara-rejilla,
.seccion-camara { margin-top: 1.25rem; }

/* --- El botón y la leyenda de colores --- */
.camara-separar[aria-pressed="true"] {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--texto);
}
.camara-separar__muestras { display: inline-flex; gap: 3px; }

.camara-punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.camara-punto--alfa { background: var(--camara-alfa); }
.camara-punto--beta { background: var(--camara-beta); }
.camara-punto--gamma { background: var(--camara-gamma); }

.camara-leyenda {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.88rem;
  color: var(--texto-2);
}
.camara-leyenda[hidden] { display: none; }
.camara-leyenda li { display: inline-flex; align-items: center; gap: 0.4rem; }

.entrada-camara {
  max-width: 68ch;
  color: var(--texto-2);
}

/* --- La cámara --- */
.camara-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.camara-cabecera .tarjeta__titulo { margin-bottom: 0.6rem; }
.camara-cabecera__muestra {
  font-weight: 600;
  font-size: 0.95rem;
}

.camara-marco {
  --camara-fondo: #060708;
  --camara-gota: #eef2f5;
  position: relative;
  width: 100%;
  background: radial-gradient(ellipse at 30% 40%, #0e1114 0%, var(--camara-fondo) 70%);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  overflow: hidden;
  /* Un marco de vidrio: sombra interior, como la pared de la cámara. */
  box-shadow: inset 0 0 40px rgb(0 0 0 / 70%);
}

.camara-lienzo {
  display: block;
  width: 100%;
}

.camara-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}

.camara-vivo {
  margin: 0;
  font-size: 0.88rem;
  color: var(--texto-2);
}

.camara-mando { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- Los controles --- */
.camara-controles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.camara-control {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.camara-control__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-3);
}
.camara-grupo { flex-wrap: wrap; align-self: flex-start; }

.camara-casillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
.camara-casilla {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.camara-casilla input { accent-color: var(--acento); }

/* El aviso de las masas grandes: a lo ancho y con la raya de aviso del sitio. */
.camara-aviso-masa {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
  color: var(--texto);
  border-inline-start: 3px solid var(--marcador);
  background: var(--marcador-suave);
  border-radius: var(--r-s);
}
.camara-aviso-masa[hidden] { display: none; }

/* Los objetos reales: a lo ancho, porque los nombres son largos. */
.camara-objetos { grid-column: 1 / -1; }
.camara-objetos[hidden] { display: none; }
.camara-objetos .camara-grupo { flex-wrap: wrap; }
.camara-objetos__texto {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--texto-2);
  line-height: 1.45;
}

/* La calidad de imagen ocupa toda la fila: lleva su explicación debajo, y
   apretada en una columna de 220 px no se leería. */
.camara-calidad { grid-column: 1 / -1; }
.camara-calidad__nota,
.camara-calidad__ritmo {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-2);
  max-width: 85ch;
}
.camara-calidad__ritmo { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.camara-calidad__ritmo--justo { color: var(--texto); font-weight: 600; }

/* --- Datos y guía --- */
.camara-rejilla {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.camara-leccion {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: var(--texto);
  padding-inline-start: 0.7rem;
  border-inline-start: 3px solid var(--texto);
}

.camara-subtitulo {
  font-size: 0.95rem;
  margin: 1.2rem 0 0.4rem;
}

.camara-tabla { overflow-x: auto; }

.camara-guia { margin: 0; display: grid; gap: 0.8rem; }
.camara-guia__fila {
  padding-inline-start: 0.8rem;
  border-inline-start: 3px solid var(--borde-fuerte);
}
/* La raya de cada tipo lleva su color de familia, pero el nombre va escrito:
   el color nunca es lo único que distingue. */
.camara-guia__fila--alfa { border-inline-start-color: var(--camara-alfa); }
.camara-guia__fila--beta { border-inline-start-color: var(--camara-beta); }
.camara-guia__fila--gamma { border-inline-start-color: var(--camara-gamma); }
.camara-guia dt { font-weight: 600; }
.camara-guia dd { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--texto-2); }

/* --- La misma masa, todas las muestras --- */
.camara-barras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.camara-barras__fila {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0.4rem;
  border-radius: var(--r-s);
}
.camara-barras__fila[aria-current="true"] {
  background: var(--marcador-suave);
  outline: 2px solid var(--marcador);
}
.camara-barras__fila[aria-current="true"] .enlace-nuclido { color: var(--texto); }
.camara-barras__nombre { text-align: start; font-size: 0.88rem; }
.camara-barras__carril {
  height: 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 100px;
  overflow: hidden;
}
.camara-barras__barra {
  display: block;
  height: 100%;
  background: var(--acento);
}
.camara-barras__valor { font-size: 0.85rem; text-align: end; }

@media (max-width: 560px) {
  .camara-barras__fila { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .camara-barras__carril { grid-column: 1 / -1; grid-row: 2; }
}

.camara-modelo {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--texto-2);
  max-width: 85ch;
}
.saber-mas .camara-modelo { margin-top: 0.7rem; }