/* ============================================================
   TECPORT — MODO PRUEBAS (testmode.css)
   El botón flotante para salir, la franja superior y el botón del hub. Tiene que verse SIEMPRE
   y en cualquier pantalla: va por encima de vistas y diálogos (--z-float), y por debajo de los
   toasts, que son los que cuentan qué pasó (correo simulado, suplencia…).
   ============================================================ */

/* Franja fina arriba: que una captura de pantalla nunca se confunda con la versión oficial. */
.tp-testmode-stripe {
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  z-index: calc(var(--z-float, 3000) + 50); pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--testmode-stripe-a) 0 10px,
                                        var(--testmode-stripe-b) 10px 20px);
}

.tp-testmode {
  position: fixed; left: calc(14px + var(--safe-left)); bottom: calc(14px + var(--safe-bottom));
  z-index: calc(var(--z-float, 3000) + 30);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 28px);
  padding: 6px 6px 6px 12px; border-radius: 999px;
  background: var(--testmode-solid); color: var(--testmode-solid-tx);
  box-shadow: var(--shadow-lg); font: 600 12.5px/1.2 var(--ui);
}
.tp-testmode__ico { display: flex; flex: none; }
.tp-testmode__txt { display: flex; flex-direction: column; min-width: 0; }
.tp-testmode__txt strong { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.tp-testmode__when { font-size: 11px; font-weight: 500; opacity: .9; white-space: nowrap; }
.tp-testmode__exit {
  flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--testmode-solid-tx); color: var(--testmode-exit-tx); font: 700 13px/1 var(--ui);
}
.tp-testmode__exit:hover { background: var(--testmode-exit-hov); }
.tp-testmode__exit:focus-visible { outline: 2px solid var(--testmode-solid-tx); outline-offset: 2px; }

/* Móvil: sin la hora (cabe en la franja del pulgar sin tapar la barra de acciones). */
@media (max-width: 600px) {
  .tp-testmode { left: calc(10px + var(--safe-left)); bottom: calc(10px + var(--safe-bottom)); gap: 8px; }
  .tp-testmode__when { display: none; }
}

/* Botón del hub para entrar. */
.hub-testmode { color: var(--testmode-hub); }

/* Diálogos de entrar/salir. */
.tp-testmode-dlg p { margin: 0 0 8px; }
.tp-testmode-dlg ul { margin: 6px 0 0; padding-left: 18px; }
.tp-testmode-dlg li { margin: 6px 0; line-height: 1.45; }
.tp-testmode-dlg__muted { color: var(--text-3); }

/* Suplencia de prueba: un paso que en la vida real hace otra persona (Campo, Garantías). */
.tm-standin {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 9px;
  border: 1px dashed var(--testmode-solid); border-radius: var(--r-sm);
  color: var(--testmode-solid); background: var(--warn-bg); font: 600 12px/1.35 var(--ui);
}
.tm-standin--check { margin: 6px 0 0; cursor: pointer; }
.tm-standin--check input { margin: 0; }