/* Consola de gestión de Royect IoT.
   Sin framework ni compilación: son tres ficheros que se editan y se sirven. */

:root {
  --fondo: #f3f5f1;
  --panel: #ffffff;
  --hundido: #eaeee7;
  --tinta: #131b17;
  --tinta-suave: #3c4842;
  --apagado: #5b665f;
  --linea: #d9e0d7;
  --linea-fuerte: #bcc7bd;
  --acento: #1a56db;
  --acento-suave: #e5edfb;
  /* El cromo —barra, rail, panel de sección— es negro en los dos temas: es la
     marca, no el fondo, y cambiarlo con el sistema lo desdibujaría. */
  --cromo: #0a0a0a;
  --cromo-suave: #171717;
  --cromo-texto: #f5f5f5;
  --cromo-apagado: #9ca3af;
  --alerta: #a3341f;
  --alerta-suave: #f7e6e2;
  --aviso: #8a6a1e;
  --aviso-suave: #f2ebda;

  --marca: #0b5bd6;
  --marca-suave: #e4edfd;

  --ui: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1512;
    --panel: #161f1a;
    --hundido: #111a15;
    --tinta: #e4eae5;
    --tinta-suave: #c2ccc5;
    --apagado: #94a199;
    --linea: #26332c;
    --linea-fuerte: #38493f;
    --acento: #4cc0a2;
    --acento-suave: #14302a;
    --alerta: #e88b76;
    --alerta-suave: #33201c;
    --aviso: #c79e44;
    --aviso-suave: #2b2718;
    --marca: #6ba4ff;
    --marca-suave: #16233c;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.1rem;
}
h3 {
  font-size: 0.95rem;
  margin-top: 1.75rem;
}

.ayuda {
  color: var(--apagado);
  font-size: 0.87rem;
  margin: 0 0 1rem;
}
.opcional {
  color: var(--apagado);
  font-weight: 400;
}

/* --------------------------------------------------------------- entrada */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.tarjeta-entrada {
  width: 100%;
  max-width: 22rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 2rem 1.75rem;
}
.tarjeta-entrada .sub {
  color: var(--apagado);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

/* ----------------------------------------------------------------- barra */

.barra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.9rem;
  background: var(--cromo);
  color: var(--cromo-texto);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* El título de lo que se está mirando, centrado: es lo que dice dónde estás
   cuando el menú está plegado. */
.barra h1 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}
.marca-boton {
  display: grid;
  place-items: center;
  padding: 0.2rem 0.3rem;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.marca-boton:hover {
  background: var(--cromo-suave);
}
.marca img {
  display: block;
  height: 1.15rem;
  width: auto;
  /* El logotipo es negro; sobre la barra negra hay que invertirlo. */
  filter: invert(1);
}
.marca-entrada {
  margin: 0 0 0.6rem;
}
.marca-entrada img {
  display: block;
  height: 2rem;
  width: auto;
}
.sesion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--cromo-apagado);
}
.sesion .enlace {
  color: var(--cromo-apagado);
}
.avatar {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--cromo-apagado);
}
.barra .ayuda-boton {
  border-color: #3f3f46;
  background: var(--cromo-suave);
  color: var(--cromo-apagado);
}

/* ------------------------------------------------------------- armazón --- */

.armazon {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 2.4rem);
}
.menu {
  display: flex;
  background: var(--cromo);
  color: var(--cromo-texto);
}
/* Plegado entero: un panel se mira a pantalla completa. */
.menu[hidden] {
  display: none;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 3.6rem;
  padding: 0.5rem 0.35rem;
  margin: 0;
  list-style: none;
  border-right: 1px solid #1f1f23;
}
.rail-item {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: 100%;
  padding: 0.45rem 0.1rem;
  font: inherit;
  font-size: 0.62rem;
  color: var(--cromo-apagado);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.rail-item:hover {
  background: var(--cromo-suave);
  color: var(--cromo-texto);
}
.rail-item[aria-pressed='true'] {
  background: #1e293b;
  color: #fff;
}
.rail-icono {
  font-size: 1.05rem;
  line-height: 1;
}

.seccion {
  width: 9.5rem;
  padding: 0.75rem 0.6rem;
}
.seccion-titulo {
  margin: 0.5rem 0 0.3rem;
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.seccion-titulo:first-child {
  margin-top: 0;
}
.seccion-lista {
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}
.seccion-vacia {
  font-size: 0.76rem;
  color: #6b7280;
}
.seccion .pestana,
.seccion-lista .item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.76rem;
  color: #d4d4d8;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
}
.seccion .pestana:hover,
.seccion-lista .item:hover {
  background: var(--cromo-suave);
  color: #fff;
}
.seccion .pestana[aria-pressed='true'],
.seccion-lista .item[aria-pressed='true'] {
  background: #1e3a8a;
  color: #fff;
}
/* Los botones de crear: azul del diseño, y separados de la lista porque no
   navegan, hacen algo. */
.boton-azul {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  color: #fff;
  background: var(--acento);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.boton-azul:hover {
  background: #1747b8;
}

.lienzo {
  flex: 1;
  min-width: 0;
  background: var(--fondo);
}

/* ----------------------------------------------------------------- vista */

.vista {
  padding: 1.5rem 1.5rem 4rem;
}
.columnas {
  max-width: 78rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
/* El botón de volver solo existe en pantalla estrecha: en ancha las dos
   columnas están a la vista y no hay a dónde volver. */
.columnas > .volver {
  display: none;
}

@media (max-width: 60rem) {
  .columnas {
    grid-template-columns: 1fr;
  }

  /* Una cosa u otra, no las dos apiladas: apiladas obligan a pasar por encima
     de la lista entera cada vez que se toca algo. */
  .columnas[data-mostrando='trabajo'] > .panel:first-of-type {
    display: none;
  }
  .columnas[data-mostrando='lista'] > .panel:not(:first-of-type) {
    display: none;
  }
  .columnas[data-mostrando='trabajo'] > .volver {
    display: block;
    justify-self: start;
    font: inherit;
    font-size: 0.88rem;
    color: var(--acento);
    background: none;
    border: 0;
    padding: 0.4rem 0;
    cursor: pointer;
  }
}

/* Tarjetas planas: el diseño no usa sombras, solo un borde muy suave sobre el
   lienzo gris. La jerarquía la hace el espacio, no el relieve. */
.panel {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1.35rem;
}
.panel h2 {
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}
.panel h3 {
  font-size: 0.9rem;
  margin: 1.6rem 0 0.4rem;
}

/* ---------------------------------------------------------------- listas */

.lista {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.lista li {
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lista li.pulsable {
  cursor: pointer;
}
.lista li.pulsable:hover {
  border-color: var(--linea-fuerte);
  background: var(--hundido);
}
.lista li.activo {
  border-color: var(--acento);
  background: var(--acento-suave);
}
.lista.compacta li {
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
}
.lista .principal {
  font-weight: 600;
}
.lista .secundario-txt {
  color: var(--apagado);
  font-size: 0.85rem;
}
.lista .cod {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--apagado);
}
.lista .vacia {
  color: var(--apagado);
  font-style: italic;
  border-style: dashed;
}

.etiqueta {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  background: var(--hundido);
  color: var(--apagado);
}
.etiqueta.activo {
  background: var(--acento-suave);
  color: var(--acento);
}
.etiqueta.borrador {
  background: var(--aviso-suave);
  color: var(--aviso);
}
.etiqueta.dinamico {
  background: var(--marca-suave);
  color: var(--marca);
}

/* Nota informativa dentro de un panel; no es un aviso de la sesión. */
.aviso-suelto {
  background: var(--marca-suave);
  color: var(--marca);
  border-radius: 4px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------ formulario */

.formulario {
  display: grid;
  gap: 0.15rem;
}
.formulario.en-linea {
  grid-template-columns: 1fr 1fr auto auto;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1rem;
}
@media (max-width: 40rem) {
  .formulario.en-linea {
    grid-template-columns: 1fr;
  }
}

label {
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.75rem;
}
.formulario.en-linea label {
  margin-top: 0;
}
small {
  color: var(--apagado);
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}

input,
select,
textarea {
  font: inherit;
  width: 100%;
  background: var(--fondo);
  color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
}
textarea {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.6;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}

button {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--acento);
  color: var(--fondo);
  border: 1px solid var(--acento);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  cursor: pointer;
}
button:hover:not(:disabled) {
  filter: brightness(1.08);
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
button.secundario {
  background: none;
  color: var(--acento);
}
button.enlace {
  background: none;
  border: none;
  color: var(--acento);
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  text-decoration: underline;
}
.formulario.en-linea button {
  margin-top: 0;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.acciones .puerto {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  margin: 1rem 0 0;
}
.acciones .puerto input {
  width: 4.5rem;
}

.plegable {
  margin-top: 1rem;
  border-top: 1px solid var(--linea);
  padding-top: 0.75rem;
}
.plegable summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--acento);
}

.buscador {
  margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------- resultados */

.error,
.aviso,
.exito {
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  font-size: 0.87rem;
  margin: 1rem 0 0;
}
.error {
  background: var(--alerta-suave);
  color: var(--alerta);
}
.exito {
  background: var(--acento-suave);
  color: var(--acento);
}
.aviso {
  background: var(--aviso-suave);
  color: var(--aviso);
  max-width: 78rem;
  margin: 1rem auto 0;
}

#resultado-prueba {
  margin-top: 1.25rem;
}
.caso {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea-fuerte);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.87rem;
}
.caso.bien {
  border-left-color: var(--acento);
}
.caso.mal {
  border-left-color: var(--alerta);
}
.caso .trama {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--apagado);
}
.caso .medidas {
  margin-top: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* El registro de tramas: la fila se abre, así que tiene que parecer pulsable. */
.tabla-envoltorio tbody tr.pulsable {
  cursor: pointer;
}
#detalle-trama:not(:empty) {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}
#detalle-trama .documento {
  max-height: 18rem;
}

.caso .medida,
.lista .medida {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--acento-suave);
  color: var(--acento);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.caso .fallo {
  color: var(--alerta);
  margin-top: 0.25rem;
}
.caso .contexto {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--marca);
  margin-top: 0.3rem;
  word-break: break-all;
}
.caso .consola {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--apagado);
  margin-top: 0.3rem;
  white-space: pre-wrap;
}

.secreto {
  font-family: var(--mono);
  font-size: 0.82rem;
  background: var(--hundido);
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
  padding: 0.5rem 0.65rem;
  margin: 0.35rem 0 0;
  word-break: break-all;
  user-select: all;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}

/* ----------------------------------------------------------------- datos */

.cabecera-datos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.rangos,
.conmutador {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.rangos button,
.conmutador button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tinta-suave);
  background: var(--fondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin: 0;
  cursor: pointer;
}
.rangos button[aria-pressed='true'],
.conmutador button[aria-pressed='true'] {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

/* Una gráfica por unidad: mezclar °C y hPa en los mismos ejes deja una de las
   dos como una raya plana. */
.grafica {
  margin-bottom: 1.25rem;
}
.grafica .u-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--apagado);
}
.grafica .u-legend {
  font-size: 0.82rem;
}
.grafica .u-legend th,
.grafica .u-legend td {
  color: var(--tinta-suave);
}

/* Las tablas anchas se desplazan dentro de su caja, no arrastran la página. */
.tabla-envoltorio {
  overflow-x: auto;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--linea);
  border-radius: 4px;
}
.tabla-envoltorio table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}
.tabla-envoltorio th,
.tabla-envoltorio td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  white-space: nowrap;
}
.tabla-envoltorio thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  font-weight: 600;
  border-bottom: 1px solid var(--linea-fuerte);
}
.tabla-envoltorio td.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabla-envoltorio tbody tr:hover {
  background: var(--hundido);
}

#lista-datos-metricas li {
  gap: 0.4rem;
}
#lista-datos-metricas input[type='checkbox'] {
  width: auto;
  margin: 0;
}

/* Documento largo servido por la API (el harness). Se lee y se copia. */
.documento {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--hundido);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0.75rem;
  max-height: 26rem;
  overflow-y: auto;
  margin: 0.5rem 0 0;
}

/* El motivo de una propuesta de importación: se lee, no se escanea. */
.tabla-envoltorio td.motivo {
  white-space: normal;
  min-width: 16rem;
  color: var(--apagado);
  font-size: 0.8rem;
}
.tabla-envoltorio select {
  font-size: 0.82rem;
  padding: 0.2rem 0.35rem;
  min-width: 10rem;
}
.tabla-envoltorio input[type='checkbox'] {
  width: auto;
  margin: 0;
}

/* Acciones que no se deshacen: separadas del resto y con su propio color. */
.zona-peligro {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  align-items: center;
}
.zona-peligro small {
  margin: 0;
  flex: 1;
  min-width: 12rem;
}
button.peligro {
  background: none;
  border-color: var(--alerta);
  color: var(--alerta);
  margin-top: 0;
}
button.peligro:hover:not(:disabled) {
  background: var(--alerta-suave);
  filter: none;
}

/* Pasos numerados de configuración: se siguen, no se leen de corrido. */
.instrucciones {
  margin-top: 1.25rem;
}
.instrucciones ol {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
  font-size: 0.87rem;
  line-height: 1.6;
}
.instrucciones li {
  margin-bottom: 0.3rem;
}

/* Mandos de la gráfica: en línea, sin robarle sitio a lo que se mira. */
.mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.mando {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--apagado);
}
.mando select {
  width: auto;
  font-size: 0.82rem;
  padding: 0.2rem 0.4rem;
}
.mando input[type='number'] {
  width: 5.5rem;
  font-size: 0.82rem;
  padding: 0.2rem 0.4rem;
}
.mando button {
  margin: 0;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
}
.pista {
  margin: 0;
}

/* La gráfica necesita su propio fondo, distinto del panel: sin él, la zona de
   datos y la de los ejes se confunden y todo se lee peor. */
.grafica {
  margin-bottom: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 0.75rem 0.5rem 0.25rem;
  background: var(--panel);
}
.grafica .u-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.4rem;
}

/* Cabecera de una lista: el título y el botón de crear, juntos. Tener el alta
   siempre desplegada ocupaba la mitad de la pantalla sin hacer nada. */
.cabecera-lista {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
button.nuevo {
  margin: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  background: none;
  color: var(--acento);
}
button.nuevo:hover {
  background: var(--acento-suave);
  filter: none;
}

/* Estados de una orden: se leen de un vistazo, sin tener que leer la palabra. */
.etiqueta.queued,
.etiqueta.sending {
  background: var(--hundido);
  color: var(--apagado);
}
.etiqueta.sent {
  background: var(--marca-suave);
  color: var(--marca);
}
.etiqueta.confirmed {
  background: var(--acento-suave);
  color: var(--acento);
}
.etiqueta.failed,
.etiqueta.expired {
  background: var(--alerta-suave);
  color: var(--alerta);
}

/* Configuración del aparato: lo pendiente tiene que verse sin buscarlo, porque
   es la diferencia entre «ya está» y «se le ha pedido y aún no ha contestado». */
#form-parametros .campo {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.9rem;
}
#form-parametros .campo input[type='checkbox'] {
  justify-self: start;
}
#form-parametros input:disabled,
#form-parametros select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ayuda.esperando {
  color: var(--aviso);
}

/* ---------------------------------------------------------------- ayuda ---
   Un «?» en la barra: se consulta cuando algo no se entiende y se cierra. No
   compite con las pestañas, que es donde se trabaja. */
.ayuda-boton {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  background: var(--hundido);
  color: var(--apagado);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.ayuda-boton:hover {
  border-color: var(--acento);
  color: var(--acento);
}

#dialogo-ayuda {
  max-width: 46rem;
  width: calc(100% - 2rem);
  max-height: 85vh;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  background: var(--panel);
  color: var(--tinta);
}
#dialogo-ayuda::backdrop {
  background: rgb(0 0 0 / 45%);
}
.documento-ayuda {
  padding: 1.4rem 1.6rem 2rem;
  overflow-y: auto;
  max-height: 85vh;
  line-height: 1.55;
}
.ayuda-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  padding: 0.2rem 0 0.6rem;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}
.documento-ayuda h3 {
  margin: 1.6rem 0 0.4rem;
}
.documento-ayuda p {
  margin: 0 0 0.7rem;
  max-width: 60ch;
}

/* El flujo va numerado porque es una secuencia de verdad: cada paso solo puede
   ocurrir después del anterior. */
.flujo {
  display: grid;
  gap: 0.7rem;
  margin: 0.8rem 0 0;
  padding-left: 1.4rem;
}
.flujo li {
  max-width: 60ch;
}

.tabla-ayuda {
  border-collapse: collapse;
  margin: 0.6rem 0 0.8rem;
}
.tabla-ayuda th,
.tabla-ayuda td {
  text-align: left;
  vertical-align: top;
  padding: 0.35rem 0.9rem 0.35rem 0;
  border-bottom: 1px solid var(--linea);
  font-weight: 400;
}
.tabla-ayuda td {
  max-width: 46ch;
}

.glosario {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.35rem 1.2rem;
  margin: 0.6rem 0 0;
}
.glosario dt {
  font-weight: 600;
}
.glosario dd {
  margin: 0;
  max-width: 52ch;
}
@media (max-width: 40rem) {
  .glosario {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .glosario dd {
    margin-bottom: 0.5rem;
  }
}

/* Una anomalía se pinta arriba y se ve: si hay que buscarla, no sirve. */
.anomalia {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--alerta);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--alerta-suave);
  color: var(--alerta);
  font-size: 0.88rem;
}
.anomalia .enlace {
  margin-left: auto;
}

/* Cómo conectar el aparato: plegado, porque solo hace falta al ponerlo en
   marcha, pero a mano, porque entonces hace mucha falta. */
.conexion {
  margin: 0 0 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--hundido);
}
.conexion summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.conexion .dato-conexion {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  margin-top: 0.4rem;
}
.conexion .dato-conexion code {
  font-family: var(--mono);
  font-size: 0.8rem;
  word-break: break-all;
}
.conexion .lista {
  margin-top: 0.7rem;
}
@media (max-width: 40rem) {
  .conexion .dato-conexion {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ en el móvil ---
   La consola se usa también desde el teléfono, sin instalar nada. Lo que
   cambia no es el tamaño de la letra sino la forma de moverse: una cosa a la
   vez, nada que se salga por los lados, y objetivos que se puedan tocar con el
   dedo y no con un ratón. */

/* El zoom al enfocar un campo es de iOS y ocurre con cualquier letra por debajo
   de 16px. No se quita desactivando el zoom —eso rompe la accesibilidad—, se
   quita poniendo la letra que iOS espera. */
@media (max-width: 40rem) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 60rem) {
  .vista {
    padding: 1rem 0.9rem 3rem;
  }
  .panel {
    padding: 1rem;
  }

  /* Las pestañas no se envuelven en tres filas: se desplazan a lo ancho, que
     es lo que la mano ya sabe hacer en un teléfono. */
  .barra {
    padding: 0.6rem 0.9rem;
    gap: 0.5rem;
  }
  .barra nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Que la última pestaña no quede pegada al borde al llegar al final. */
    padding-inline-end: 0.5rem;
  }
  .barra nav::-webkit-scrollbar {
    display: none;
  }
  .pestana {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Con el dedo hace falta más superficie que con el puntero. */
  .lista li,
  .tabla-envoltorio tbody tr {
    min-height: 2.75rem;
  }
  button,
  .enlace {
    min-height: 2.5rem;
  }
  .ayuda-boton {
    min-height: 0;
  }

  /* El editor de decodificadores en vertical: más alto y sin envolver líneas,
     porque una línea de código partida se lee peor que desplazada. */
  textarea {
    min-height: 12rem;
  }

  /* Los grupos de mandos en línea pasan a apilarse. */
  .mandos,
  .acciones {
    flex-wrap: wrap;
  }
  .acciones > * {
    flex: 1 1 auto;
  }
}

/* Nada se sale por los lados: es el fallo que hace una página inservible en un
   teléfono, y aparece siempre por una tabla o un bloque de código. */
body {
  overflow-x: hidden;
}
pre,
code {
  overflow-x: auto;
  max-width: 100%;
}

/* --------------------------------------------------- asistente de alta ---
   Tres pasos: qué es, quién es y dónde va, y cómo tiene que comportarse. */
.pasos {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--apagado);
  counter-reset: paso;
}
.pasos li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  counter-increment: paso;
}
.pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  font-size: 0.78rem;
  font-weight: 600;
}
.pasos li + li::after {
  content: '';
}
.pasos li[aria-current='step'] {
  color: var(--acento);
  font-weight: 600;
}
.pasos li[aria-current='step']::before {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
/* Lo ya hecho se marca: dice cuánto queda sin tener que contar. */
.pasos li.hecho::before {
  content: '✓';
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

/* La rejilla de modelos. La foto es lo que se reconoce de un vistazo cuando
   hay cuarenta modelos y todos se llaman parecido. */
.rejilla-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.tarjeta-modelo {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem;
  text-align: left;
  font: inherit;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 6px;
  cursor: pointer;
}
.tarjeta-modelo:hover {
  border-color: var(--acento);
}
.tarjeta-modelo img,
.tarjeta-modelo .sin-foto {
  display: grid;
  place-items: center;
  width: 100%;
  height: 5rem;
  object-fit: contain;
  background: var(--hundido);
  border-radius: 4px;
  color: var(--apagado);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.tarjeta-modelo .principal {
  font-weight: 600;
}

@media (max-width: 40rem) {
  .pasos {
    font-size: 0.8rem;
    gap: 0.4rem;
  }
  .rejilla-modelos {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  }
}

/* Las acciones de una fila, al final y discretas: la fila se lee por su nombre
   y su resultado, no por sus botones. */
.acciones-fila {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
}
.acciones-fila .enlace {
  font-size: 0.82rem;
}

/* ---------------------------------------------------------- paneles ---
   Un panel es una cuadrícula de tarjetas sobre el lienzo. Lo que se mira aquí
   no es una lista de datos sino un estado: por eso las tarjetas son grandes,
   con el valor delante y el detalle detrás. */
.panel-lienzo {
  position: relative;
  padding: 1.25rem;
}
.panel-acciones {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  gap: 0.3rem;
}
.chip {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  color: var(--tinta-suave);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 6px;
  cursor: pointer;
}
.chip:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.cuadricula {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem;
  max-width: 62rem;
  margin: 2.5rem auto 0;
}
.tarjeta {
  min-height: 8.5rem;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 8px;
}
.tarjeta .nombre {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}
.tarjeta .cuando {
  display: block;
  font-size: 0.78rem;
  color: var(--apagado);
  margin-bottom: 0.9rem;
}
/* El estado se lee por el color antes que por el texto: es lo que se busca de
   un vistazo desde el otro lado de una nave. */
.tarjeta .bombilla {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--alerta);
}
.tarjeta .bombilla.encendida {
  background: #22c55e;
}
/* Una tarjeta que es un botón ocupa toda su superficie: se pulsa con guantes. */
.tarjeta.accion {
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  border: 0;
  cursor: pointer;
}
.tarjeta.accion.activar {
  background: #4ec13a;
}
.tarjeta.accion.desactivar {
  background: #f75c5c;
}
.tarjeta.ancha {
  grid-column: span 2;
}
@media (max-width: 40rem) {
  .tarjeta.ancha {
    grid-column: span 1;
  }
  .cuadricula {
    margin-top: 3.5rem;
  }
}

/* ------------------------------------------------------ botones del diseño ---
   Azul lleno para lo que hace algo, contorno para lo secundario. Sin sombras ni
   mayúsculas: el diseño es plano y el texto va en su caja tal cual se lee. */
.formulario button[type='submit'],
.acciones button:not(.secundario):not(.enlace):not(.chip) {
  background: var(--acento);
  color: #fff;
  border: 1px solid var(--acento);
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font-weight: 500;
}
.formulario button[type='submit']:hover,
.acciones button:not(.secundario):not(.enlace):not(.chip):hover {
  background: #1747b8;
  border-color: #1747b8;
}
.acciones button.secundario {
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
}

/* Los campos, con el aire del diseño. */
.formulario input,
.formulario select,
.formulario textarea {
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}
.formulario label {
  font-size: 0.83rem;
  font-weight: 600;
}

/* La lista de la izquierda: filas altas y separadas, sin líneas entre ellas.
   Lo que separa es el espacio; una línea por fila hace una reja. */
.lista li.pulsable {
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}
.lista li.pulsable.activo {
  background: var(--acento-suave);
}

/* ---------------------------------------------- configurador de modelo
   La maqueta «Configurador Modelo dispositivo»: ficha arriba con las fotos a
   la derecha, el decodificador con la versión dentro del editor y los iconos
   al lado, los test en columnas, acciones y conexión al pie, y Crear/Actualizar.
   Una sola pantalla para crear y para modificar. */

.ico {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  vertical-align: -0.15em;
  flex: none;
}
.ico.grande {
  width: 2.2rem;
  height: 2.2rem;
}

/* Todos los diálogos con el mismo marco. */
dialog {
  max-width: 46rem;
  width: calc(100% - 2rem);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  background: var(--panel);
  color: var(--tinta);
}
dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}
dialog.dialogo-ancho {
  max-width: 72rem;
}
#dialogo-nota .documento-ayuda,
#dialogo-recorte .documento-ayuda {
  max-width: 34rem;
}
#dialogo-nota,
#dialogo-recorte {
  max-width: 34rem;
}

button.cerrar {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.3rem;
  color: var(--tinta);
  cursor: pointer;
}

.configurador .miga {
  font-size: 0.85rem;
  color: var(--apagado);
  margin: 0 0 0.5rem;
}
.configurador-cabecera {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.configurador-cabecera h2 {
  margin: 0;
  font-size: 1.25rem;
}
.configurador-cabecera small {
  font-weight: 400;
  margin-left: 0.5rem;
}
.configurador h3 {
  margin-top: 1.6rem;
}

/* Ficha: campos a la izquierda, fotos a la derecha. */
.ficha-modelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 1.5rem;
  align-items: start;
}
.fila-ficha {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 1fr;
  gap: 0.8rem;
}
.fila-ficha.dos {
  grid-template-columns: 1fr 1fr;
}
.fila-ficha.tres {
  grid-template-columns: 0.6fr 1.2fr 1.4fr;
}
#tipo-comportamiento .fila-ficha {
  grid-template-columns: repeat(3, 1fr);
}
.campo {
  display: grid;
  gap: 0.25rem;
  align-content: start;
}
.ficha-campos > label {
  display: block;
  margin-top: 0.9rem;
}
textarea.texto-normal {
  font-family: var(--ui);
  font-size: 0.9rem;
}

/* Documentación: el campo y el botón a la izquierda, los iconos al lado. */
.fila-docs {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  margin-top: 0.9rem;
}
.doc-entrada {
  flex: 0 1 22rem;
}
.doc-entrada label {
  display: block;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.subir-doc {
  display: flex;
}
.subir-doc input {
  flex: 1;
  min-width: 0;
  border-radius: 4px 0 0 4px;
}
.subir-doc button {
  white-space: nowrap;
  border-radius: 0 4px 4px 0;
  margin-left: -1px;
}
/* Si no caben, se desplazan de lado, como dice la maqueta. */
.docs-modelo {
  flex: 1;
  min-width: 0;
  list-style: none;
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem 0 0.1rem;
  margin: 0;
  overflow-x: auto;
}
.docs-modelo .vacia {
  color: var(--apagado);
  font-size: 0.85rem;
  font-style: italic;
  align-self: center;
}
.docs-modelo .doc {
  position: relative;
  flex: none;
}
.doc-abrir {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  width: 5.2rem;
  padding: 0.3rem 0.2rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--tinta);
  cursor: pointer;
  font-weight: 400;
}
.doc-abrir:hover,
.doc-abrir:focus-visible {
  border-color: var(--linea-fuerte);
}
.doc-nombre {
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
.doc-quitar {
  position: absolute;
  top: 0;
  right: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  background: var(--panel);
  color: var(--alerta);
  cursor: pointer;
  opacity: 0;
}
.doc:hover .doc-quitar,
.doc:focus-within .doc-quitar {
  opacity: 1;
}
@media (hover: none) {
  .doc-quitar {
    opacity: 1;
  }
}

.insignia {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  padding: 0.45rem 0.3rem;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: #6b7280;
}
.insignia.pdf {
  background: #c8372d;
}
.insignia.doc {
  background: #2b5fb8;
}
.insignia.xls {
  background: #1f7a4a;
}
.insignia.img {
  background: #7c4dbd;
}
.insignia.txt {
  background: #4b5563;
}
.insignia.js {
  background: #a16207;
}

/* Imágenes: la del modelo grande y cuadrada, en el gris del catálogo. */
.imagen-principal {
  position: relative;
  aspect-ratio: 1;
  background: #e8e8ea;
  border-radius: 4px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.imagen-principal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.imagen-subir {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: #3c4842;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.imagen-subir:hover {
  background: rgb(0 0 0 / 4%);
}
button.papelera {
  display: inline-grid;
  place-items: center;
  padding: 0.25rem;
  background: none;
  border: none;
  border-radius: 3px;
  color: #d32f2f;
  cursor: pointer;
}
button.papelera:hover {
  background: rgb(211 47 47 / 10%);
}
#imagen-borrar {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  background: rgb(255 255 255 / 80%);
  font-size: 1.15rem;
}
.miniaturas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  padding: 0;
  margin: 0.5rem 0 0.3rem;
}
.miniaturas .mini {
  position: relative;
  aspect-ratio: 1;
  background: #e8e8ea;
  border-radius: 3px;
  overflow: hidden;
}
.miniaturas .mini.actual {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
}
.mini-ver,
.mini-subir {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #9aa0a6;
}
.mini-subir:hover {
  color: var(--marca);
  background: rgb(0 0 0 / 4%);
}
.mini-ver img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mini-borrar {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  font-size: 0.8rem;
  background: rgb(255 255 255 / 80%) !important;
  padding: 0.1rem !important;
}

/* Decodificador: la versión va DENTRO del editor, arriba a la derecha. */
.editor-con-iconos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
}
.editor-caja {
  position: relative;
}
.editor-caja textarea {
  padding-top: 0.6rem;
  min-height: 18rem;
}
.version-flotante {
  position: absolute;
  top: 0.4rem;
  right: 1.1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.3rem;
  background: var(--panel);
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px;
}
.version-flotante select {
  width: auto;
  border: none;
  padding: 0.15rem 0.3rem;
  font-size: 0.82rem;
  background: transparent;
}
.version-info {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--apagado);
  background: none;
  color: var(--apagado);
  font: 600 0.7rem var(--ui);
  font-style: italic;
  cursor: pointer;
}
.iconos-decoder {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  padding-top: 0.2rem;
}
.icono-doc {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  width: 4.6rem;
  background: none;
  border: none;
  color: var(--tinta-suave);
  font-size: 0.68rem;
  font-weight: 500;
  cursor: pointer;
}
.boton-ia {
  width: 2.8rem;
  height: 2.8rem;
  border: none;
  border-radius: 4px;
  background: var(--marca);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}
.boton-ia.pequeno {
  width: 2.3rem;
  height: 2.3rem;
  font-size: 1rem;
}
.boton-ia:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.anomalia-txt {
  color: var(--alerta);
}

/* Los cuatro botones en su sitio de la maqueta, aparezca el que aparezca. */
.botones-decoder {
  display: grid;
  grid-template-columns: repeat(2, minmax(10rem, 14rem));
  grid-template-areas:
    'crear activar'
    'actualizar eliminar';
  gap: 0.6rem 1.2rem;
  margin-top: 0.7rem;
}
.botones-decoder button {
  background: var(--marca);
  color: #fff;
  border: 1px solid var(--marca);
  border-radius: 4px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.b-crear {
  grid-area: crear;
}
.b-activar {
  grid-area: activar;
}
.b-actualizar {
  grid-area: actualizar;
}
.b-eliminar {
  grid-area: eliminar;
}

/* Test: cabecera con + y ▶, y la lista en columnas con desplazamiento lateral. */
.test-cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}
.test-cabecera h3 {
  margin: 0;
}
.icono-redondo {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1.5px solid var(--tinta-suave);
  border-radius: 50%;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
}
.icono-redondo:hover {
  color: var(--marca);
  border-color: var(--marca);
}
.icono-redondo.ejecutar {
  color: #2e9e4f;
  border-color: #2e9e4f;
}
.rejilla-tests {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  grid-auto-columns: minmax(15rem, max-content);
  gap: 0.15rem 2rem;
  padding: 0.5rem 0 0.6rem;
  margin: 0;
  overflow-x: auto;
}
.rejilla-tests .vacia {
  color: var(--apagado);
  font-style: italic;
  font-size: 0.85rem;
}
.rejilla-tests .test {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.test-icono {
  width: 1.2rem;
  text-align: center;
  font-weight: 700;
}
.test.pasa .test-icono {
  color: #2e9e4f;
}
.test.falla .test-icono {
  color: #fff;
  background: #d32f2f;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  font-size: 0.7rem;
  line-height: 1rem;
}
.test.pendiente .test-icono {
  color: var(--aviso);
}
.test.sin .test-icono {
  color: var(--apagado);
}
.test-nombre {
  background: none;
  border: none;
  padding: 0;
  color: var(--tinta-suave);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.test-editar {
  background: none;
  border: none;
  padding: 0.1rem;
  color: var(--apagado);
  cursor: pointer;
}
.test-editar:hover,
.test-nombre:hover {
  color: var(--marca);
}

/* Acciones a la izquierda y valores de conexión a la derecha. */
.pie-modelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 2rem;
  align-items: start;
}
.lista-acciones {
  list-style: none;
  padding: 0;
  margin: 0 0 0.4rem;
  display: grid;
  gap: 0.4rem;
}
.lista-acciones .vacia {
  color: var(--apagado);
  font-style: italic;
  font-size: 0.85rem;
}
.fila-accion {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(9rem, 1.2fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}
.cabecera-acciones {
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.accion-comando {
  font-family: var(--mono);
  font-size: 0.85rem;
}
.accion-mas {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--apagado);
  cursor: pointer;
  padding: 0 0.2rem;
}
.accion-detalle {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.2rem 0 0.4rem;
}
.accion-detalle input[type='number'] {
  width: 6rem;
}
.accion-detalle select {
  width: auto;
}
.conexion-defecto small {
  display: block;
  margin-top: 0.4rem;
}

.pie-configurador {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin: 1.8rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}
.pie-configurador button {
  min-width: 8rem;
  background: var(--marca);
  color: #fff;
  border: 1px solid var(--marca);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* Diálogo de un test: entrada a la izquierda, salida a la derecha. */
.test-dialogo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
}
.test-dialogo .ayuda-cabecera {
  grid-column: 1 / -1;
}
.test-lado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.8rem 0.8rem 0.8rem 0.3rem;
  background: var(--hundido);
  border-radius: 6px;
}
.test-lado-titulo {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
}
.test-campos {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.test-campos h4 {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}
.test-campos textarea {
  font-family: var(--mono);
}
.tabla-pares ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.3rem;
  display: grid;
  gap: 0.3rem;
}
.pares-cabecera,
.fila-pares {
  display: grid;
  grid-template-columns: 1fr 1fr 1.8rem;
  gap: 0.4rem;
  align-items: center;
}
.pares-cabecera {
  font-size: 0.75rem;
  color: var(--apagado);
}
.tabla-pares.medidas .pares-cabecera,
.tabla-pares.medidas .fila-pares {
  grid-template-columns: 3.5rem 1.6fr 1fr 4rem 1.8rem;
}
.tabla-pares.medidas .pares-cabecera {
  grid-template-columns: 3.5rem 1.6fr 1fr 4rem;
}
.fila-pares .unidad {
  font-size: 0.82rem;
  color: var(--apagado);
}
.test-botones {
  justify-content: flex-end;
  margin-top: 0.6rem;
}
.estado-pasa {
  color: #2e9e4f;
}
.estado-falla {
  color: var(--alerta);
}
.estado-pendiente {
  color: var(--aviso);
}

/* Ejemplos: la lista a la izquierda, el código a la derecha. */
.ejemplos-cuerpo {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 1rem;
  margin: 0.8rem 0;
}
.ejemplos-cuerpo pre {
  max-height: 55vh;
  overflow: auto;
  margin: 0;
}
#guia-texto {
  max-height: 50vh;
  overflow: auto;
}

.historial-notas {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.2rem;
}
.historial-notas li {
  display: grid;
}
.historial-notas p {
  margin: 0.2rem 0 0;
}

#dialogo-recorte canvas {
  display: block;
  width: min(360px, 100%);
  aspect-ratio: 1;
  margin: 0.5rem auto;
  cursor: grab;
  touch-action: none;
  border-radius: 4px;
}

@media (max-width: 60rem) {
  .fila-ficha {
    grid-template-columns: 1fr 1fr;
  }
  .pie-modelo,
  .test-dialogo {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 40rem) {
  .ficha-modelo {
    grid-template-columns: 1fr;
  }
  .ficha-imagenes {
    order: -1;
    max-width: 16rem;
  }
  .fila-ficha,
  .fila-ficha.tres,
  #tipo-comportamiento .fila-ficha {
    grid-template-columns: 1fr;
  }
  .fila-docs {
    flex-direction: column;
    align-items: stretch;
  }
  .editor-con-iconos {
    grid-template-columns: 1fr;
  }
  .iconos-decoder {
    grid-auto-flow: column;
    justify-content: start;
  }
  .botones-decoder {
    grid-template-columns: 1fr 1fr;
  }
  .ejemplos-cuerpo {
    grid-template-columns: 1fr;
  }
}

/* Dentro del configurador y de los diálogos, los botones no llevan el margen
   superior general: aquí cada fila decide su espacio. */
.configurador button,
dialog button {
  margin-top: 0;
}
.mando input[type='checkbox'] {
  width: auto;
}
.subir-doc input,
.subir-doc button {
  height: 2.4rem;
}
.configurador #version-uso,
.configurador #decoder-pista {
  margin: 0.4rem 0 0;
}

/* Como en la maqueta, el configurador se trabaja a pantalla completa: la
   lista de modelos se aparta mientras está abierto, y la × la devuelve. */
.columnas.configurando {
  grid-template-columns: minmax(0, 1fr);
  max-width: 88rem;
}
.columnas.configurando > .panel:first-of-type {
  display: none;
}
.test-botones button.peligro {
  background: none;
  color: var(--alerta);
  border-color: var(--alerta);
}