/* Monitor de la caneca clasificadora.
   Colores de las canecas según el código nacional: blanca (aprovechables), verde (orgánicos)
   y negra (no aprovechables). El amarillo de seguridad solo marca la zona de la cámara,
   lo que está "en vivo" y los cambios sin guardar. */
:root {
  --fondo: #dde2df;
  --superficie: #f5f7f6;
  --superficie-2: #e8ecea;
  --tinta: #15211b;
  --tinta-2: #4a5650;
  --linea: #c2cac6;
  --verde: #23704a;
  --verde-suave: #dcefe3;
  --negra: #232927;
  --amarillo: #f2c230;
  --amarillo-suave: #fbf0c9;
  --rojo: #a8231b;
  --rojo-suave: #f8e0dd;
  --marca-brillo: #f28c28;
  --marca-borde: #3b82f6;
  --oscuro: #1b2420;

  --radio-boton: 10px;
  --radio-panel: 16px;
  --margen: clamp(1rem, 3vw, 2rem);
  --ancho: 1240px;
  --alto-nav: 0px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

button,
input,
output {
  font: inherit;
  color: inherit;
}

img,
canvas,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.15;
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 112%;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 108%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-boton);
  background: var(--superficie);
  color: var(--tinta);
  font-weight: 620;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}

.boton:hover:not(:disabled) {
  background: #fff;
}

.boton:active:not(:disabled) {
  transform: translateY(1px);
}

.boton-principal {
  background: var(--tinta);
  color: #fff;
}

.boton-principal:hover:not(:disabled) {
  background: #253a2f;
}

.boton[aria-pressed='true'] {
  background: var(--amarillo);
  color: var(--tinta);
}

.boton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.boton-chico {
  min-height: 2.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
}

.boton-texto {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Cabecera y pestañas
   --------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.75rem max(var(--margen), calc((100% - var(--ancho)) / 2));
  background: var(--tinta);
  color: #fff;
}

.marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  min-width: 0;
}

.cabecera h1 {
  font-size: 1.375rem;
  font-weight: 760;
  font-stretch: 118%;
  letter-spacing: -0.01em;
}

.conexion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: #d5ddd8;
}

.conexion-punto {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #8a958f;
}

.conexion[data-estado='online'] .conexion-punto {
  background: #4fd18a;
  box-shadow: 0 0 0 3px rgba(79, 209, 138, 0.25);
}

.conexion[data-estado='offline'] .conexion-punto {
  background: #ff6b5e;
}

.pestanas [role='tablist'] {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.pestanas [role='tab'] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #d5ddd8;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.pestanas [role='tab'] svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pestanas [role='tab']:hover {
  color: #fff;
}

.pestanas [role='tab'][aria-selected='true'] {
  background: var(--superficie);
  color: var(--tinta);
}

.pestanas [role='tab']:focus-visible {
  outline-color: var(--amarillo);
}

.aviso-version {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin: 1rem auto 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radio-boton);
  background: var(--rojo);
  color: #fff;
  font-weight: 560;
}

/* ---------------------------------------------------------------------------
   Control (quién maneja)
   --------------------------------------------------------------------------- */
.control {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin: 1rem auto 0;
  padding: 0.75rem 0.75rem 0.75rem 1.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  border: 2px solid var(--linea);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}

.control[data-estado='tuyo'] {
  border-color: var(--verde);
  background: var(--verde-suave);
}

.control[data-estado='espera'] {
  border-color: var(--tinta);
  background: var(--amarillo-suave);
}

.control-info {
  min-width: 0;
  flex: 1 1 22rem;
}

.control-titulo {
  font-weight: 700;
  font-stretch: 108%;
}

.control[data-estado='tuyo'] .control-titulo::before {
  content: '';
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--verde);
  vertical-align: 0.05em;
}

.control-texto {
  color: var(--tinta-2);
  font-size: 0.9375rem;
}

.control-form {
  display: flex;
  gap: 0.5rem;
  flex: 0 1 auto;
}

.pin {
  display: flex;
  align-items: center;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-boton);
  background: #fff;
  overflow: hidden;
}

.pin span {
  padding: 0 0.25rem 0 0.75rem;
  font-weight: 650;
  font-size: 0.875rem;
  color: var(--tinta-2);
}

.pin input {
  width: 7.5rem;
  min-height: 2.625rem;
  padding: 0.375rem 0.625rem;
  border: 0;
  background: none;
  font-size: 1.0625rem;
  letter-spacing: 0.15em;
}

.pin input:focus {
  outline: none;
}

.pin:focus-within {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

.pin[data-error='si'] {
  border-color: var(--rojo);
  animation: sacudir 0.3s;
}

@keyframes sacudir {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------------------
   Paneles
   --------------------------------------------------------------------------- */
main {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin: 1.25rem auto 0;
  padding-bottom: 3rem;
}

.vacio {
  padding: 1.25rem;
  border: 2px dashed var(--linea);
  border-radius: var(--radio-panel);
  color: var(--tinta-2);
  text-align: center;
}

.bloqueo {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radio-boton);
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: 0.9375rem;
}

.bloqueo::before {
  content: '';
  flex: none;
  width: 1rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M4 8V5.5a4 4 0 0 1 8 0V8h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1Zm2 0h4V5.5a2 2 0 0 0-4 0V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M4 8V5.5a4 4 0 0 1 8 0V8h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1Zm2 0h4V5.5a2 2 0 0 0-4 0V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   En vivo
   --------------------------------------------------------------------------- */
.vivo {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
  grid-template-areas:
    'consola sensores'
    'acciones sensores'
    'ultima sensores';
  grid-template-rows: auto auto 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
}

.vivo-consola {
  grid-area: consola;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.vivo .acciones {
  grid-area: acciones;
}

.vivo .sensores {
  grid-area: sensores;
}

.vivo .ultima {
  grid-area: ultima;
}

/* Consola: cada botón está del mismo lado al que se inclina la bandeja */
.consola {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) minmax(0, 3.2fr) minmax(132px, 1fr);
  gap: 0.75rem;
}

.lado {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 1rem 0.875rem;
  hyphens: auto;
  overflow-wrap: break-word;
  border: 3px solid var(--tinta);
  border-radius: var(--radio-panel);
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}

.lado-der {
  align-items: flex-end;
  text-align: right;
}

.lado:hover:not(:disabled) {
  filter: brightness(0.96);
}

.lado:active:not(:disabled) {
  transform: scale(0.98);
}

.lado:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lado-icono {
  width: 3.5rem;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

.lado-icono .pivote,
.bandeja-svg .pivote {
  fill: currentColor;
  stroke: none;
}

.lado-texto {
  display: grid;
  gap: 0.25rem;
}

.lado-accion {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 750;
  font-stretch: 88%;
  line-height: 1.1;
}

.lado-destino {
  font-size: 0.875rem;
  opacity: 0.85;
}

.lado-blanca {
  background: #fff;
  color: var(--tinta);
}

.lado-negra {
  background: var(--negra);
  color: #fff;
}

.lado-verde {
  background: var(--verde);
  color: #fff;
}

.camara {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-panel);
  background: var(--oscuro);
  overflow: hidden;
}

.camara img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.camara[data-estado='sin-imagen'] img {
  opacity: 0.25;
}

.camara-vacia {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #dfe6e2;
  text-align: center;
}

.camara[data-estado='vivo'] .camara-vacia {
  display: none;
}

.en-vivo {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--amarillo);
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 700;
}

.camara[data-estado='sin-imagen'] .en-vivo {
  display: none;
}

.acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.grupo h2 {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 650;
  font-stretch: 100%;
  color: var(--tinta-2);
}

.grupo-botones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.grupo-botones .boton {
  min-height: 3.25rem;
  padding-inline: 0.5rem;
  hyphens: auto;
  overflow-wrap: break-word;
}

.grupo-clasificar {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Sensores */
.sensores,
.ultima {
  padding: 1rem 1.125rem;
  border-radius: var(--radio-panel);
  background: var(--superficie);
}

.nota-alerta {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-left: 4px solid var(--rojo);
  border-radius: 6px;
  background: var(--rojo-suave);
  font-size: 0.9375rem;
}

.sensores-lista {
  margin: 0.5rem 0 0;
}

.sensor {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.25rem 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linea);
}

.sensor dt {
  padding-top: 0.25rem;
  font-weight: 620;
  font-size: 0.9375rem;
}

.sensor dd {
  margin: 0;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.sensor b {
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 78%;
  line-height: 1.05;
}

.sensor span:not(.medidor):not(.medidor-relleno):not(.medidor-raya) {
  color: var(--tinta-2);
  font-size: 0.875rem;
}

.sensor-det b {
  font-stretch: 100%;
  font-size: 1.375rem;
}

.sensor[data-ve='si'] b {
  color: var(--verde);
}

.sensor[data-ve='alerta'] b {
  color: var(--rojo);
}

.medidor {
  position: relative;
  display: block;
  height: 0.5rem;
  margin: 0.25rem 0;
  border-radius: 999px;
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linea);
}

.medidor-relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--tinta-2);
  transition: width 0.3s;
}

.sensor[data-ve='si'] .medidor-relleno {
  background: var(--verde);
}

.medidor-raya {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--tinta);
}

.bandeja-svg {
  width: 6rem;
  height: auto;
  margin: -0.5rem 0 -0.25rem;
  overflow: visible;
  color: var(--tinta);
}

.bandeja-svg rect {
  fill: currentColor;
}

#s-bandeja {
  transform-origin: 60px 35.5px;
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.sensores-pie {
  margin-top: 0.625rem;
  color: var(--tinta-2);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.sensores-pie a {
  color: var(--tinta);
}

/* Última clasificación */
.ultima-cuerpo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.625rem;
}

.miniatura {
  flex: none;
  width: 6.5rem;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--oscuro);
  overflow: hidden;
  cursor: zoom-in;
}

.miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Calibrar
   --------------------------------------------------------------------------- */
.cal-cabeza {
  display: grid;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.cal-intro {
  max-width: 72ch;
  color: var(--tinta-2);
}

.cal-estado {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.cal-estado li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem 0.3rem 0.625rem;
  border-radius: 999px;
  background: var(--superficie);
  font-size: 0.875rem;
}

.cal-estado li::before {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--linea);
}

.cal-estado li[data-ok='si']::before {
  background: var(--verde);
}

.cal-estado li[data-ok='medio']::before {
  background: var(--amarillo);
  box-shadow: 0 0 0 1px var(--tinta);
}

.cal-estado li[data-ok='no']::before {
  background: var(--rojo);
}

.revision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border: 2px solid var(--tinta);
  border-radius: var(--radio-panel);
  background: var(--amarillo-suave);
  font-weight: 560;
}

.cal {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(330px, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.cal-vista {
  position: sticky;
  top: 5rem;
  display: grid;
  gap: 0.625rem;
  min-width: 0;
}

.lienzo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-panel);
  background: var(--oscuro);
  overflow: hidden;
}

.lienzo canvas {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.lienzo[data-editar='si'] canvas {
  touch-action: none;
}

.lienzo-vacio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(21, 33, 27, 0.88);
  color: #eef2ef;
  text-align: center;
}

.lienzo-vacio p {
  max-width: 34ch;
}

.lienzo-fuente {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.8125rem;
  pointer-events: none;
}

.lienzo-mover {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: none;
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.lienzo-mover[aria-pressed='true'] {
  background: var(--amarillo);
}

@media (pointer: coarse) {
  .lienzo-mover {
    display: block;
  }
}

.vistas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.vista {
  display: grid;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0.375rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--superficie);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.vista:hover {
  border-color: var(--linea);
}

.vista[aria-pressed='true'] {
  border-color: var(--tinta);
}

.vista canvas,
.vista img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--oscuro);
  object-fit: cover;
}

.vista-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: var(--tinta-2);
  font-size: 0.875rem;
}

.leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.m {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
}

.m-brillo {
  background: var(--marca-brillo);
}

.m-borde {
  background: var(--marca-borde);
}

.m-zona {
  border: 2px solid var(--amarillo);
  box-shadow: inset 0 0 0 1px var(--tinta), 0 0 0 1px var(--tinta);
}

/* Pasos: es un proceso en orden, por eso van numerados */
.pasos {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.paso {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1rem 1.125rem 3.375rem;
  border-radius: var(--radio-panel);
  background: var(--superficie);
  counter-increment: paso;
}

.paso::before {
  content: counter(paso);
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--tinta);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 750;
}

.paso[data-ok='si']::before {
  background: var(--verde);
}

.paso[data-ok='medio']::before {
  background: var(--amarillo);
  color: var(--tinta);
}

.paso[data-ok='no']::before {
  background: var(--rojo);
}

.paso > p {
  color: var(--tinta-2);
  font-size: 0.9375rem;
}

.paso > .paso-estado {
  color: var(--tinta);
  font-weight: 620;
}

.paso > .boton {
  justify-self: start;
}

.deslizadores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.25rem;
}

.deslizadores label,
.deslizador-sens {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 560;
}

.deslizadores input,
.deslizador-sens input {
  grid-column: 1 / -1;
  width: 100%;
  height: 2rem;
  margin: 0;
  accent-color: var(--tinta);
  cursor: pointer;
}

output {
  font-weight: 750;
}

.paso > .boton-texto {
  justify-self: start;
}

/* Regla de la sensibilidad */
.regla {
  position: relative;
  height: 1.375rem;
  margin-top: 1.5rem;
  border-radius: 6px;
  background: var(--superficie-2);
  box-shadow: inset 0 0 0 1px var(--linea);
}

.regla-relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 6px;
  background: var(--tinta-2);
  transition: width 0.3s;
}

.regla[data-ve='si'] .regla-relleno {
  background: var(--verde);
}

.regla-max {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: repeating-linear-gradient(var(--tinta-2) 0 3px, transparent 3px 6px);
}

.regla-raya {
  position: absolute;
  top: -0.375rem;
  bottom: -0.375rem;
  left: 20%;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--tinta);
  transition: left 0.15s;
}

.regla-raya span {
  position: absolute;
  bottom: calc(100% + 0.125rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 750;
  white-space: nowrap;
}

.regla-escala {
  display: flex;
  justify-content: space-between;
  color: var(--tinta-2);
  font-size: 0.75rem;
}

.regla-texto {
  font-size: 0.9375rem;
}

.regla-texto b {
  font-size: 1.25rem;
  font-stretch: 85%;
}

.regla-texto span {
  color: var(--tinta-2);
}

.resultado {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.resultado div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  background: var(--superficie-2);
  font-size: 0.9375rem;
}

.resultado div[data-ve='si'] {
  background: var(--verde-suave);
}

.resultado div[data-ve='alerta'] {
  background: var(--rojo-suave);
}

.resultado dt {
  font-weight: 650;
}

.resultado dd {
  margin: 0;
}

.tecnico summary {
  color: var(--tinta-2);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.tecnico p {
  margin-top: 0.375rem;
  color: var(--tinta-2);
  font-size: 0.875rem;
}

/* Barra para guardar: se queda pegada abajo mientras haya cambios sin guardar */
.guardar-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
  padding: 0.75rem 0.75rem 0.75rem 1.125rem;
  border: 2px solid var(--linea);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}

.guardar-barra[data-estado='sucio'] {
  position: sticky;
  bottom: calc(var(--alto-nav) + 0.75rem);
  z-index: 10;
  border-color: var(--tinta);
  background: var(--amarillo-suave);
  box-shadow: 0 10px 30px rgba(21, 33, 27, 0.22);
}

.guardar-barra p {
  flex: 1 1 18rem;
  font-size: 0.9375rem;
}

.guardar-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Análisis
   --------------------------------------------------------------------------- */
.analisis-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.tasa {
  display: grid;
  gap: 0.875rem;
  padding: 1.25rem;
  border-radius: var(--radio-panel);
  background: var(--superficie);
}

.tasa-cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.tasa-cifra b {
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 760;
  font-stretch: 72%;
  line-height: 0.9;
  color: var(--verde);
}

.tasa-nombre {
  font-size: 1.125rem;
  font-weight: 620;
}

.tasa-sub {
  flex-basis: 100%;
  color: var(--tinta-2);
  font-size: 0.9375rem;
}

.tasa-barra {
  display: flex;
  height: 1rem;
  border-radius: 999px;
  background: var(--superficie-2);
  overflow: hidden;
}

.seg {
  transition: width 0.4s;
}

.seg-si {
  background: var(--verde);
}

.seg-no {
  background: var(--negra);
}

.tasa-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  font-size: 0.9375rem;
}

.punto {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.4rem;
  border-radius: 3px;
  vertical-align: -0.05em;
}

.punto-si {
  background: var(--verde);
}

.punto-no {
  background: var(--negra);
}

.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1rem 0 0;
  border-radius: var(--radio-panel);
  background: var(--linea);
  overflow: hidden;
}

.cifras div {
  padding: 0.875rem 1rem;
  background: var(--superficie);
}

.cifras dt {
  color: var(--tinta-2);
  font-size: 0.875rem;
}

.cifras dd {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 720;
  font-stretch: 78%;
  line-height: 1.1;
}

.actividad,
.desglose {
  padding: 1.25rem;
  border-radius: var(--radio-panel);
  background: var(--superficie);
}

.actividad {
  margin-top: 1rem;
}

.columnas {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  height: 9rem;
  margin-top: 1rem;
  padding-bottom: 1px;
  border-bottom: 2px solid var(--tinta);
}

.columna {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  border-radius: 3px 3px 0 0;
}

.columna:hover {
  background: var(--superficie-2);
}

.parte {
  display: block;
  min-height: 3px;
}

.parte-si {
  background: var(--verde);
}

.parte-no {
  background: var(--negra);
}

.columna .parte:last-child {
  border-radius: 3px 3px 0 0;
}

.columnas-eje {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  margin-top: 0.25rem;
  color: var(--tinta-2);
  font-size: 0.75rem;
  text-align: center;
}

.desgloses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.barras {
  display: grid;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.barras li {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 2.5rem 2.75rem;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
}

.barras li.cero {
  color: var(--tinta-2);
}

.barras .nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pista {
  height: 0.625rem;
  border-radius: 999px;
  background: var(--superficie-2);
  overflow: hidden;
}

.relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s;
}

.desglose-si .relleno {
  background: var(--verde);
}

.desglose-no .relleno {
  background: var(--negra);
}

.barras .num {
  font-weight: 700;
  text-align: right;
}

.barras .pct {
  color: var(--tinta-2);
  font-size: 0.8125rem;
  text-align: right;
}

.vacio-nota {
  margin-top: 0.75rem;
  color: var(--tinta-2);
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------
   Historial
   --------------------------------------------------------------------------- */
#panel-historial > h2 {
  margin-bottom: 1rem;
}

.historial-lista {
  margin: 0;
  padding: 0 1.125rem;
  border-radius: var(--radio-panel);
  background: var(--superficie);
  list-style: none;
}

.historial-lista:empty {
  display: none;
}

.historial-lista li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linea);
}

.historial-lista li:last-child {
  border-bottom: 0;
}

.historial-lista time {
  color: var(--tinta-2);
  font-size: 0.875rem;
}

.historial-que {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.historial-que strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 620;
}

.historial-que strong::before {
  content: '';
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  background: var(--linea);
}

li[data-tipo='si'] .historial-que strong::before {
  background: var(--verde);
}

li[data-tipo='no'] .historial-que strong::before {
  background: var(--negra);
}

li[data-tipo='aviso'] .historial-que strong::before {
  background: var(--rojo);
}

li[data-tipo='captura'] .historial-que strong::before {
  background: var(--amarillo);
  box-shadow: 0 0 0 1px var(--tinta);
}

.historial-que small {
  color: var(--tinta-2);
  font-size: 0.8125rem;
}

.historial-lista .miniatura {
  width: 4.5rem;
}

.historial-lista .boton-texto {
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   Visor de fotos y aviso flotante
   --------------------------------------------------------------------------- */
.visor {
  width: min(94vw, 880px);
  padding: 0;
  border: 0;
  border-radius: var(--radio-panel);
  background: var(--tinta);
  color: #fff;
}

.visor::backdrop {
  background: rgba(10, 16, 13, 0.72);
}

.visor img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  background: #000;
}

.visor p {
  padding: 0.75rem 1rem 1rem;
}

.visor-cerrar {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}

.visor-cerrar svg {
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-nav) + 1rem);
  z-index: 40;
  width: max-content;
  max-width: min(100vw - 2rem, 34rem);
  padding: 0.75rem 1.125rem;
  border-radius: 12px;
  background: var(--tinta);
  color: #fff;
  font-weight: 540;
  box-shadow: 0 10px 30px rgba(21, 33, 27, 0.3);
  opacity: 0;
  transform: translate(-50%, 0.75rem);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.toast[data-visible='si'] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast[data-tipo='error'] {
  background: var(--rojo);
}

/* ---------------------------------------------------------------------------
   Tamaños
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .vivo {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas:
      'consola consola'
      'acciones acciones'
      'sensores ultima';
    grid-template-rows: auto;
  }
}

@media (max-width: 900px) {
  .cal {
    grid-template-columns: 1fr;
  }

  .cal-vista {
    position: static;
  }

  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desgloses {
    grid-template-columns: 1fr;
  }
}

/* Celular: las pestañas bajan a una barra abajo, al alcance del pulgar */
@media (max-width: 760px) {
  :root {
    --alto-nav: calc(4rem + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: var(--alto-nav);
  }

  .cabecera {
    padding-block: 0.625rem;
  }

  .cabecera h1 {
    font-size: 1.125rem;
  }

  .marca {
    justify-content: space-between;
    width: 100%;
  }

  .conexion {
    font-size: 0.8125rem;
  }

  .pestanas {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    height: var(--alto-nav);
    padding: 0.375rem 0.375rem env(safe-area-inset-bottom);
    background: var(--tinta);
    box-shadow: 0 -6px 20px rgba(21, 33, 27, 0.2);
  }

  .pestanas [role='tablist'] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    height: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .pestanas [role='tab'] {
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 12px;
    font-size: 0.75rem;
  }

  .pestanas [role='tab'] svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .pestanas [role='tab'][aria-selected='true'] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .pestanas [role='tab'][aria-selected='true'] svg {
    color: var(--amarillo);
  }

  .control {
    margin-top: 0.75rem;
    padding: 0.75rem;
  }

  .control-info {
    flex-basis: 100%;
  }

  .control-form {
    width: 100%;
  }

  .pin {
    flex: 1;
  }

  .pin input {
    width: 100%;
  }

  #btn-soltar {
    width: 100%;
  }

  main {
    margin-top: 1rem;
  }

  .consola {
    grid-template-columns: 1fr 1fr;
  }

  .camara {
    grid-column: 1 / -1;
    order: -1;
  }

  .lado {
    min-height: 7.5rem;
    padding: 0.875rem;
  }

  .lado-accion {
    font-size: 1.0625rem;
  }

  .acciones {
    grid-template-columns: 1fr;
  }

  /* Nivelar y Clasificar ocupan toda la fila; los dos de fijar quedan cada uno de su lado */
  .grupo-botones,
  .grupo-clasificar {
    grid-template-columns: 1fr 1fr;
  }

  .grupo-botones [data-orden='nivel'],
  .grupo-botones [data-orden='clasificar'] {
    grid-column: 1 / -1;
    order: -1;
  }

  .vivo {
    grid-template-columns: 1fr;
    grid-template-areas:
      'consola'
      'acciones'
      'sensores'
      'ultima';
  }

  .sensor {
    grid-template-columns: 5.75rem minmax(0, 1fr);
  }

  .vistas {
    gap: 0.375rem;
  }

  .vista {
    font-size: 0.75rem;
  }

  .deslizadores {
    grid-template-columns: 1fr;
  }

  .paso {
    padding-right: 0.875rem;
  }

  .resultado div {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }

  .guardar-barra {
    gap: 0.5rem;
    padding: 0.625rem;
  }

  .guardar-barra p {
    flex-basis: 100%;
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .guardar-botones {
    flex: 1 1 100%;
    flex-wrap: nowrap;
  }

  .guardar-botones .boton {
    flex: 1 1 0;
    min-height: 2.75rem;
    padding-inline: 0.5rem;
  }


  .barras li {
    grid-template-columns: minmax(5rem, 7.5rem) minmax(0, 1fr) 2rem 2.5rem;
    gap: 0.5rem;
  }

  .historial-lista {
    padding: 0 0.875rem;
  }

  .historial-lista li {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.625rem;
  }

  .historial-lista .miniatura {
    width: 3.75rem;
  }
}

@media (max-width: 380px) {
  .grupo-botones .boton {
    font-size: 0.875rem;
  }
}

/* Calibrar: resultado de la calibración con la bandeja vacía */
.paso h4 {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.paso h4 + .regla {
  margin-top: 1.375rem;
}

.cal-resultado {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.625rem;
  border-radius: 10px;
  background: var(--superficie-2);
  font-size: 0.875rem;
}

.cal-resultado img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--oscuro);
  object-fit: cover;
  cursor: zoom-in;
}

.cal-resultado img[hidden] + p {
  grid-column: 1 / -1;
}

.cal-resultado p {
  margin: 0;
}

/* Calibrar: luz de la foto para la IA */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.opciones button {
  min-height: 2.5rem;
  padding: 0.375rem 0.875rem;
  border: 2px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 620;
  cursor: pointer;
}

.opciones button:hover:not(:disabled) {
  border-color: var(--tinta-2);
}

.opciones button[aria-checked='true'] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: #fff;
}

.opciones button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.opciones-nota {
  color: var(--tinta-2);
  font-size: 0.875rem;
}

.foto-prueba {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  margin: 0;
  padding: 0.625rem;
  border-radius: 10px;
  background: var(--superficie-2);
  font-size: 0.875rem;
}

.foto-prueba .miniatura {
  width: 100%;
}

/* Historial: revisar si acertó */
.historial-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

#panel-historial .historial-cabeza h2 {
  margin-bottom: 0.25rem;
}

.historial-resumen {
  color: var(--tinta-2);
  font-size: 0.9375rem;
}

#historial-bloqueo {
  margin-bottom: 1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--superficie-2);
  font-size: 0.8125rem;
  font-weight: 620;
}

.chip[data-tipo='ok'] {
  background: var(--verde-suave);
  color: var(--verde);
}

.chip[data-tipo='mal'] {
  background: var(--rojo-suave);
  color: var(--rojo);
}

/* Acertó el lado, pero era otra clase (dijo metal y era papel) */
.chip[data-tipo='medio'] {
  background: var(--amarillo-suave);
  color: var(--tinta);
}

.revisar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-top: 0.375rem;
}

.revisar-pregunta {
  font-size: 0.875rem;
  font-weight: 620;
}

.revisar .boton-chico {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.revisar .boton-si:hover:not(:disabled) {
  border-color: var(--verde);
  background: var(--verde-suave);
}

.revisar .boton-no:hover:not(:disabled) {
  border-color: var(--rojo);
  background: var(--rojo-suave);
}

.revisar .boton-texto {
  font-size: 0.875rem;
}

li[data-tipo='vacio'] .historial-que strong {
  color: var(--tinta-2);
}

/* Análisis: qué tan bien decide */
.precision {
  display: grid;
  gap: 0.875rem;
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--radio-panel);
  background: var(--superficie);
}

.precision-cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.precision-cifra h3 {
  flex-basis: 100%;
  margin-bottom: 0.25rem;
}

.precision-cifra b {
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  font-weight: 760;
  font-stretch: 72%;
  line-height: 0.9;
}

.precision-barra {
  display: flex;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--superficie-2);
  overflow: hidden;
}

.seg-mal {
  background: var(--rojo);
}

.cifras-precision {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
  border: 1px solid var(--linea);
}

.precision-sub {
  margin: 1rem 0 0.5rem;
  font-size: 0.9375rem;
}

.cifras-camara {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  border: 1px solid var(--linea);
}

.cifras small {
  display: block;
  margin-top: 0.125rem;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.precision-detalle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.precision-detalle h4 {
  font-size: 0.9375rem;
}

.precision-detalle .barras li {
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 2.75rem 2.75rem;
}

.errores {
  display: grid;
  gap: 0.375rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.errores b {
  margin-right: 0.375rem;
  color: var(--rojo);
}

@media (max-width: 900px) {
  .cifras-precision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cifras-camara {
    grid-template-columns: 1fr;
  }

  .precision-detalle {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cal-resultado {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .foto-prueba {
    grid-template-columns: 1fr;
  }

  .historial-cabeza .boton {
    width: 100%;
  }

  .precision {
    padding: 1rem;
  }

  .precision-detalle .barras li {
    grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr) 2.5rem 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* La foto de referencia se tomó con otra luz: resalta el aviso */
.paso[data-luz='otra'] .cal-resultado {
  background: var(--amarillo-suave);
  box-shadow: inset 0 0 0 2px var(--tinta);
}