:root {
  color-scheme: dark;
  font-family: "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #121212;
  color: #e8e8e8;
}
.marco {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 24px 18px 40px;
}
.panel {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 16px;
  padding: 22px 18px 18px;
}
.oculto { display: none !important; }
h1, h2, h3 { margin: 0 0 8px; text-align: center; font-weight: 600; }
h1 { letter-spacing: 0.4px; }
.subtitulo { text-align: center; color: #9a9a9a; margin: 0 0 18px; }
.logo { display: flex; justify-content: center; }
.puntos { display: flex; gap: 14px; justify-content: center; margin: 8px 0 12px; }
.punto {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #38bdf8;
}
.punto.lleno { background: #38bdf8; }
.mensaje { min-height: 22px; text-align: center; color: #f87171; margin: 8px 0; }
.opciones { display: grid; gap: 10px; margin: 4px 0 16px; color: #d0d0d0; font-size: 15px; }
.opciones label { display: flex; gap: 10px; align-items: center; justify-content: flex-start; }
.opciones input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tecla, button, select, input, textarea {
  font: inherit;
}
.tecla, .principal, .secundario, .texto {
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.tecla {
  height: 64px;
  background: #262626;
  color: #fff;
  font-size: 26px;
  border: 1px solid #3a3a3a;
}
.tecla:active, .principal:active { transform: scale(0.98); }
.principal, .secundario { width: 100%; padding: 14px 16px; margin-top: 10px; font-weight: 600; }
.principal { background: #22c55e; color: #052e16; }
.secundario { background: #0284c7; color: #fff; }
.texto { background: transparent; color: #38bdf8; padding: 8px; }
.barra, .barra-acciones, .fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.barra { justify-content: space-between; margin-bottom: 12px; }
.rol { display: block; color: #38bdf8; font-size: 12px; letter-spacing: 0.6px; }
.campo { display: block; text-align: left; margin: 12px 0; }
.campo span { display: block; color: #9a9a9a; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 6px; }
input, textarea, select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #444;
  background: #121212;
  color: #fff;
}
.mesa {
  margin: 14px 0;
  padding: 16px;
  text-align: center;
  border: 1px solid #38bdf8;
  border-radius: 12px;
  color: #38bdf8;
  font-size: 22px;
  font-weight: 700;
}
.aviso {
  background: #451a03;
  border: 1px solid #f59e0b;
  color: #fef3c7;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}
.item, .persona {
  text-align: left;
  background: #262626;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  width: 100%;
  color: inherit;
}
.item small, .persona small { color: #38bdf8; }
.resumen { color: #9a9a9a; font-size: 13px; margin: 8px 0; }
.grupo { margin-top: 14px; text-align: left; color: #38bdf8; font-size: 13px; letter-spacing: 0.4px; }
.marcas { display: grid; gap: 8px; margin: 8px 0 4px; }
.marca { text-align: left; background: #121212; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.marca b { color: #fff; }
.camara video { width: 100%; border-radius: 12px; background: #000; margin-top: 10px; }
.check {
  width: 64px; height: 64px; margin: 10px auto 8px;
  border-radius: 50%; background: #22c55e; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.estado { text-align: center; color: #38bdf8; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 16px; }
.kpi { background: #121212; border-radius: 10px; padding: 12px; text-align: center; }
.kpi b { display: block; font-size: 26px; color: #38bdf8; }
.kpi span { color: #9a9a9a; font-size: 12px; }
.bloque { margin-bottom: 8px; }